Using textures in materials

There are different ways that textures can be 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 will 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:

var textureLoader = new THREE.TextureLoader();
textureLoader.load("'../../assets/textures/general/metal-rust.jpg")

In this code sample, we use an instance of the THREE.TextureLoader function to load an image file from a specific location. Using this loader, you can use PNG, GIF, or JPEG images as input for a texture (further on in this chapter...