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

我已經使用StereoEffect編寫了Three.js應用程序，通過清除渲染器深度，使用3個場景進行覆蓋。（使用這種方法Three.js - Geometry on top of another）。如何使用THREE.js渲染多個場景VREffect

但是，現在我需要使用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中的某些元素以外，畫布呈黑色。

此外，在註釋場景2和場景3的渲染時，我可以很好地看到第一個場景中的所有內容，並正確渲染。

翻看VREffect和StereoEffect中的代碼，我找不出哪個部分使我的更改無用。

任何幫助/提示將不勝感激。

來源

2016-09-14 Dan Ruta

只是由於'VREffect'，'StereoEffect'等引起'renderer.clear（）'作爲其render（）'函數的一部分而引起了一些類似的問題。你可以測試，如果設置'renderer.autoClear = false'可能有助於你的情況？（見https://github.com/mrdoob/three.js/blob/master/examples/js/effects/VREffect.js#L376）*編輯：只是注意到你已經設置。對不起。* –

嘗試的東西，我把渲染器。在scene2和scene3之前清除（），並且我設法獲得與在手機上獲得完全相同的輸出，當激活VR模式（黑色背景上的scene3內容）時，我的想法是在更深的地方，渲染器正在清除。雖然不在VREffect中，但我不認爲，因爲代碼中沒有任何內容（遵循WebGLRenderer文檔）指示它正在執行此操作。 @MartinSchuhfußrenderer.autoClear設置爲false（由console.log驗證），因此不應觸發它。甚至試圖從VREffect中評論它，在哪裏使用。 –

我始終沒找到如何解決這個問題，但我周圍有使用立體效果，而不是VREffect比的齒輪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" 
    } 
})

我來自哪裏VREffect切換到立體效果的時候，「觀點擊VR按鈕。

但是，使用這種方法，內容將不會全屏顯示，設備最終會進入睡眠狀態。要解決這兩個問題，可以讓用戶點擊屏幕以手動打開全屏本：

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()){} 
})

顯然，這不是很好的用戶體驗，而你沒有得到很好的用戶界面，所以如果有人發現這一點，並知道一個實際的修復，請留下一個答案/評論。如果我自己找到任何東西，我會更新。

一些最終想法，afaik Gear VR瀏覽器具有某種本地WebVR實現，而在其他地方使用了polyfill，因此可能是問題的一部分。

來源

2016-11-08 20:48:05

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

回答

相關問題