Working with Panolens.js not loading image

Question

I am working with Panolens.js to get a basic 3d image viewer up and running. I am working off the example provided in the documentation, but I am having console errors when loading. This is my first time working with equirectangular photography and Panolens/ThreeJS.

I have included the code:

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 is giving me this error message:

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.

The image I am using is in the same directory. I also tried loading the image from imgur, but that is also giving me an error.

You need a server. Use Apache or nginx, or the built-in ones that come with WebStorm / Netbeans, whatever you happen to have handy. — , Jul 18 '18 at 16:55
To be honest, I don't have to much server experience.. can you point me some reading material? — sgerbhctim, Jul 18 '18 at 16:56
Are you using a Mac or Windows? Linux? Are you using an IDE like Netbeans or VS Code to write the website code? — , Jul 18 '18 at 17:02
I'm working on a Mac, and using Atom. I know, such a noob :/ I have Eclipse Neon for Java. — sgerbhctim, Jul 18 '18 at 17:03
Here you go: http://osxdaily.com/2012/09/02/start-apache-web-server-mac-os-x/ — , Jul 18 '18 at 17:06
You can also use this: https://atom.io/packages/atom-live-server — , Jul 18 '18 at 17:07

score 0 · Answer 1 · answered Jul 18 '18 at 17:26

The reason why you got this error is that you open your index.html page as a local page in browser. In address bar you could see file://path_to_your_file.

Some useful details are described in this issue

To avoid this error you should launch some web-server. For example if you have installed python you could launch simple web-server which is embedded in it. Also see details in the issue above.

Another alternative to install VSCode and install Live Server extension. Then open folder by VSCode and click on Go Live button.

As you could see I launch your code in VSCode with LiveServer and all is working.

kjain · Answer 2 · 2019-07-24T08:24:13.447

0

If the panorama image which you included is on other server then the server should be secure with SSL(https). You have to change http to https: https://via.placeholder.com/720x360

edited Jul 24 '19 at 08:24

answered Jul 24 '19 at 05:39

kjain

69
1
7

Working with Panolens.js not loading image

2 Answers2