guardabrazo - 7 months ago 84

Javascript Question

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

`geometry.computeFaceNormals()`

The problem comes when I animate the geometry. In the animation loop I call again

`geometry.computeFaceNormals()`

Here is a fiddle with the example:

Answer

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