Chapter 5 – Using Three.js textures – The Basics

In the world of 3D, a texture generally represents an image applied on the surface of a 3D object.

These images are, for the most part, created with external tools (GIMP, Photoshop …), then, loaded in our scene thanks to the Three.js library.

To apply a texture on a 3D object, we will use the classes of the

Material family. So, I advise you to read the chapter dealing with this subject, if it is not already done :

Chapter 4 – The main types of Three.js Materials

TextureLoader and the map property

The

TextureLoader class is used to load an external image in our code. In this first example, let’s load an image with the load method of TextureLoader and apply the texture on the surface of a 3D object :

const loader = new THREE.TextureLoader();

const material = new THREE.MeshLambertMaterial({
  map: loader.load('cube_texture.jpg')
});

After loading our image, we use the

map property of our Material to apply the texture to it.
Then we use the Material to create a 3D Mesh object :

// ---------------- 3D CUBE ----------------
            
const geometry = new THREE.BoxGeometry( 150, 150, 150 );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );

And voila, we used a texture successfully !

Load a texture into an intermediate variable

It is also possible to load a texture in a variable :

// ---------------- TEXTURE ----------------

const loader = new THREE.TextureLoader();
var texture = loader.load('cube_texture.png')

This use case allows to avoid loading the same texture several times, and thus to accelerate the initialization of our 3D application.

// ---------------- TEXTURE ----------------

const loader = new THREE.TextureLoader();
var texture = loader.load('cube_texture.png')

[...]

const material = new THREE.MeshLambertMaterial({
    map: texture
});

const material_2 = new THREE.MeshLambertMaterial({
    map: texture
});

If we use this technique, it is necessary to check that the texture is loaded before using it.
For this, we can create our own checks in basic JavaScript (

if( texture ) { …} ), use the load callback, or use the LoadingManager class of Three.js.

The callback function of load

The

load method of TextureLoader provides us with a callback function executed when the texture is loaded.

// ---------------- TEXTURE ----------------

const loader = new THREE.TextureLoader();
loader.load('cube_texture.png', (texture) => {

    // ---------------- callback ----------------

    const material = new THREE.MeshLambertMaterial(
    {
      map: texture,
    });

    // ---------------- 3D CUBE ----------------

    const geometry = new THREE.BoxGeometry( 2, 2, 2 );
    cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
});

The LoadingManager class

Using the callback function of

load is very useful on a case by case basis. However, in the case where we need to manage a large number of textures, Three.js provides us with the LoadingManager class.

This class is used to monitor the loading of several textures, and execute a callback function when the loading of all the elements to monitor is completed.

// ---------------- TEXTURE ----------------

const loadMngr = new THREE.LoadingManager();

const loader = new THREE.TextureLoader(loadMngr);

texture = loader.load('cube_texture.png');
texture2 = loader.load('cube_texture2.png');
texture3 = loader.load('cube_texture3.png');
texture4 = loader.load('cube_texture4.png');

loadMngr.onLoad = () => {

    // ---------------- Loading Callback ----------------

    const material = new THREE.MeshLambertMaterial(
    {
      map: texture,
    });

    // ---------------- 3D CUBE ----------------

    const geometry = new THREE.BoxGeometry( 2, 2, 2 );
    cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
};

Conclusion

Using textures with Three.js is a very broad topic ! In this chapter, we were able to discover the basics of their use, and make a first step in this wide subject.

Feel free to download the complete Three.js University guide to progress even faster !

You still have a lot to learn about textures (repetition rules, filtering options, Mips …), but you can become a Three.js texture expert thanks to chapter 5 of the downloadable guide !

You can download the complete guide here :

---

In the next chapter, we will discover the

Sprite class!

Chapter 6 – Sprites and Particles in Three.JS