three.js - 如何使用 Three.js 解决深度冲突

Question

我正在学习 Three.js，但遇到了 z-fighting 问题。

有两个平面物体，一个是蓝色的，另一个是粉色的。我使用以下代码设置位置:

plane1.position.set(0,0,0.0001);
plane2.position.set(0,0,0);

在 Three.js 中是否有解决方案来解决大场景中的所有 z-fighting 问题？

我问这个问题是因为我正在网上渲染 BIM(建筑信息模型，即 .ifc 格式)。而且模型本身有很多面孔，彼此距离很近。正如您所看到的，它会导致如此多的深度冲突问题:

Three.js 是否提供了这种方法来解决这个问题，以便我只需使用几行代码就可以处理这个 z-fighting 问题？

Answer 1

Three.js 给出了这样的通用解决方案:var renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });此处还提供了演示: https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html它改变了深度缓冲的精度，一般可以解决远距离的深度冲突问题。