适用于 Web 的 Google VR 视图答案

【问题标题】：Google VR View for the Web适用于 Web 的 Google VR 视图
【发布时间】：2018-09-11 10:14:47
【问题描述】：

我正在尝试使用 Google VR View 在我的网站上嵌入一些 360 度全景图像，但我没有任何运气可以工作。我按照 Google 提供的文档作为指南...

https://developers.google.com/vr/concepts/vrview-web

`window.addEventListener('load', onVrViewLoad)
 function onVrViewLoad() {
  var vrView = new VRView.Player('#vrview', {
   image: 'img/jtree.jpg',
   is_stereo: false
 });
}`

我复制了示例代码，但在控制台中出现错误（请参阅随附的屏幕截图）

控制台错误

有谁知道可以更好地概述如何使用它的教程？或者可能有人可以阐明我可能做错了什么？

【问题讨论】：

标签： javascript html view virtual-reality

【解决方案1】：

您必须在服务器中打开您的 HTML 文件。
启用 CORS https://enable-cors.org/server.html。为了您的实验目的，我找到了一种使用 Chrome Web 服务器启用 CORS 的简单方法。

【讨论】：

【解决方案2】：

按照 Google 提供的说明，我完全没有运气 - 猜我对编码不够精通。对我来说，它只有在我使用 iframe 时才有效，请参阅 https://www.museum-joanneum.at/spielwiese/360。

但是，视图仍然不完全一样，info-Tag 并没有像 Google 上的演示那样在左下角的图像上分层，而是在图像的顶部并将图像高度降低了大约 30 像素.也许这与 iframe 有关，因为说明指出，功能与 JavaScript API 并不完全相同。

另外，对于我的图像，我必须为立体选择“false”才能正确显示。

我希望这会有所帮助！

【讨论】：

【解决方案3】：

看起来您没有正确设置目录。您的网络服务器是否设置为根是 repo 的根？您是否也收到 404 错误？（看起来 vrview.js 没有被加载）

至于获得帮助的地方，我推荐 vrview-web google group。

【讨论】：

【解决方案4】：

你需要在网页上添加这个 html id。

<div id="vrview"></div>

下面的 JavaScript 将调用 HTML 上的图像。

var vrView;

var scenes = {
    petra: {
        image: 'images/petra.jpg',
        preview: 'images/petra-preview.jpg'
    }
}

function onLoad() {
    vrView = new VRView.Player('#vrview', {
        width: '100%',
        height: 480,
        image: 'images/blank.png',
        is_stereo: false,
        is_autopan_off: true
    });

    vrView.on('ready', onVRViewReady);
    vrView.on('modechange', onModeChange);
    vrView.on('getposition', onGetPosition);
    vrView.on('error', onVRViewError);
}


function loadScene(id) {
    console.log('loadScene', id);
    // Set the image
    vrView.setContent({
        image: scenes[id].image,
        preview: scenes[id].preview,
        is_autopan_off: true
    });
}

function onVRViewReady(e) {
    console.log('onVRViewReady');
    loadScene('petra');
}

function onModeChange(e) {
    console.log('onModeChange', e.mode);
}

function onVRViewError(e) {
    console.log('Error! %s', e.message);
}

function onGetPosition(e) {
    console.log(e)
}

window.addEventListener('load', onLoad);

【讨论】：

【解决方案5】：

您只能在服务器上运行这些脚本，然后只有它会渲染纹理，因此您可以将所有文件添加到 wamp 服务器路径并通过访问，或者您可以在 asp.net 中创建一个 Web 项目，添加您的文件并构建项目。一切都将由 Visual Studio 处理。例如

下载this sample Code
将此添加到您的 wamp 服务器路径中或在可视化中创建一个项目工作室并添加这些文件
在浏览器中打开您的 index.html 文件

【讨论】：