guardabrazo guardabrazo - 1 year ago 102
Javascript Question

Calculating light for custom geometry in Three.js

I've created a custom geometry and I've used

to get the lighting right. So far so good.

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

Here is a fiddle with the example:

Answer Source

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