Three.js 平铺地形法线

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

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

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

然后，我检查每个瓷砖，并尝试平均出每个角落的法线

问题是（我想）法线，但我真的不知道该怎么称呼这个问题。创建时，平面角上的每条法线都指向与面相同的方向。这使地形看起来像一个平面着色对象。为了防止出现这种情况，我想我需要做的也许是确保每个顶点法线（每个角点）的平均法线与其近邻法线相同。也就是说，每个瓷砖的每个角落都有与相邻平面的所有直接法线相同的法线

图A

在这里，我正在可视化网格上的4条法线中的每一条。您可以看到，每个角的法线都是相同的（在每个角的顶部）

图B

编辑 图C

编辑 图D

---

除非即使顶点都共享相同的法线，它仍然会出现块状关于应该发生什么，你基本上是对的。所获得的着色与连续法线不一致。如果给定位置的每个顶点面都具有相同的法线，则在第二幅图像中不应看到清晰的着色不连续。然而，这张照片看起来也不像简单的面部法线，至少在我看来不是这样

有几件事需要注意：

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

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

3） 您确信“法线平均”代码实际上使用了正确的法线进行平均吗？在这种情况下，明暗处理看起来不像是完全平坦的明暗处理图像，其中四边形中的每个顶点面法线都是相同的-如果是这种情况，则可以在每个四边形上获得一致的明暗处理，尽管四边形不会是连续的。这可能是因为您的原始顶点面法线实际上并没有与面法线对齐

---

4） 尝试关闭凹凸贴图以进行调试。根据着色器中凹凸的执行方式，可能会有不正确的双法线/双切线，而不是错误的顶点法线。

与其在每个顶点/角平均邻域法线，不如平均每个顶点的四条法线（每个顶点有4个平铺相交）

Hi Gaitat，你的意思是每个“角法线”都计算为其4个（自包含）相邻面法线，然后除以4？Hi Gaitat，我尝试过，但不幸的是，它仍然产生了相同的效果Hi theodox，谢谢你的帮助。1） 基本上，网格是使用THREE.PlaneGeomerty类创建的。据我所见，它使用了Face4、4个顶点和4个索引。操纵高度时，我首先将第0个顶点设置为高度（顶点[0]），其他每个顶点查看其相邻网格的第一个顶点以获得其位置。我不确定这是否被错误地使用。。。但是，当我把地形作为一个单一的平面对象，其顶点以同样的方式移动时，它似乎像预期的那样工作。2-3）是的，每个法线都被归一化了。如果我不使用平均算法，我得到了图C中所示的结果（上面编辑的问题）。应用我的算法后，您可以看到法线都在彼此的顶部，因此必须相同且正确。图D是面质心及其法线。4） 凹凸和镜面反射的旋转也不能解决问题。但是我有一个问题-脸部法线也必须平均吗？（因此不仅仅是顶点法线）如果网格是三角形网格，则首先设置所有顶点面法线以匹配其三角形的面法线，而不是对每一组重合法线求平均值并重新规格化。对于四边形来说，这有点难，因为非平面四边形没有你可以依赖的“法线”——如果它是蝴蝶结（两边有相反的坡度），它的阴影会很暗，我想这就是你看到的。如果网格仅在Z方向变形，则可以使用沿每条边线运行的样条线计算法线-这是常用的heightmap方法。或者，您可以将四元网格转换为三元网格。更仔细地查看调试图像，您可以看到图像C中的“弯曲面法线”。查看右上角。每个四边形的法线应按顺时针顺序为红色、绿色、黄色、蓝色，如果四边形是平面的，则它们应平行。顶部边缘的四边形，从右边开始的一个是这样的——但它下面的四边形不是这样的。其他3js文章中引用的本教程可能会帮助您了解它