2016-09-14 104 views
1

我已經使用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中的代碼,我找不出哪個部分使我的更改無用。

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

+0

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

+0

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

回答

0

我始終沒找到如何解決這個問題,但我周圍有使用立體效果,而不是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,因此可能是問題的一部分。