Question

我正在尝试使用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
 });
}`

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

控制台错误

有没有人知道一个更好地概述如何使用它的教程？或者有人可能会对我可能做错的事情有所了解？

Answer 1

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

Answer 2

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

至于获得帮助的地方，我建议使用vrview-web google小组。

Answer 3

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

然而，视图仍然不完全相同，信息标签没有像Google上的演示一样分层在左下角的图像上，而是在图像的顶部，并将图像高度降低了大约30像素。也许这与指令所述的iframe有关，该功能与JavaScript API的功能并不完全相同。

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

我希望这有帮助！

Answer 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);

Answer 5

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

下载this sample Code
将其添加到您的Wamp服务器路径中，或在Visual中创建项目工作室并添加这些文件
在浏览器中打开index.html文件

适用于网络的Google VR视图

5 个答案: