在THREE.js中以不同的三角形方向平滑着色

Question

在带有包含三角形网格的Geometry对象的THREE.js场景中，我想实现平滑的phong着色。这似乎需要确保以正确的方向添加三角形。

Here's a Code Pen showing the issue.同一表面被渲染两次，左侧具有变化的三角形方向，而右侧具有一致的三角形方向：

在我的真实代码中，由于我是如何生成三角形几何的，因此很难知道正确的方向。如何获得独立于三角形方向的平滑阴影？

我只是使用一种简单的丁字裤材料：

let material = new THREE.MeshPhongMaterial({
  color: new THREE.Color('#FFAA44'),
  side: THREE.DoubleSide,
  flatShading: false
});

Answer 1

您遇到了顶点缠绕顺序问题。

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();