谷歌纸板视图使用three.js？

Question

是否可以使用 Three.js 将如下图所示的 Google Cardboard 视图相机添加到 Google VR View？如果是这样，我该怎么做？

更具体地说，如何将 Three.js 添加到下面的 Google VR 查看代码中？

function onLoad() {
    // Load VR View.
    vrView = new VRView.Player('#vrview', {
        width: window.innerWidth,
        height: window.innerHeight,
        video: 'crusher-final.mp4',
        is_stereo: true,
        loop: false,
    });
}

Answer 1

使用 VRView 库无法做到这一点，因为它在 iframe 中运行，并且不提供任何界面供您将内容添加到 3d 视图。但是，它是完全开源的，使用 three.js 实现，源代码见这里：https://github.com/googlevr/vrview

因此您可以使用该代码并将您的东西添加到其中或自己实现它。

最简单的方法是使用自动完成大部分工作的WebVR-polyfill。这将允许您使用 WebVR-API，即使浏览器尚不支持它。

Three.js 支持内置的 WebVR-API，因此只需使用 renderer.vr.enabled = true 启用它并通过 navigator.getVRDisplays().then(displays => renderer.vr.setDevice(displays[0])); 设置 VR 显示使用即可。

请参阅webvr-examples 和WebVR-specification 以获取更多参考。