Using a shadow map for fixed shadows

In Chapter 5, Lights and Custom Shaders we will show you a number of recipes that deal with lights and shadows. It is, however, also possible to fake shadows using a texture. This kind of texture is called a shadow map or a light map. In this recipe, we explain how you can use such a texture in Three.js.

Getting ready

For this recipe, we first need a shadow map. There are different ways to create shadow maps, but that is outside the scope of this recipe. If you're interested in creating your own shadow maps, you can follow this tutorial from the Blender site: http://wiki.blender.org/index.php/Doc:2.4/Tutorials/Game_Engine/YoFrankie/Baking_Shadow_Maps.

In the sources for this book, in the assets/textures folder, you can find a shadow-map.png file that we'll use in this recipe.

In the preceding figure, you can see what a shadow map looks like. As you can see, a shadow map contains the shadows of a scene prerendered in the target geometry, in this case, a plane...