Application de textures sur les matériaux

Qu'est-ce qu'une texture ?

En 3D, une texture est le plus souvent une simple image 2D que l'on "enveloppe" autour d'un objet 3D pour lui donner une apparence de surface détaillée. C'est ce qui permet de simuler des matériaux comme la brique, le métal, le tissu ou la roche sans avoir à modéliser chaque petit détail.

Pour que la carte graphique sache comment appliquer l'image sur la géométrie, chaque sommet (vertex) du modèle 3D possède, en plus de ses coordonnées 3D (x, y, z), des coordonnées 2D spéciales appelées coordonnées UV. Ces coordonnées indiquent quel point de l'image 2D correspond à ce sommet.

Pour une introduction plus détaillée, je vous suggère de lire la première partie du document suivant.

Charger et Appliquer une Texture avec Three.js

Le processus pour appliquer une texture se déroule en deux étapes principales :

1. Charger l'image en mémoire à l'aide de la classe THREE.TextureLoader.
2. Appliquer la texture chargée à la propriété map d'un matériau.

La vidéo suivante, tirée d'un tutoriel par Grafikart.fr, montre ce processus de manière très concrète.

Synthétisons le code que vous venez de voir :

1. Créer un TextureLoader : C'est l'objet qui va s'occuper du chargement de notre image. On n'en a besoin que d'un seul pour toute l'application.

   const textureLoader = new THREE.TextureLoader();
   

2. Charger la texture : On utilise la méthode .load() du loader, en lui passant en argument le chemin vers notre fichier image. Cette méthode retourne immédiatement un objet Texture. Le chargement de l'image se fait en arrière-plan.

   const maTexture = textureLoader.load('/chemin/vers/mon_image.jpg');
   

3. Appliquer au matériau : On assigne simplement l'objet Texture à la propriété map de notre matériau. Il est important de noter qu'on ne doit généralement pas utiliser color et map en même temps. La map remplace la couleur de base.

   const monMateriau = new THREE.MeshStandardMaterial({
       map: maTexture
   });
   

Le document textuel que vous avez consulté précédemment propose également un exemple de code complet et quelques remarques importantes.

Atelier : Texturons notre scène

Il est temps de mettre cela en pratique. Nous allons reprendre une scène simple (par exemple, celle avec le TorusKnot et l'éclairage à trois points) et remplacer sa couleur par une texture.

Vous pouvez utiliser n'importe quelle image, mais pour un bon résultat, cherchez sur internet une "seamless texture" (texture raccordable) d'un matériau qui vous plaît (bois, métal, roche...). Par exemple, cette texture de métal.

Voici les étapes :

1. Placez l'image que vous avez choisie dans le dossier public de votre projet Vite. Par exemple : public/textures/metal.jpg.

2. Dans votre fichier main.js, juste avant de créer vos matériaux, instanciez le TextureLoader.

   const textureLoader = new THREE.TextureLoader();
   

3. Chargez votre texture. Le chemin doit être relatif au dossier public, donc il commence par /.

   const metalTexture = textureLoader.load('/textures/metal.jpg');
   

4. Modifiez le matériau de votre TorusKnot (ou de l'objet de votre choix). Supprimez la propriété color et ajoutez la propriété map.

   // Avant
   // const material = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.5, metalness: 0.7 });
   
   // Après
   const material = new THREE.MeshStandardMaterial({
       map: metalTexture,
       roughness: 0.5,
       metalness: 0.7
   });
   

5. Lancez votre application. Votre objet devrait maintenant être recouvert de la texture que vous avez choisie, tout en réagissant correctement à la lumière que vous aviez mise en place !

Un aperçu du futur : les textures avec React Three Fiber

Comme votre objectif est de travailler avec React Three Fiber (R3F), il est intéressant de voir comment ce que vous venez d'apprendre s'y traduit. La logique reste la même, mais la syntaxe devient déclarative, ce qui est souvent plus simple.

L'exemple de code ci-dessous montre comment créer une Terre en rotation avec R3F. Regardez attentivement les lignes concernant la texture.

Comme vous pouvez le voir, les connaissances que vous acquérez en Three.js "pur" sont directement transposables à R3F.

Conclusion

Félicitations ! Vous savez maintenant comment donner vie à vos objets en leur appliquant des textures. C'est une compétence fondamentale qui change radicalement la qualité visuelle de vos créations.

Points clés à retenir :

• Une texture est une image 2D appliquée à un objet 3D via des coordonnées UV.
• On utilise THREE.TextureLoader pour charger les images de manière asynchrone.
• La texture chargée est assignée à la propriété map du matériau pour définir sa couleur de base.
• Pour des performances optimales, il est préférable d'utiliser des images dont les dimensions sont des puissances de 2 (ex: 1024x1024).

Aperçu de la prochaine leçon :
La map de couleur est la texture la plus basique. Pour atteindre un réalisme encore plus poussé, les moteurs de rendu modernes utilisent plusieurs autres types de textures qui simulent des propriétés de surface complexes. Dans la prochaine leçon, nous explorerons les textures PBR essentielles : la normalMap (pour simuler du relief), la roughnessMap (pour contrôler la rugosité) et l' aoMap (pour les ombres de contact).