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

Question

我正在学习三个人，我遇到了一个z战斗问题。

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

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

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

我问这个问题，因为我正在网上渲染BIM（建筑信息模型，.ifc格式）。 而且模特本身有很多面孔，它们彼此如此紧密。它会导致如此多的z-fighting问题，你可以看到：

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

Answer 1

你的PerspectiveCamera的zNear和zFar设置为什么？尝试更小的范围。就像你现在有0.1,100000使用1,1000或者其他东西一样。看到这个答案

https://stackoverflow.com/a/21106656/128511

或consider using a different type of depth buffer

Answer 2

Three.js提供了如下通用解决方案： var renderer = new THREE.WebGLRenderer（{logarithmicDepthBuffer：true}）; 该演示也在此处提供： https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html 它改变了深度缓冲区的精度，通常可以解决远距离的z冲突问题。

Answer 3

至少对于屏幕快照上的飞机，您可以解决该问题而无需切换到logarithmicDepthBuffer。尝试将平面上的depthWrite设置为false。有时，您还必须覆盖renderOrder进行网格划分。

  

.depthWrite 渲染此材质是否对深度缓冲区有任何影响。默认为true。   绘制2D叠加层时，禁用深度写入功能是很有用的，这样可以在不创建z-index工件的情况下将多个内容叠加在一起。

     

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