如何使用 Three.js 解决 z-fighting

Question

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

有两种平面物体，一种是蓝色的，一种是粉红色的。我使用流动代码设置位置：

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

有没有解决大场景中所有z-fighting问题的three.js中的解决方案？

我问这个问题是因为我正在网上渲染一个 BIM（建筑信息模型，它是 .ifc 格式）。模型本身有很多彼此如此接近的面孔。正如你所看到的，它会导致如此多的 z-fighting 问题：

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

Answer 1

Three.js 给出了这样的通用解决方案： var renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true }); 这里也提供了演示： https: //thirdjs.org/examples/webgl_camera_logarithmicdepthbuffer.html 它改变了深度缓冲区的精度，这通常可以解决远距离的z-fighting问题。

Answer 2

至少对于屏幕截图上的飞机，您可以解决该问题，而无需切换到logarithmicDepthBuffer. 尝试将材质上的深度写入false设置为平面。有时您还必须覆盖网格体的renderOrder。

有一个例子

.depthWrite渲染此材质是否对深度缓冲区有任何影响。默认为 true。绘制 2D 叠加时，禁用深度写入可能很有用，以便将多个内容分层在一起而不创建 z 索引伪影。

.renderOrder尽管不透明和透明对象保持独立排序，但该值允许覆盖场景图对象的默认渲染顺序。当为 Group 的实例设置此属性时，所有后代对象将被排序并一起渲染。排序是从最低渲染顺序到最高渲染顺序。默认值为 0。

Answer 3

您的 PerspectiveCamera 的 zNear 和 zFar 设置为多少。尝试较小的范围。就像如果你当前有 0.1、100000 使用 1、1000 或其他。看这个答案

/sf/answers/1477465951/

或者考虑使用不同类型的深度缓冲区