Learn Three.js - Third Edition

Adding subtle shadows with an ambient occlusion map

In the previous chapters, you learned how you can use shadows in Three.js. If you set the castShadow and receiveShadow properties of the correct meshes, add a couple of lights, and configure the shadow camera of the lights correctly, Three.js will render shadows. Rendering shadows, however, is a rather expensive operation that is repeated for each and every render loop. If you have lights or objects that are moving around, this is necessary; but often, some of the lights or models are fixed, so it would be great if we could calculate the shadows once, and then reuse them. To accomplish this, Three.js offers two different maps: the ambient occlusion map and a lightmap. In this section, we'll ...