Learn Three.js - Third Edition

THREE.MeshNormalMaterial

The easiest way to understand how this material is rendered is by first looking at an example. Open up the 04-mesh-normal-material.html example from the chapter-04 folder. If you select the sphere as the mesh, you'll see something like this (if you set flatShading to true):

60 FPS (0-60)

As you can see, each face of the mesh is rendered in a slightly different color, and even though the sphere rotates, the colors stay pretty much at the same place. This happens because the color of each face is based on the normal pointing out from the face. This normal is the vector perpendicular to the face. The normal vector is ...