三个JS:近距离平面中奇怪的渲染问题

Question

我正在使用Three.js渲染一些带有纹理的平面，一个或另一个的顶部。两个平面之间的距离是10个单位(我不确定它们到底是什么)。

所有的平面都是MeshBasicMaterial，配置如下：

let frontMaterial = new THREE.MeshBasicMaterial( {
    map: getFrontCover(),
    side: THREE.FrontSide
});

当平面以10的常规距离放置时，我可以看到渲染的奇怪条纹，如图所示：

​

​

假设距离是强制的，我如何解决这个问题？

谢谢

Answer 1

有几件事你可以做。

1. 使透视相机的近距离和远距离设置尽可能适合您的内容。

例如，假设相机距离书本2个单位，书本深度为1个单位。在这种情况下，将near和far设置为0.5和3.5可能会解决此问题。换句话说

……新的THREE.PerspectiveCamera(fieldOfView，aspect，0.5 /* near /，3.5 / far */

如果这些数字差了几个数量级，你会得到这个问题

1. 使用对数深度缓冲区

请参阅此示例：https://threejs.org/examples/?q=log#webgl_camera_logarithmicdepthbuffer

1. 设置材质的多边形偏移

您想要在应该位于后面的网格的材质上设置此参数

material.polygonOffset = true；material.polygonOffsetFactor = 1；material.polygonOffsetUnits = 1;