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

【问题标题】：Three JS: Weird rendering issues in close planes三个 JS：近距离平面中的奇怪渲染问题
【发布时间】：2020-09-03 10:10:11
【问题描述】：

我正在使用 Three.js 来渲染一些带有纹理的平面，一个或另一个的顶部。飞机之间的距离是 10 个单位（我不确定这些到底是什么）。

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

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

当平面放置在常规距离 10 处时，我可以看到呈现出奇怪的条纹，如图所示：

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

谢谢

【问题讨论】：

这称为 Z 冲突或 Z 战斗。 en.wikipedia.org/wiki/Z-fighting解决问题的方法有很多，。使用哪个取决于您的要求。您没有提供足够的信息来提供建议。第一步尝试更改深度函数developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/…SO 中也有 100 多个关于该主题的帖子，
这不是一个 WebGL 问题，而是一个 three.js 问题。任何与 webgl 相关的问题都没有回答如何在 three.js 中做到这一点。
谢谢。我会试试的！ @gman as three.js 基于 WebGL，这与摆弄这个库的低级核心高度相关。
你错过了我的意思。 WebGL 答案将参考 WebGL 解决方案。这与在他们询问 OpenGL 问题时告诉某人阅读 DirectX 答案没有什么不同。 Three.js 是自己的 API，有自己的解决方案。它有时使用 WebGL 无关紧要。
嗯，也许它不准确。我只是想解决这个问题，并且引用一些框外的东西对我来说真的很好。

【解决方案1】：

您可以做一些事情。

使透视相机的近距和远距设置尽可能地贴合您的内容。

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

.... new THREE.PerspectiveCamera(fieldOfView, aspect, 0.5 /* near /, 3.5 / far */

如果这些数字相差几个数量级，你就会遇到这个问题
使用对数深度缓冲区

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

设置材质的多边形偏移

你想在应该在后面的网格的材质上设置这个

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

【讨论】：