如何使用 THREE.js VREffect 渲染多个场景答案

【问题标题】：How to render multiple scenes with THREE.js VREffect如何使用 THREE.js VREffect 渲染多个场景
【发布时间】：2016-11-09 04:48:05
【问题描述】：

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

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

以下是代码中的 sn-ps，以显示它是如何设置的：

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() 或renderer.clearDepth() 没有生效，因为画布是漆黑的，除了场景3 中的一些元素。

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

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

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

【问题讨论】：

刚刚遇到了一个类似的问题，这是由VREffect、StereoEffect 等都将renderer.clear() 作为render() 功能的一部分调用的。您能否测试设置 renderer.autoClear = false 是否对您的情况有所帮助？（见github.com/mrdoob/three.js/blob/master/examples/js/effects/…）编辑：刚刚注意到你已经设置了。对不起。
在尝试的过程中，我将 renderer.clear() 放在场景 2 和场景 3 之前，并且在激活 VR 模式（黑色背景上的场景 3 内容）时，我设法获得了与手机上完全相同的输出)，所以我的想法是在更深的地方，渲染器正在被清除。虽然不在 VREffect 中，但我不认为，因为代码中没有任何内容（遵循 WebGLRenderer 文档）表明它正在执行此操作。 @MartinSchuhfuß renderer.autoClear 设置为 false（由 console.log 验证），因此不应触发它。甚至尝试从使用的 VREffect 中将其注释掉。

标签： javascript three.js scene renderer webvr

【解决方案1】：

我从来没有找到解决这个问题的方法，但我通过在 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，所以这可能是问题的一部分。

【讨论】：