Chapter 10. Loading and Working with Textures

In Chapter 4, Working with Three.js Materials, we introduced you to the various materials that are available in Three.js. In that chapter, however, we didn't talk about applying textures to meshes. In this chapter, we'll look at that subject. More specifically, in this chapter, we'll discuss the following topics:

• Loading textures in Three.js and applying them to a mesh

• Using bump and normal maps to apply depth and detail to a mesh

• Creating fake shadows using a light map

• Adding detailed reflection to a material using an environment map

• Using a specular map to set the shininess of specific parts of a mesh

• Fine-tuning and customizing the UV mapping of a mesh

• Using the HTML5 canvas and video element as input for a texture

Let's start with the most basic example, where we show you how to load and apply a texture.

Using textures in materials

There are different ways textures are used in Three.js. You can use them to define the colors of the mesh, but you can also use them to define shininess, bumps, and reflections. The first example we look at, though, is the most basic approach, where we use a texture to define the colors of the individual pixels of a mesh.

Loading a texture and applying it to a mesh

The most basic usage of a texture is when it's set as a map on a material. When you use this material to create a mesh, the mesh will be colored based on the supplied texture.

Loading a texture and using it on a mesh can be done in the following manner:

function createMesh(geom, imageFile) {
  var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile)

  var mat = new THREE.MeshPhongMaterial();
  mat.map = texture;

  var mesh = new THREE.Mesh(geom, mat);
  return mesh;
}

In this code sample, we use the THREE.ImageUtils.loadTexture function to load an image file from a specific...

Advanced usage of textures

In the previous section, we saw some basic texture usages. Three.js also provides options for more advanced texture usage. In this section, we'll look at a couple of options that Three.js provides.

Custom UV mapping

We'll start off with a deeper look at UV mappings. We explained earlier that with UV mapping, you can specify what part of a texture is shown on a specific face. When you create a geometry in Three.js, these mappings will also be automatically created based on the type of geometry you created. In most cases, you don't really need to change this default UV mapping. A good way to understand how UV mapping works is to look at an example from Blender, which is shown in the following screenshot:

In this example, you see two windows. The window on the left-hand side contains a cube geometry. The window on the right-hand side is the UV mapping, where we've loaded an example texture to show how the mapping is. In this example, we've selected a single face for...

Summary

And so we end this chapter on textures. As you've seen, there are lots of different kinds of textures available in Three.js, each with their different uses. You can use any image in the PNG, JPG, GIF, TGA, DDS, or PVR format as a texture. Loading these images is done asynchronously, so remember to either use a rendering loop or add a callback when you load the texture. With textures, you can create great-looking objects from low-poly models and even add fake detailed depth using bump maps and normal maps. With Three.js, it is also easy to create dynamic textures using either the HTML5 canvas element or the video element. Just define a texture with these elements as the input and set the needsUpdate property to true whenever you want the texture to be updated.

With this chapter out of the way, we've pretty much covered all the important concepts of Three.js. We haven't, however, looked at an interesting feature Three.js offers—postprocessing. With postprocessing, you can add effects...