Chapitre 5 – Utiliser des textures avec Three.js – Les Bases

Dans le monde de la 3D, une texture représente généralement une image appliquée sur la surface d’un objet 3D.

Ces images sont, pour la plupart, créées avec des outils externes (GIMP, Photoshop …) , puis, chargées dans notre scène grâce à la librairie Three.js.

Pour appliquer une texture sur un objet 3D, nous utiliserons les classes de la famille des Material. Ainsi, je vous conseille de lire le chapitre traitant de ce sujet, si ce n’est pas déjà fait :

Chapitre 4 – Les principaux types de Material Three.js

TextureLoader et la propriété map

La classe TextureLoader est utilisée pour charger une image externe dans notre code. Dans ce premier exemple, chargeons une image avec la méthode load de TextureLoader et appliquons la texture sur la surface d’un objet 3D :

const loader = new THREE.TextureLoader();

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

Après avoir chargé notre image, nous utilisons la propriété map du Material pour lui appliquer la texture.

Puis, nous utilisons le Material pour créer un objet 3D Mesh :

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

Et voila, nous avons utilisé une texture avec succès !

Charger une texture dans une variable intermédiaire

Il est également possible de charger une texture dans une variable :

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

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

Ainsi, il est possible d’utiliser plusieurs fois une texture déjà chargée. Ce cas d’utilisation permet d’éviter de charger plusieurs fois la même texture, et ainsi accélérer l’initialisation de notre application 3D.

// ---------------- 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
});

Si nous utilisons cette technique, il est nécessaire de vérifier que la texture est bien chargée avant de l’utiliser. Pour cela, nous pouvons créer nos propres vérifications en JavaScript de base ( if( texture ) { ... } ), utiliser le callback de load, ou utiliser la classe LoadingManager de Three.js.

La fonction callback de load

La méthode load de TextureLoader met à notre disposition une fonction callback exécutée lorsque la texture est chargée.

// ---------------- 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 );
});

La classe LoadingManager

Utiliser la fonction callback de load est très utile au cas par cas. Cependant, dans le cas ou nous devions gérer un grand nombre de textures, Three.js met à notre disposition la classe LoadingManager.

Cette classe est utilisée pour surveiller le chargement de plusieurs textures, et exécuter une fonction callback lorsque le chargement de l’ensemble des éléments à surveiller est terminé.

// ---------------- 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

L’utilisation de textures avec Three.js est un très vaste sujet ! Dans ce chapitre, nous avons pu découvrir les bases de leur utilisation, et faire un premier pas dans ce large thème.

N’hésitez pas à télécharger le guide complet de Three.js University pour progresser encore plus vite !

Il vous reste encore beaucoup de choses à apprendre concernant les textures (règles de répétition, options de filtrage, Mips …), mais vous pouvez devenir un expert des textures Three.js grâce au chapitre 5 du guide téléchargeable !

Vous pouvez télécharger le guide complet ici :

---

Dans le prochain chapitre, nous découvrirons la classe Sprite !

Chapitre 6 – Sprites et Particules Three.js