Graphics Reference
In-Depth Information
THREE.ImageUtils.loadTexture(
"../assets/textures/
chesterfield-normal.png");
The
map
properties contain the standard texture, and the
normalMap
prop-
erties contain the normal texture, which we showed you in the
Getting ready
section of this recipe.
3. All that is left to do now is to create a
THREE.Mesh
object and add it to the
scene like this:
var normalCube = new THREE.Mesh(
cubeGeometry,
cubeNormalMaterial);
scene.add(normalCube);
As you can see from these steps, using a normal map is very simple.
How it works...
In 3D modeling, a couple of mathematical concepts are important to understand.
One of these concepts is a
normal
vector. A normal is the vector that stands per-
pendicular to the surface of the face of a geometry. This is shown in the following
screenshot:
Each blue line represents the normal vector, which is the vector that is perpendicular
to the surface of that face. In a normal map, the direction of these vectors are shown
