Wiew端口組中的網格在threejs

Question

在三個js中創建一組網格的視口的最佳方式/實踐是什麼？
在我的情況下，我有很多THREE.Mesh實例的THREE.Group。我的目標是爲該組創建視口，其中網格將可見。
我看到的一個解決方案是使用本地剪切平面。 threejs example
但我擔心我必須爲每個THREE.Mesh材質分配剪切平面，而不是爲THREE.Group設置一次。
當我移動或旋轉THREE.Group時，還需要重新剪切剪切平面。

Answer 1

你可以看看模板緩存：

webgl.stencilFunc()

webgl.stencilOp()

不管有沒有threejs，其原理是一樣的。

1. 禁用深度寫入
2. 禁用深度測試
3. 禁用顏色寫
4. 使模版操作（寫入值模板緩衝區）
5. 繪製寫入到模版緩衝器中的不可見的形狀（你可能想要一個屏幕空間四）
6. 啓用1,2,3
7. 更改模板操作（只繪製模板緩衝區爲1例如）
8. 提請組
9. 取決於當你這樣做時，你可以在此更改模板運
10. ，然後繪製場景的其餘部分，其中緩衝區爲0（從外5中的形狀）

Three.js沒有模板抽象，除非它們最近已經實現。這意味着沒有「魔法」屬性transparent管理一堆webgl狀態，你必須自己實際管理它。這意味着您必須手動獲取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。