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)}

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)}

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

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.)}

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.)}

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

• javascript
• html
• three.js
• 3d

• you need unblended normal vectors on your geometry. – JAre Commented Aug 21, 2014 at 14:27
• Hi @jAre, thanks for the reply. How do I go about creating unblended normal vectors? Google doesn't seem to tell me much about unblended normals. Sorry my 3D knowledge is fairly limited. I'm using this project as a learning activity. – WillDonohoe Commented Aug 21, 2014 at 15:00
• 1 It's simply when normal vectors are perpendicular to the polygon and not smoothed. en.wikipedia/wiki/Smoothing_group – JAre Commented Aug 21, 2014 at 16:04
• 1 To get the desired vectors, you need to overwrite the vertex normals of your geometry with the face normals. So what you need to do is iterate through all of your geometry's faces and copy over the face normal to every vertex normal vector. – GuyGood Commented Aug 21, 2014 at 16:19
• That was it! Thank you for your replies. If one of you write this as an answer, I'll accept. – WillDonohoe Commented Aug 21, 2014 at 18:57

1 Answer 1

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

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

three.js r.87