Materials and Textures - Three.js - page 163

cubeBumpMaterial);
scene.add(bumpCube);
With these three simple steps, you've created a cube that uses a bump map for ad-
ded depth.
How it works...
The values of each pixel in the bump map determine the height associated with that
part of the texture. When rendering the scene, Three.js uses this information to de-
termine how light affects the final color of the pixel it is rendering. The result is that
without defining a very detailed model, we can add the illusion of extra depth. If you
want to know more details about how bump mapping works, look at this site for a
very detailed explanation: http://www.tweak3d.net/articles/bumpmapping/ .
There's more…
In this recipe, we showed you the default way to define a bump map. There is,
however, one additional property that you can use to tune bump mapping. The ma-
terial we used in this recipe, cubeBumpMaterial , also has a bumpScale property.
With this property, you can set the amount by which the bump map affects the depth.
If this value is very small, you'll see some added depth, and if this value is higher,
you'll see a more pronounced depth effect. You can set this property in the example
for this cookbook ( 04.01-add-depth-to-mesh-with-bump-map.html ).
See also
• There is an additional way to add detail and depth to your meshes. In the Add
depth to a mesh with a normal map recipe, we show how to add depth and
detail with a normal map instead of a bump map. In the Creating geometries
from height maps recipe, of Chapter 2 , Geometries and Meshes , we showed
you a different way to use bump maps by creating THREE.Geometry from
it.