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 ...

Get Learn Three.js - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.