Google VR View 错误 - 无法从 ffff.jpg 加载纹理

Question

Google VR View 错误 - 无法从 ffff.jpg 加载纹理

11

这是我的index.html文件

<html>
<head>
  <title>VR Sample</title>
  <script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

</head>

<body>

  <div id="vrview">
    <iframe width="100%"
    height="300px"
    allowfullscreen
    frameborder="0"
    src="http://storage.googleapis.com/vrview/index.html?image=ffff.jpg&is_stereo=true">
</iframe>
  </div>



</body>
</html>

这是网站文件夹的结构。

我根据Google Codelabs的说明在Webserver for Chrome上进行了尝试。但当我点击127.0.0.1.8887的URL时，出现了一个空白页面，没有任何文件或文件夹。然后我尝试使用XAMPP进行托管，它确实可以正常工作。然而，我并没有得到全景图像，反而出现了以下错误：

我使用Google相机应用程序拍摄了360度图像，并通过Google的在线转换器将其转换为立体影像，但仍然出现了相同的错误。我还尝试从GitHub下载VRView存储库，并修改了代码：

src="vrview/index.html?image=ffff.jpg&is_stereo=true"

那个也没用。

- Shyam Prasad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Liam. B · Accepted Answer

您正在使用vrview的iframe版本，这意味着当您请求“ffff.jpg”时，实际上是在请求：

http://storage.googleapis.com/ffff.jpg

尝试使用 JavaScript 版本

尝试这个：

<html>
  <head>
    <script src="http://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
    <script>
      window.addEventListener('load', onVrViewLoad);

      function onVrViewLoad() {
        var vrView = new VRView.Player('#vrview', {
          image: 'http://storage.googleapis.com/vrview/examples/coral.jpg',
          is_stereo: true,
          width: '100%',
          height: 300
        });
      }
    </script>
  </head>
  <body>
    <div id="vrview"></div>
  </body>
</html>

注意：Chrome无法访问硬盘上的文件。

编辑：这是由于CORS引起的。

跨源资源共享（CORS）是一种机制，允许从第一个资源所在的域之外的另一个域请求网页上受限资源。

感谢@Eleanor Zimmermann指出这一点。