CODEWITHSUNDEEP
javascriptthree.js
guardabrazo
guardabrazo

Reputation: 1229

Calculating light for custom geometry in Three.js

I've created a custom geometry and I've used geometry.computeFaceNormals() to get the lighting right. So far so good.

The problem comes when I animate the geometry. In the animation loop I call again geometry.computeFaceNormals() but the faces' lighting doesn't change.

Here is a fiddle with the example:

Upvotes: 1

Views: 173

Answers (1)

WestLangley
WestLangley

Reputation: 104793

You are updating the vertices of your geometry, so typically, your normals must also be updated for the shading to be correct.

However, since you want flat shading, there is another solution.

MeshPhongMaterial generates flat shading using the OES_standard_derivatives extension. This means that geometry normals do not have to be specified or updated when vertices change.

All you have to do is use the following pattern, and flat shading will "just work" -- provided the extension is supported.

var material = new THREE.MeshPhongMaterial( {
    color: 0xFFFFFF,
    shading: THREE.FlatShading
} );

three.js r.80

Upvotes: 1

Related Questions