-
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"
}
);Related Options
- projectionType
- image
- video
Related Options
- yaw
- pitch
- fov
- yawRange
- pitchRange
- fovRange
Related Options
gyroMode
related option
touchDirection