在一个包含三角形网格的几何对象的 THREE.js 场景中，我想实现平滑的 phong 着色。这似乎需要确保以正确的方向添加三角形。
Here's a Code Pen showing the issue. 同一个表面被渲染两次，左边是不同的三角形方向，右边是一致的三角形方向：
在我的真实代码中，由于我生成三角形几何的方式，很难知道正确的方向应该是什么。如何实现独立于三角形方向的平滑着色？
我只是使用一个简单的 phong 材料：
let material = new THREE.MeshPhongMaterial({
color: new THREE.Color('#FFAA44'),
side: THREE.DoubleSide,
flatShading: false
});
【问题讨论】：
标签： three.js
您遇到了顶点缠绕顺序的问题。
Counter-clockwise:
1
/ \
2———3
Clockwise:
1
/ \
3———2
当您使用逆时针缠绕顺序时，geometry.computeVertexNormals() 使所有法线指向三角形所面对的方向，我们称之为“向前”。但是，当您使用顺时针缠绕顺序时，它会使法线指向相反的方向远离，因此它们指向“向后”。
您使用的 phong 材质依靠这些法线为您提供平滑的阴影。当您在前向法线和后向法线之间切换时，平滑阴影的可能性就消失了，您会得到您在示例中看到的方格外观。实际上，按照惯例，所有网格都让所有三角形都遵循统一的缠绕顺序。您可以通过查看顶点位置来解决您的独特问题，如果发现它们以顺时针方式缠绕，则交换两个：
由于您使用类似于平面网格的东西，您可以使用简单的 if 语句。根据我上面的图表，你可以这样做：
if (v2.x > v3.x) {
// Clockwise winding order! Must flip verts 2 & 3
}
根据您构建它们的方式，您要比较的顶点可能会有所不同，但是一旦所有三角形都统一了，您就可以调用computeVertexNormals();
【讨论】：