Three.js - 获取低多边形的外观多边形、外观、Three、js

2023-09-08 00:59:37 作者:澄澈的眼.

我想产生一些地势低多边形样式,仅供参考,这种风格:

I'm trying to generate some terrain in the low poly style, for reference, this kind of style:

我的意思,这是每一个三角形是一个影。

What I mean by this is each triangle is one shade.

当我尝试这样的事情,底纹十分流畅。下面是只有几个三角形的例子:

When I attempt something like this, the shading is very smooth. Here's an example with only a few triangles:

我也尝试添加阴影,但是这并没有产生预期的效果无论是。这里有一个拍摄更多的三角形添加了阴影:

I also tried adding shadows, but this didn't create the desired effect either. Here's a shot with more triangles with added shadows:

综观三个文件,对材料类的遮光性听起来就像是会做的伎俩,但THREE.FlatShading和THREE.NoShading似乎并没有产生任何影响。

Looking through the Three documentation, the shading property on the materials class sounds like it would do the trick, but THREE.FlatShading and THREE.NoShading doesn't seem to have any effect.

有一种特殊的技术,我需要使用产生这种效果?你可以点我的方式在任何方向将是非常美联社preciated。

Is there a special technique that I need to use create this effect? Any direction you can point my way would be much appreciated.

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

You can find my first demo here

非常感谢,

威尔

推荐答案

您修改了 PlaneGeometry 的顶点位置。因此,你必须更新你的法线。

You modified the vertex positions of your PlaneGeometry. Consequently, you must update your normals.

由于您使用的 THREE.FlatShading ,你只需要更新你的面法线。

Since you are using THREE.FlatShading, you only need to update your face normals.

geometry.computeFaceNormals();

如果你使用 THREE.SmoothShading ,你就必须更新你的顶点法线了。

If you were using THREE.SmoothShading, you would have to update your vertex normals, too.

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

three.js r.68

three.js r.68