Wiew端口为threejs中的网格组

Question

在三个js中为网格组创建视口的最佳方法/实践是什么？
在我的情况下，我有THREE.Group个THREE.Mesh个实例。我的目标是为该组创建视口，其中网格将可见。
我看到的一个解决方案是使用局部剪切平面。 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没有模板抽象，除非它们最近已经实施。这意味着没有＆＃34;魔法＆＃34;说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。