三个js中网格组的查看端口

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 没有模板抽象，除非它们最近被实现。这意味着没有说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。