优化模型显示

Question

我有一组使用 SW Visualize 生成的模型 (fbx)。每个模型都包含大量网格，代表哪些零件（例如，铆钉、螺栓、垫圈）。 由于模型是使用 SW Visualize 上传的，因此它们非常详细，例如一个螺栓包含 5000 个三角形，一个铆钉包含 32000 个三角形。 一直显示它们是没有意义的。在大多数情况下，它们是不可见的，因为它们位于模型内部，或者被其他对象阻挡。

Three.js 中是否有一种机制可以在网格不可见时禁用网格的显示（它们位于渲染区域但与其他对象重叠）？

Answer 1

... Three.js 中有没有一种机制可以禁止显示 网格，如果它们不可见...

是的，

frustumCulled

，默认设置为

true

，这会导致对象不在相机视锥体中时不被渲染。

但是，如果我理解正确的话，这两个物体位于相机的视锥体中，但其中一个覆盖另一个。

...（它们位于渲染区域但与其他区域重叠 物体）...

所以两者都会被渲染。视锥体剔除有助于排除视锥体外部的对象，但它不能处理视锥体内的遮挡。

webGL2 中有一些关于遮挡的工作

https://github.com/mrdoob/ Three.js/pull/15450

但是我不知道这方面的工作进展到什么阶段，进展到什么程度了，也许作者（有时会来这里）会回答你。

此外，你可以考虑

LOD

（详细程度）...

const lod = new THREE.LOD();

//Create spheres with 3 levels of detail and create new LOD levels for them
for( let i = 0; i < 3; i++ ) {
    const geometry = new THREE.IcosahedronGeometry( 10, 3 - i )
    const mesh = new THREE.Mesh( geometry, material );
    lod.addLevel( mesh, i * 75 );
}
scene.add( lod );

https://thirdjs.org/examples/#webgl_lod

...或玩

renderOrder

您还应该看看这个高级示例：

为什么我的 Three.js 遮挡剔除失败？