Three.js Cookbook

Adding depth to a mesh with a normal map

With a bump map, we showed in the Add depth to a mesh with a bump map recipe, how to add depth and detail to a mesh using a specific texture. In this recipe, we provide another way to add even more depth and details without increasing the vertex count of the geometry. To do this, we will use a normal map. A normal map describes the normal vector for each pixel, which should be used to calculate how light affects the material used in the geometry.

Getting ready

To use normal maps, we first need to get a color map and a normal map. For this recipe, we've used two screenshots. The first is the color map:

The next ...