three.js - 谷歌纸板视图使用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，因此只需通过 .js 启用它renderer.vr.enabled = true并将 VR 显示设置为使用即可navigator.getVRDisplays().then(displays => renderer.vr.setDevice(displays[0]));。

请参阅webvr 示例和WebVR 规范以获取更多参考。