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:

Getting ready

The next ...

Get Three.js Cookbook 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.