CODEWITHSUNDEEP
javascripthtmlthree.js3d
WillDonohoe
WillDonohoe

Reputation: 718

Three.js - Getting the low poly look

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

Upvotes: 4

Views: 6455

Answers (1)

WestLangley
WestLangley

Reputation: 104823

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

Upvotes: 9

Related Questions