使用Panolens.js不能加载图像

Question

我正在与Panolens.js合作，以启动并运行基本的3d图像查看器。我正在处理文档中提供的示例，但是加载时出现控制台错误。这是我第一次使用等矩形摄影和Panolens / ThreeJS。

我已包含代码：

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>

控制台向我显示此错误消息：

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.

我使用的图像位于同一目录中。我还尝试从imgur加载图像，但这也给我一个错误。

Answer 1

出现此错误的原因是，您在浏览器中将index.html页面作为本地页面打开。在地址栏中，您可以看到 file：// path_to_your_file 。

此issue

中描述了一些有用的细节

为避免此错误，您应该启动一些Web服务器。例如，如果您已经安装了python，则可以启动嵌入其中的简单Web服务器。另请参阅上述问题的详细信息。

安装VSCode和安装Live Server extension的另一种方法。然后通过VSCode打开文件夹，然后单击“上线”按钮。

您可能会看到，我使用LiveServer在VSCode中启动了代码，并且一切正常。

Answer 2

如果您包含的全景图像在其他服务器上，则该服务器应使用SSL（https）进行保护。 您必须将http更改为https： https://via.placeholder.com/720x360