Javascript 三个JS：近平面中的奇怪渲染问题

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

所有平面均为MeshBasicMaterial，具有以下配置：

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

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

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

---

谢谢

您可以做几件事

尽可能使透视相机的近距离和远距离设置与内容紧密配合

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

。。。。新的三视角相机（视野，纵横比，0.5/*近/远，3.5/远）*/

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

使用对数深度缓冲区

请参见此示例：

设置材质的多边形偏移

您希望将其设置在应该位于后面的网格的材质上

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

---

你可以做几件事

尽可能使透视相机的近距离和远距离设置与内容紧密配合

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

…新的3.透视照相机（视野，纵横比，0.5/*近/远，3.5/远*/

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

使用对数深度缓冲区

请参见此示例：

设置材质的多边形偏移

您希望将其设置在应该位于后面的网格的材质上

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

---

这被称为Z冲突或Z格斗。有很多方法可以解决这个问题。使用哪种方法取决于您的需求。您没有提供足够的信息提供建议。第一步尝试更改深度函数这里也有100篇关于这个主题的帖子，所以，这不是一个WebGL问题，而是一个3.js问题。如何在中做到这一点任何与webgl相关的问题都无法回答three.js。谢谢。我会试试看！@gman因为three.js是基于webgl的，这与摆弄这个库的底层核心非常相关。你没有领会我的意思。webgl的答案将引用webgl解决方案。这和告诉别人在询问Ope时阅读DirectX答案没有什么区别吗nGL问题。Three.js是它自己的API，有自己的解决方案。它有时使用WebGL是无关紧要的。好吧，也许它不准确。我只是想解决这个问题，引用一些开箱即用的东西对我来说真的很好。这被称为Z冲突或Z战斗。有很多方法可以解决这个问题。使用哪种方法取决于你的要求。你没有提供足够的信息来提供建议。第一步，尝试更改深度函数。这里也有100篇关于这个主题的帖子，所以，这不是一个WebGL问题，而是一个three.js问题。如何在three.js中做到这一点，没有任何与WebGL相关的问题回答。谢谢。我会尝试的！@gman as three.js是基于WebGL的，这与该库的底层核心非常相关。你没有领会我的意思。WebGL答案将引用WebGL解决方案。这与当别人问OpenGL问题时告诉他们阅读DirectX答案没有什么不同。Three.js是它自己的API，有自己的解决方案。它有时使用的是无关的WebGL。也许它不准确。我只是想解决这个问题，引用一些开箱即用的东西对我来说真的很好。