1

我使用 StereoEffect 编写了 Three.js 应用程序，通过清除渲染器深度使用 3 个场景进行叠加。（使用这种方法Three.js - Geometry on another）。

但是，我现在需要使用 VREffect，以便更好地兼容 Gear VR 等头显，使用 WebVR Polyfill。

以下是代码片段，以显示其设置方式：

const renderer = new THREE.WebGLRenderer({antialias: false})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.autoClear = false;
document.body.appendChild(renderer.domElement)

effect = new THREE.VREffect(renderer)
effect.separation = 0
effect.setSize(window.innerWidth, window.innerHeight)

let vrDisplay
navigator.getVRDisplays().then(displays => {
    if (displays.length > 0) 
        vrDisplay = displays[0]
})

// Add button to enable the VR mode (display stereo)
const vrButton = VRSamplesUtil.addButton("Enter VR", "E", "/vr/cardboard64.png", () => {
    vrDisplay.requestPresent([{source: renderer.domElement}])
})

...其余的代码...

在我的动画循环中：

renderer.clear()
effect.render(scene, camera)
renderer.clearDepth()

effect.render(scene2, camera)
effect.render(scene3, camera)

但是，这种方法在使用 VREffect 时似乎不起作用（仅在进入 VR 模式时 - EG 在我的桌面上查看它可以正常工作）。我认为问题在于renderer.clear()orrenderer.clearDepth()没有生效，因为画布是漆黑的，除了场景 3 中的一些元素。

此外，在注释掉场景 2 和场景 3 的渲染时，我可以很好地看到第一个场景中的所有内容，并且正确渲染。

查看 VREffect 和 StereoEffect 中的代码，我无法弄清楚哪一部分使我的更改无用。

任何帮助/提示将不胜感激。

4

1 回答 1

0

我从来没有找到解决这个问题的方法，但是我通过在 Gear VR 以外的浏览器上使用 StereoEffect 而不是 VREffect 解决了这个问题，因为 VREffect 在那里工作得非常好，但在普通的手机浏览器上却不行，可能会使用纸板. 如果其他人遇到此问题，这就是我所做的：

在上面的示例中，我将 vrButton 位变成了这样：

const vrButton = VRSamplesUtil.addButton("Enter VR", "E", "/images/cardboard64.png", () => {

    if(navigator.userAgent.includes("Mobile VR")){
        vrDisplay.requestPresent([{source: renderer.domElement}])

    }else {
        effect = new THREE.StereoEffect(renderer)
        effect.separation = 0
        effect.setSize(window.innerWidth, window.innerHeight)
        document.getElementById("vr-sample-button-container").style.display = "none"
    } 
})

单击“在 VR 中查看”按钮时，我从 VREffect 切换到 StereoEffect。

但是，使用这种方法，内容将不会全屏显示，设备最终会进入睡眠状态。要解决这两个问题，您可以让用户点击屏幕以手动打开全屏：

renderer.domElement.addEventListener("click", () => {
    if(document.fullscreenEnabled && renderer.domElement.requestFullScreen() ||
       document.webkitFullscreenEnabled && renderer.domElement.webkitRequestFullScreen() ||
       document.mozFullScreenEnabled &&    renderer.domElement.mozRequestFullScreen() ||
       document.msFullScreenEnabled &&     renderer.domElement.msRequestFullScreen() ){}
})

显然，这不是很好的用户体验，而且你没有得到漂亮的 UI，所以如果有人发现了这个并知道实际的修复，请留下答案/评论。如果我自己找到任何东西，我会更新这个。

最后的一些想法，afaik Gear VR 浏览器有某种原生的 WebVR 实现，而在其他地方，使用了 polyfill，所以这可能是问题的一部分。

于 2016-11-08T20:48:05.270 回答