Three.js - 获得低多边形外观 [英] Three.js - Getting the low poly look

问题描述

我正在尝试以low poly风格生成一些地形，作为参考，这种风格:

我的意思是每个三角形都是一个阴影.

当我尝试这样的操作时，阴影非常平滑.这是一个只有几个三角形的例子:

_{(来源:
(来源:willdonohoe.com)}

查看 Three 文档，材料类上的 shading 属性听起来可以解决问题，但 THREE.FlatShading 和 THREE.NoShading 似乎没有任何效果.

是否需要使用特殊技术来创建这种效果?任何你能指点我的方向将不胜感激.

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

非常感谢，

会

解决方案

此答案已过时.更新:

material.shading = THREE.FlatShading 现在是 material.flatShading = true.

您修改了 PlaneGeometry 的顶点位置.

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

geometry.computeFlatVertexNormals();

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

three.js r.87

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:

_{(source: willdonohoe.com)}

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

_{(source: willdonohoe.com)}

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.

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

Many thanks,

Will

解决方案

EDIT: This answer was outdated. Updating:

material.shading = THREE.FlatShading is now material.flatShading = true.

You modified the vertex positions of your PlaneGeometry.

To generate flat shading with MeshLambertMaterial, you must update your normals by calling

geometry.computeFlatVertexNormals();

For other materials, simply setting material.flatShading = true is sufficient to get the flat look.

three.js r.87

这篇关于Three.js - 获得低多边形外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！