Question

也许这是一个比我意识到的简单的问题，但是我对HTML / JS有点陌生，在我看来，这是此代码的特定问题。我正在使用Google VR Viewer在网页中嵌入360个元素。

他们的文档here非常简单，并且如果我也使用Google网域上托管的媒体，则按照其网站上的设置进行设置就可以了。这是我正在使用的代码，只是花哨的：

<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<script>
  window.addEventListener('load', onVrViewLoad);
  function onVrViewLoad() {
    vrView = new VRView.Player('#vrview', {
    width: '100%',
    height: 480,
    image: 'https://storage.googleapis.com/vrview/examples/coral.jpg',
    is_stereo: true,
    is_autopan_off: true
    });
  }
</script>

但是，我需要将.js文件托管在自己的服务器上，而不是仅链接到Google。因此，我尝试下载脚本并使用以下代码，但无法正常工作。任何人都可以发现问题所在吗？

<script src="build/vrview.min.js"></script>
<script>
  window.addEventListener('load', onVrViewLoad);
  function onVrViewLoad() {
    vrView = new VRView.Player('#vrview', {
    width: '100%',
    height: 480,
    image: '360/coral.jpg',
    is_stereo: true,
    is_autopan_off: true
    });
  }
</script>

作为参考，我得到的错误是

Cannot GET /index.html?image=http://127.0.0.1:61060/360/coral.jpg&amp;is_stereo=true&amp;is_autopan_off=true&amp;

谢谢！希望这不是一个愚蠢的问题。

Answer 1

我认为它正在本地主机上查找映像（它显示为http://127.0.0.1）。您是否已将其上传到您的网站，或正在尝试在本地进行？如果在本地进行，则必须运行本地服务器。

如果已将其上传到您的网站，则不要使用相对路径，而应尝试使用绝对路径。

代替：

image: '360/coral.jpg'

尝试：

image: '/360/coral.jpg'

假设文件夹“ 360”确实位于您网站的根目录中。（类似地，如果甚至没有加载播放器，则可以使用绝对路径而不是相对路径来指向vrview.min.js。）

Answer 2

这确实是（已存档的）Google VRView上缺少文档。

您需要从VRView存储库的this branch下载所有文件。您可以安全地删除示例文件夹，但保留其他所有内容。将所有这些文件和文件夹放在网站的子文件夹中。

例如，文件夹结构可以是：

yoursite/index.html <-- Your website
yoursite/ <-- Anything else you want, img/, css/, other root .html files
yoursite/googlevr/ <-- all the files from VRView repo

这应该使您具有yoursite / googlevr / build，yoursite / googlevr / images等，以及googlevr /

根目录中的index.html和style.css文件

此后，您可以通过

使用您自己的index.html（或该文件夹中的任何其他.html）中的.js。

<script src="/googlevr/build/vrview.min.js"></script>

请注意，Google VRView现在已保存在Github中，他们似乎已停止对此提供任何支持。另请注意，默认情况下，由于默认情况下禁用了设备方向的隐私设置，因此VR视图在iOS 12.1设备和新版本上将不起作用。您的用户需要在其设备设置中手动打开方向传感器。

Google VR View-托管代码不起作用

2 个答案: