Currently, I am in the process of setting up a basic 3D image viewer using Panolens.js. Despite following the example provided in the documentation, I am encountering console errors during the loading process. This is my initial attempt at working with equirectangular photography and Panolens/ThreeJS.
Below is the code snippet that I have included:
var panorama, viewer;
panorama = new PANOLENS.ImagePanorama('http://via.placeholder.com/720x360');
viewer = new PANOLENS.Viewer({
output: 'console'
});
viewer.add(panorama);
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
a:link,
a:visited {
color: #bdc3c7;
}
.credit {
position: absolute;
text-align: center;
width: 100%;
padding: 20px 0;
color: #fff;
}
<script src="https://pchen66.github.io/js/three/three.min.js"></script> <script src="https://pchen66.github.io/js/panolens/panolens.min.js"></script> <div class="credit"><a href="https://github.com/pchen66/panolens.js">Panolens.js</a> image panorama example. Image from <a href="http://adaptivesamples.com/tag/equirectangular/">Adaptive Samples</a></div>
The console error reads as follows:
Failed to load file:///Volumes/Nifty/DoVR%20Media/demo_v1/test.jpg: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I am utilizing an image stored in the same directory. Additionally, I attempted loading the image from imgur, but this also resulted in an error message.