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

Posted 2023-03-23

【中文标题】三个js中网格组的查看端口

【英文标题】：Wiew port for group of mesh in threejs

【发布时间】：2018-02-07 01:47:42

【问题描述】：

在三个 js 中为网格组创建视口的最佳方法/实践是什么？ 就我而言，我有很多 THREE.Group 的 THREE.Mesh 实例。我的目标是为该组创建视口，其中网格将可见。 我看到的一种解决方案是使用本地剪切平面。 threejs example 但我担心我必须为每个THREE.Mesh 材料分配剪切平面，而不是为THREE.Group 设置一次。 当我移动或旋转THREE.Group时，我还需要重新计算剪切平面。

【问题讨论】：

不清楚您所说的“视口”是什么意思。

@2pha 我想要 html5 块溢出中的行为：隐藏但仅适用于 THREE.Group

你必须更清楚地解释你想要达到的目标。

【参考方案1】：

您可以查看模板缓冲区：

webgl.stencilFunc()

webgl.stencilOp()

有无threejs，原理都是一样的。

禁用深度写入 禁用深度测试 禁用彩色写入 启用模板操作（将值写入模板缓冲区） 绘制一个写入模板缓冲区的不可见形状（您可能需要一个屏幕空间四边形） 启用 1,2,3 更改模板操作（例如，仅在模板缓冲区为 1 的情况下绘制） 画你的小组 根据您执行此操作的时间，您可以在此处更改模板操作 然后绘制缓冲区为 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。