-
Notifications
You must be signed in to change notification settings - Fork 94
PanoViewer 3.0 User Guide
Things to know before you start
- By default, WebGL only accepts images from the same origin.
- If you are using an image from another origin, you must configure CORS on the image server.
The same origin must match the following:
- Protocol
- Host Name
- Port
Ref: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
If equirectangular 360 degree photos(Ref) are ready, then half has already been done.
You can create an area where the image will be displayed (div # myPanoViewer), load the view 360 library, and assign the prepared image URL to the image property of the PanoViewer constructor option.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myPanoViewer {
position: relative; /* Must be relative or absolute.*/
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="myPanoViewer"></div>
<script src="//naver.github.io/egjs-view360/release/latest/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script>
<script>
// create PanoViewer with option
var PanoViewer = eg.view360.PanoViewer;
var container = document.getElementById("myPanoViewer");// Area where the image will be displayed(HTMLElement)
var panoViewer = new PanoViewer(container, {
// If projectionType is not specified, the default is "equirectangular".
image: "/path/to/image/image.jpg" // Specifies an image of the "equirectangular" type.
}
);
</script>
</body>
</html>view360 supports 360 videos as well as 360 images.
The video loading method is similar to the image loading method. The difference is that if you are loading an image, you must assign a value to the image property of the constructor's options, but if you are loading a video, you must specify the video property of the constructor's options.
In the example below, the video tag you want to play is assigned to the video property.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myPanoViewer {
position: relative; /* Must be relative or absolute.*/
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="myPanoViewer"></div>
<script src="//naver.github.io/egjs-view360/release/latest/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script>
<!-- Specify the video tag. At this time, display: none is processed so that the video is not displayed as a duplicate. -->
<video id="videoSrc" style="width:100%;height:400px;display:none">
<source src="../img/PanoViewer/pano.webm" type="video/webm">
<source src="../img/PanoViewer/pano.mp4" type="video/mp4">
</video>
<script>
// create PanoViewer with option
var PanoViewer = eg.view360.PanoViewer;
var container = document.getElementById("myPanoViewer"); // The area where the video will be displayed (HTMLElement)
var videoTag = document.getElementById("videoSrc");
const panoViewer = new PanoViewer(container, {
// If projectionType is not specified, the default is "equirectangular".
video: videoTag // Specify an image tag.
}
);
</script>
</body>
</html><script src="//naver.github.io/egjs-view360/release/latest/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script>
<script>
// Use global namespace
var PanoViewer = eg.view360.PanoViewer;
// create PanoViewer with option
var panoViewer = new PanoViewer(
document.getElementById("myPanoViewer"),
{
image: "/path/to/image/image.jpg"
}
);
</script>import {PanoViewer} from "@egjs/view360"
// create PanoViewer with option
const panoViewer = new PanoViewer(
document.getElementById("myPanoViewer"),
{
image: "/path/to/image/image.jpg"
}
);PanoViewer uses a projectionType of the "equirectangular" type by default. To use the "cubestrip" type of projection type, specify the projectionType property in the constructor.
// create PanoViewer with option
var panoViewer = new PanoViewer(
document.getElementById("myPanoViewer"),
{
image: "/path/to/image/image.jpg",
projectionType: PanoViewer.ProjectionType.VERTICAL_CUBESTRIP //or "vertical_cubestrip";
}
);After initializing panoViewer, you can override the image using the setImage method. At this time, projectionType can be optionally specified for the second argument. The default value is PanoViewer.ProjectionType.EQUIRECTANGULAR (constant value) or "equirectangular" (string).
panoViewer.setImage("/path/to/image/image.jpg", {
projectionType: PanoViewer.ProjectionType.VERTICAL_CUBESTRIP
});The video property of the constructor option (second parameter) allows you to display 360 videos. (Note, however, that you can not specify the image and video attributes together.)
In our basic example, we have assigned the video tag to the video property. PanoViewer also supports video URL input for your convenience.
Below is an example of passing object information of type {src, type} as an array.
// create PanoViewer with option
var panoViewer = new PanoViewer(
document.getElementById("myPanoViewer"),
{
video: [{
src: "/path/to/video/video.mp4"
type: "video/mp4"
}, {
src: "/path/to/video/video.mkv",
type: "video/mkv"
}]
/* If you do not specify a projection type, use an equirectangular projectionType.*/
}
);The video attribute can also be specified in the following form:
// 1. Video Tag
video: videoTag
// 2. Video URL
video: "/path/to/video/video.mp4"
// 3. Array of URL
video: ["/path/to/video/video.mp4", "/path/to/video/video.mkv"]
// 4. Array of {src, type} type
video: [{
src: "/path/to/video/video.mp4"
type: "video/mp4"
}, {
src: "/path/to/video/video.mkv",
type: "video/mkv"
}]It is recommended that you specify the mime type of your video so that it does not unnecessarily request unsupported videos from your browser.
As with images, it also provides methods for specifying video.
The first argument of the method supports the same type that can be specified in the video attribute of the constructor. The second argument can optionally specify projectionType, which defaults to PanoViewer.ProjectionType.EQUIRECTANGULAR (constant) or "equirectangular" (string).
panoViewer.setVideo("/path/to/image/image.jpg", {
projectionType: PanoViewer.ProjectionType.VERTICAL_CUBESTRIP
});Provides an interface for accessing video tags (objects) even if you specify a video URL instead of assigning a video tag to the video property.
// create PanoViewer with option
var panoViewer = new PanoViewer(
document.getElementById("myPanoViewer"),
{
video: [{
src: "/path/to/video/video.mp4"
type: "video/mp4"
}, {
src: "/path/to/video/video.mkv",
type: "video/mkv"
}]
/* If you do not specify a projection type, use an equirectangular projectionType*/
}
);You can get information about Video tag (object) by calling getVideo().
var videoTag = panoViewer.getVideo();
videoTag.play(); // play video!To change the field of view, you first need to understand the terms yaw / pitch / fov. In short, you can understand:
- yaw: left and right (unit is degree)
- pitch: Upper and lower (in degrees)
- fov: Viewing angle (in degrees)
Of these, fov is short for field of view. Narrow areas can be seen when fov is narrow, and wide areas can be seen when wide fov is.
This concept is also used for zooming because it is so close to zooming.
If you do not specify an angle for yaw / pitch / fov, it defaults to yaw = 0, pitch = 0, and fov = 65.
If you want to change the initial position to the screen at a certain position among the 360 degrees screen, change the yaw, pitch, and fov values to the desired angle values as shown below.
var PanoViewer = eg.view360.PanoViewer;
var panoViewer = new PanoViewer(
document.getElementById("myPanoViewer"),
{
image: "/path/to/image/image.jpg",
yaw: 180,
pitch: 40,
fov: 30
}
);Once you specify the initial position, you can also use the functions setYaw, setPitch, and setFov to adjust the angle.
//1. Setting yaw
panoViewer.setYaw(100);
// 2. Setting pitch
panoViewer.setPitch(100);
// 3. Setting fov
panoViewer.setFov(45);You can animate moving at a specified angle for a certain period of time.
// Change the yaw angle (absolute angle) to 30 degrees for one second.
panoViewer.lookAt({yaw: 30}, 1000);lookAt () can change the angle the same as setYaw (), setPitch (), setFov (). However, lookAt () provides the convenience of setting yaw / pitch / fov at once and specifying the time to move.
By specifying yawRange, pitchRange, and fovRange, you can limit the angle of movement.
By default yawRange is from -180 to +180, pitchRange is from -90 to +90 degrees, and fovRange is from 30 to 110 degrees.
If you do not want to cover 360 degrees like a panoramic picture, or if you want to limit the movement to a specific position, you can limit the angle of movement by specifying yawRange, pitchRange, or fovRange in the constructor.
var PanoViewer = eg.view360.PanoViewer;
var container = document.getElementById("myPanoViewer");
var panoViewer = new PanoViewer(container, {
image: "/path/to/image/image.jpg",
yawRange: [-144, 144], /* Limit yaw range from -144 degrees to +144 degrees */
pitchRange: [-31.5, 31.5],/* Limited pitch range from -31.5 degrees to +31.5 degrees */
fovRange: [30, 63]/* Limited fov range from 30 degrees to 63 degrees */
}
);The ready event is an event that occurs after panoViewer is initialized and all the drawing is ready.
This means that the WebGL texture binding process is finished after the image loads successfully. This is the most time-consuming part of the process, so it's a good idea to show the loading status. If the loading status is displayed, you can turn off the loading status after receiving the ready event.
// Show loading status when creating panoViewer
// It occurs when the preparation for drawing is completed.
panoViewer.on("ready", function() {
// After receiving the ready event, set the loading state to off
});The viewChange event is an event that occurs when the orientation (yaw / pitch) or view angle (fov) changes.
At this point, it's a good time to figure out what direction you're currently viewing. If you check the yaw value, you can judge how many degrees it is based on the current left and right direction.
viwer.on({
"viewChange" : function(evt) {
//Use evt.yaw value to update the direction you are looking at.
}
});contentLoaded is an event that occurs when an image or video is loaded.
The video raises the contentLoaded event when:
- If the video is in a state where it can draw the current frame (HAVE_CURRENT_DATA)
- or if the video has a loadeddata event
viwer.on({
"contentLoaded" : function(evt) {
// evt.content: A video object (HTMLVideoElement) or an image object (Image)
// evt.isVideo: Whether the content is video
// evt.projectionType: ProjectionType of the content
}
});Animation is performed when a user causes inertial movement through a strong gesture, or when the user requests the lookAt () method to move the screen for a period of time. The event that occurs at the end of this animation is animationEnd.
viwer.on({
"animationEnd" : function() {
// animation ended
}
});If you need to resize the viewer, you should call updateViewportDimensions ().
panoViewer.updateViewportDimensions({width: 300, height: 200});Raises an error event when an error occurs.
The type and message properties of the error handler's parameter can be used to determine what error occurred. view360 handles the following errors:
10: INVALID_DEVICE: Unsupported device
11: NO_WEBGL: WEBGL not supported
12, FAIL_IMAGE_LOAD: Failed to load image/video
13: FAIL_BIND_TEXTURE: Texture binding failed
14: INVALID_RESOURCE: Resource assignment error (only one of image or video must be specified)
viwer.on({
"error" : function(err) {
// err.type === 13
// err.message === "failed to bind texture"
});When you create multiple viewer instances, the browser deletes the oldest WebGL context and stops rendering. PanoViewer responds to this situation and automatically disables user interaction.
However, developers will also need to make UI changes to disabled viewers, so it is necessary to know when the rendering context is lost. This point of view notification is provided through the error event. If the event is an error event caused by rendering context lost, the value of the type property of the event object is 15.
panoViewer.on("error", function(e) {
if (e.type === 15) { // rendering context lost
// make UI changes on rendering context lost
}
});