Google VR 视图 - 托管代码不起作用答案

【问题标题】：Google VR View - Hosting code not workingGoogle VR 视图 - 托管代码不起作用
【发布时间】：2018-06-19 15:29:31
【问题描述】：

也许这是一个比我意识到的更简单的问题，但我对 HTML/JS 有点陌生，在我看来，这似乎是这段代码的一个特定问题。我正在使用 Google VR 查看器在我的网页中嵌入 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;

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

【问题讨论】：

2018 年同样如此：/

标签： javascript html google-vr

【解决方案1】：

这确实是（存档的）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 设备和新设备上运行，因为默认情况下禁用了设备方向的隐私设置。您的用户需要在其设备设置中手动打开方向传感器。

【讨论】：

【解决方案2】：

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

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

代替：

image: '360/coral.jpg'

试试：

image: '/360/coral.jpg'

假设文件夹“360”确实在您网站的根目录中。（同理，如果连播放器都没有加载，也可以用绝对路径代替相对路径来指向vrview.min.js。）

【讨论】：

这就是答案@caio-brighenti