Three.js:闪烁的四边形(不在同一z平面上)

Question

我正在开发一个Three.js场景,渲染一些静态定位和纹理四边形,当我移动相机时,我的一些四边形闪烁.我在过去看到过这种情况,当时两个四边形存在于相同的x,y,z坐标上(我相信人们将其称为z-fighting).

我不确定在两个四边形根本不相交的情况下导致这种行为的原因是:

有谁知道可能导致此行为的原因,或者如何解决此问题？对于其他人可以就此问题提出的任何建议,我将不胜感激.

PS我的场景现在有大约2000行的JS,但如果真的有必要,我可以花上必要的时间来演示问题.

Answer 1

这很可能是渲染器的DepthBuffer精度问题.例如,如果PerspectiveCamera使用.near0.0001的.far平面和1000000 的平面初始化你,当物体彼此靠近而不触碰时,你可以进行z战斗.为了避免这种情况,您可以尝试更小的近远距离,这样您的深度精度就不会"扩散得太薄",例如0.1-100:

var camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );