3js内のメッシュグループのWiewポート

Question

3つのjs内のメッシュグループのビューポートを作成する最良の方法は何ですか？
私の場合、多くのインスタンスのTHREE.Groupがあります。私の目標は、メッシュが表示されるこのグループのビューポートを作成することです。
私が見ているソリューションの1つは、ローカルクリッピングプレーンを使用することです。 threejs example
しかし、THREE.Groupのために一度設定するのではなく、THREE.Meshの素材ごとにクリッピングプレーンを割り当てなければならないと心配です。
また、移動または回転するときにクリッピングプレーンを再カットする必要がありますTHREE.Group。あなたはステンシルバッファに見ることができる

Answer 1

：threejs付きまたはなし

webgl.stencilFunc()

webgl.stencilOp()

、原理は同じです。

1. 無効深書き込み
2. 無効深度テスト
3. 無効に色が
4. ステンシル操作（ステンシルバッファに値を書き込む）
5. は、ステンシルバッファへの書き込みは見えない形状（あなたを描く有効を書きますおそらくスクリーンスペースが必要です）
6. enable 1,2,3
7. ステンシル操作の変更（たとえばステンシルバッファが1の場合の描画のみ）
8. あなたがこれをやっているとき、あなたはここに
9. ステンシルオペアンプを変更して、バッファが0（5からその形状の外）でのシーンの残りの部分を描くことができに応じて、あなたのグループ
10. を描く

Three.jsには、最近実装されていない限り、ステンシル抽象はありません。つまり、実際にこれを自分で管理しなければならないと言う、transparentの "魔法のような"特性はありません。つまり、webglのコンテキストを取得し、webglの操作を手動で行う必要があります。

これを実行する方法はたくさんあります。

var myScreenSpaceQuad = new THREE.Mesh(new THREE.PlaneBufferGeometry(2,2,1,1), myQuadShaderMaterial) 

var scene1 = new THREE.Scene() 
var scene2 = new THREE.Scene() 
var sceneMask = new THREE.Scene() 

sceneMask.add(myScreenSpaceQuad) 

//... 

myRenderFunction(){ 
    //gl stencil op 
    //... 
    myRenderer.render(myCamera, sceneMask) 
    //more stencil 
    //... 
    myRenderer.render(myCamera, scene1) 
    //some more stencil... 
    myRenderer.render(myCamera, scene2) 
} 

私は実際の例を書こうとします。スクリーンスペースクワッドについては、thisをご覧ください。