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。