Question

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

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

以下是代码中的代码段，以说明它是如何设置的：

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中的代码，我无法弄清楚哪些部分使我的更改变得无用。

非常感谢任何帮助/提示。

Answer 1

我从来没有找到如何解决这个问题，但我通过使用StereoEffect而不是VREffect来使用除了Gear VR之外的其他浏览器，因为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＆＃39;中观看时，我从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() ){}
})

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

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

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

1 个答案: