Three.js - 如何实现低多边形风格

Question

我正在尝试以低多边形风格生成一些地形，参考这种风格：

我所说的是每个三角形都是一种颜色。

当我尝试这样做时，阴影非常平滑。这里有一个只有几个三角形的例子：
_{(来源: willdonohoe.com)} 我还尝试添加阴影，但这也没有产生期望的效果。这是一个带有更多三角形和添加阴影的截图：
_{(来源: willdonohoe.com)} 查看Three文档，材料类上的阴影属性似乎可以解决问题，但THREE.FlatShading和THREE.NoShading似乎没有任何效果。

我需要使用特殊技术才能创建这种效果吗？您能指点一下方向吗？非常感谢。

您可以在这里找到我的第一个演示。

非常感谢，

威尔

- WillDonohoe

---

你的几何图形需要未混合的法向量。 - JAre

嗨@jAre，感谢回复。我该如何创建未混合的法向量？谷歌似乎没有提供太多关于未混合法线的信息。抱歉我的3D知识相对有限。我正在将这个项目作为学习活动。 - WillDonohoe

当法向量垂直于多边形且未平滑时，它就是简单的。http://en.wikipedia.org/wiki/Smoothing_group - JAre

为了获得所需的向量，您需要用面法线覆盖几何体的顶点法线。因此，您需要遍历所有几何体的面，并将面法线复制到每个顶点法线向量中。 - GuyGood

就是这样了！感谢您的回复。如果你们中的任何一个人把它写成答案，我会接受的。 - WillDonohoe

Answer 1

编辑：此答案已过时。更新：

material.shading = THREE.FlatShading 现在应该改为 material.flatShading = true。

您修改了PlaneGeometry的顶点位置。

要使用MeshLambertMaterial生成平面着色，您必须通过调用以下方法来更新法线：

geometry.computeFlatVertexNormals();

对于其他材质，只需设置material.flatShading = true即可获得平面外观。

three.js r.87

- WestLangley

---

但是，computeVertexNormals()不会插值法线向量，正如它的名称一样，您将获得平滑的着色，这不是问题所在。您回答的第二部分让我感到困惑。 - GuyGood

@GuyGood 我的回答的第一部分是问题的答案。我添加的回答的第二部分只是为了比较。 - WestLangley

谢谢大家的回复，很有道理，也非常有帮助。 - WillDonohoe

你能解释一下如何使用THREE.FlatShading吗？问题或答案中都没有解释。 - Luke

@Luke 更新了答案。不幸的是，由于所有材料在这方面的行为都不相同，所以这个问题有点复杂。 - WestLangley

我在r87中使用new THREE.MeshPhongMaterial({ blending: THREE.NoBlending, flatShading: true });使其正常工作。如果我切换到MeshLambertMaterial，三角形会再次变得模糊。 - Luke