three.js - 平铺地形法线

Question

我正在尝试在 ThreeJS 中创建地形解决方案，但在生成法线时遇到了一些麻烦。我通过使用 THREE.PlaneGeometry 类创建许多网格对象来解决这个问题。一旦创建了所有瓷砖，我将遍历每个瓷砖并设置 UV，以便每个瓷砖代表整体的一部分。我还生成了顶点 Y 位置的高度值以创建一些山丘。然后我调用几何函数

geometry.computeFaceNormals(); 
geometry.computeVertexNormals();

这只是为了让每个图块都有一些默认的面和顶点法线。

然后我遍历每个图块并尝试平均每个角上的法线。

问题是（我认为）法线，但我真的不知道该怎么称呼这个问题。创建时，平面角上的每个法线都指向与面相同的方向。这使得地形看起来像一个平坦的阴影对象。为了防止这种情况，我想也许我需要做的是确保每个顶点法线（每个角）具有与其直接邻居法线相同的平均法线。即每个图块的每个角与相邻平面的所有直接法线具有相同的法线。

图A

在这里，我正在可视化网格上的 4 个法线中的每一个。您可以看到在每个角落的法线是相同的（在彼此之上）

图B

编辑图 C

编辑图 D

除非所有顶点共享相同的法线，它仍然会出现所有块状 <:/

我不知道该怎么做...我认为我对需要做什么的理解不正确...？

任何帮助将不胜感激。

Answer 1

你对应该发生的事情基本上是正确的。您得到的阴影与连续法线不一致。如果给定位置的所有顶点面都具有相同的法线，则您不应在第二张图像中看到明显的阴影不连续性。然而，图像看起来也不像简单的面部法线，至少在我看来不是。

有几件事要看：

1）我注意到你的四边形本身不是平面的。您的算法是否有可能假设它们是？非平面四边形网格没有真正的“面法线”可用作基础。

2）在你平均之后，你的归一化归一化了吗？也就是说，它们的向量长度是否为 1？

3）您是否确信法线平均代码实际上是使用正确的法线进行平均？这里的阴影看起来不像完全平坦的阴影图像，其中四边形中的每个顶点面法线都是相同的 - 如果是这种情况，您将在每个四边形上获得一致的阴影，尽管四边形不会是连续的。这可能你原来的顶点面法线实际上没有与面法线对齐？

4）尝试关闭凹凸贴图进行调试。根据着色器中凹凸的完成方式，您可能有不正确的双法线/双切线，而不是坏的垂直法线。

Answer 2

而不是在每个顶点/角处平均邻域法线，您应该平均每个顶点具有的四个法线（每个顶点有 4 个图块）。