前端 - 【three.js】如何解决整栋楼模型的闪烁？

Question

其实我也知道模型的闪烁就是【两个或者多个Mesh面重合，导致渲染的时候GPU分不清谁在前谁在后】，网上也是一大堆的方法，例如：

// WebGL渲染器设置const renderer = new THREE.WebGLRenderer({    // 设置对数深度缓冲区，优化深度冲突问题    logarithmicDepthBuffer: true});

或者是 两个mesh面的距离拉开

mesh1.position.z = 0;mesh2.position.z = 1;

甚至是设置相机的near和far。

第一种和第三种方法我都试过了，但是第二种无从下手。
因为我是渲染一整栋楼的模型，我如何知道是哪两个mesh面重合了，以及把它们一个个单拎出来设置position.z呢？
还是说让建模师在建模的时候就要刻意分离两个面的距离？

Answer 1

建模不能有重叠面，优化一下建模

const material = new THREE.MeshStandardMaterial({    color: 0xffffff,    polygonOffset: true,    polygonOffsetFactor: 1,  // 正值将面向前推    polygonOffsetUnits: 1});