如何使用THREE.js VREffect渲染多個場景

Question

我使用StereoEffect編寫了一個Three.js應用程序，通過清除渲染器深度，使用3個場景進行疊加。 （使用這種方法Three.js - 幾何在另一個之上 ）。

但是，我現在需要使用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()沒有生效，因為畫布是黑色的，除了scene3中的一些元素。

此外，當評論出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中查看”按鈕時，我從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，因此這可能是問題的一部分。