THREE.js VREffectで複数のシーンをレンダリングする方法

Question

レンダラーの深さをクリアして、3つのシーンをオーバーレイ目的で使用して、StereoEffectを使用してThree.jsアプリケーションを作成しました。 （この方法を使用するとThree.js - Geometry on top of another）。

ただし、WebVR Polyfillを使用して、ギアVRなどのヘッドセットとの互換性を高めるために、VREffectを使用する必要があります。私のアニメーションループ内

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のコードを調べると、どの部分が私の変更を無駄にしているのか分かりませんでした。

助けてください/ヒントは非常に高く評価されるでしょう。

Answer 1

この問題を解決する方法は決して見つけられませんでしたが、VREffect以外のブラウザではVREffectではなくStereoEffectを使用していましたが、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" 
    } 
}) 

私はときに「ビューStereoEffectに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()){} 
}) 

を、これはユーザー体験のように良いではない、とあなたは素敵なUIを得ることはありません誰かがこれを見つけて実際の修正を知っているなら、答え/コメントを残してください。私が何かを見つけたら、これを更新します。

ギアVRブラウザにはいくつかの種類のネイティブWebVR実装がありますが、他の場所では、ポリフィルが使用されているため、問題の一部になる可能性があります。