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

Shy*_*sad 11 html api virtual-reality

这是我的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>
Run Code Online (Sandbox Code Playgroud)

这是网站文件夹的结构

我尝试按照谷歌代码中的说明在Webserver中托管它.但是我点击了127.0.0.1.8887网址,我得到了一个没有文件或文件夹的空白页面.然后我尝试在XAMPP上托管它,它确实有效.但是,我没有得到panaroma图像.相反,我得到了这个错误

在此输入图像描述

我用谷歌相机应用程序拍摄360度图像并使用谷歌的在线转换器将其转换为立体声,但得到了相同的错误.我也尝试从github下载VRView repo并将代码修改为

src="vrview/index.html?image=ffff.jpg&is_stereo=true"
Run Code Online (Sandbox Code Playgroud)

那也没有用.

Lia*_*. B 4

您正在使用 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>
Run Code Online (Sandbox Code Playgroud)

注意:chrome 无法访问硬盘上的文件。

编辑:这是由于CORS

跨源资源共享 (CORS) 是一种机制,允许从提供第一个资源的域之外的另一个域请求网页上的受限资源。

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