Graphics Reference
In-Depth Information
In this example, you can see a standard rendered cube on the left-hand side and
one where a normal map is added to on the right-hand side. You can directly see
that the face of the right-hand side cube looks much more detailed than the face of
the left-hand side cube.
How to do it...
Adding a normal map is actually very easy:
1. First, create the geometry that we want to render:
var cubeGeometry = new
THREE.BoxGeometry(15, 15, 15);
For this recipe, we use a simple
THREE.BoxGeometry
object, but you can
use whichever geometry you want.
2. Now that we've got a geometry, we create the material and configure the
properties:
var cubeNormalMaterial = new
THREE.MeshPhongMaterial();
cubeNormalMaterial.map =
THREE.ImageUtils.loadTexture(
"../assets/textures/
chesterfield.png");
cubeNormalMaterial.normalMap =
