我已經使用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中的代碼,我找不出哪個部分使我的更改無用。
任何幫助/提示將不勝感激。
只是由於'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中評論它,在哪裏使用。 –