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

Question

这是我的 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 代码实验室中的说明将其托管在 chrome 的网络服务器中。但是我点击了 127.0.0.1.8887 url，我得到了一个没有文件或文件夹的空白页面。然后我尝试在 XAMPP 上托管它，它确实有效。但是，我没有得到全景图像。相反，我得到了这个错误

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

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

那也没用。

Answer 1

您使用的是 iframe 版本的 vrview，意思是当您请求 "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。

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

感谢@Eleanor Zimmermann 注意到这一点。

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

Google VR View Error - Unable to load texture from ffff.jpg

html

api

virtual-reality