Three.js 解决深度冲突（Z-Fighting）

Three.js 解决深度冲突（Z-Fighting）

在Three.js中，深度冲突（Z-Fighting）是一个常见的问题，当场景中的两个模型在同一个像素生成的渲染结果对应到一个相同的深度值时，渲染器就不知道该使用哪个模型的渲染结果了，或者说，不知道哪个面在前，哪个面在后，于是便开始“胡作非为”，这次让这个面在前面，下次让那个面在前面，于是模型的重叠部位便不停的闪烁起来。

解决深度冲突的方法有以下几种：

对数深度缓冲区（logarithmicDepthBuffer）

在创建WebGLRenderer时设置logarithmicDepthBuffer: true。代码如下：

let renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });

设置渲染顺序（renderOrder）

给模型网格等加到场景的东西加上renderOrder。代码如下：

this.mesh.renderOrder = this.addOrder() || 0;
this.renderOrder = 100;
addOrder() {
  this.renderOrder += 10;
  return this.renderOrder;
}

设置多边形偏移（polygonOffsetFactor, polygonOffsetUnits）

在材质中设置polygonOffset、polygonOffsetFactor和polygonOffsetUnits。代码如下：

let material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  polygonOffset: true,
  polygonOffsetFactor: 1,
  polygonOffsetUnits: 1,
  depthTest: false
});

设置摄像机的合理near和far值

设置摄像机的near和far值，以减少深度冲突。代码如下：

let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);