Appliquer des textures aux objets 3D dans Three.js

Bienvenue dans la quatrième semaine de notre série sur Three.js ! La semaine dernière, nous avons vu comment ajouter des lumières pour améliorer le réalisme de ta scène 3D. Cette semaine, nous allons explorer une autre technique clé pour rendre tes objets encore plus intéressants : l'ajout de textures.

Pourquoi utiliser des textures ?

Les textures permettent de rendre la surface de tes objets 3D plus réaliste. Par exemple, au lieu d'avoir un simple cube de couleur unie, tu peux appliquer une image qui ressemble à du bois, de la pierre, du métal, etc. Cela rend la scène plus immersive et attrayante visuellement.

Étape 1 : Préparer une texture

Pour cette démonstration, tu auras besoin d'une image que tu utiliseras comme texture. Choisis une image que tu aimes, par exemple une texture de bois ou de métal. Assure-toi qu'elle est au format .jpg ou .png.

Tu peux trouver des textures gratuites sur des sites comme textures.com ou cc0textures.com.

Étape 2 : Charger la texture dans Three.js

Three.js possède un gestionnaire de textures intégré, appelé TextureLoader, qui te permet de charger et d'appliquer une image à un objet.

Voici comment charger et appliquer une texture sur un cube dans app.js :

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/texture.jpg');

const material = new THREE.MeshStandardMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Dans ce code, remplace 'path/to/your/texture.jpg' par le chemin de ton image. Le matériau MeshStandardMaterial permet à la texture de réagir aux lumières que nous avons ajoutées la semaine dernière.

Attention, si vous avez suivi depuis la première semaine, il vous suffit simplement d'initialiser le TextureLoader ainsi que la texture, puis de modifier l'initialisation de votre cube en lui appliquant la texture au lieu d'une couleur.

Changer seulement cela dans ce cas :

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

Étape 3 : Ajuster la répétition et le wrapping de la texture

Parfois, la texture peut ne pas couvrir l'objet de la manière dont tu le souhaites. Tu peux ajuster la manière dont la texture se répète sur la surface de l'objet avec la propriété .wrapS et .wrapT de la texture.

Dans Three.js, les propriétés .wrapS et .wrapT sont utilisées pour définir comment une texture est appliquée sur un objet 3D lorsqu'elle ne couvre pas complètement la surface. Elles contrôlent la manière dont la texture se répète ou se prolonge au-delà de ses bords d'origine sur les axes S et T, qui correspondent respectivement aux axes horizontal (X) et vertical (Y) de la texture.

Détails :

• wrapS : Définit le comportement de la texture sur l'axe horizontal (S).
• wrapT : Définit le comportement de la texture sur l'axe vertical (T).

Il existe plusieurs valeurs que tu peux utiliser avec ces propriétés :

• THREE.RepeatWrapping : La texture se répète lorsque les coordonnées dépassent les limites [0, 1].
• THREE.ClampToEdgeWrapping : La texture est étirée jusqu'aux bords sans se répéter.
• THREE.MirroredRepeatWrapping : La texture se répète mais en miroir à chaque répétition.

Voici un exemple pour répéter la texture plusieurs fois sur le cube :

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2, 2); // Répète la texture 2 fois sur l'axe X et Y

Étape 4 : Résultat

Après avoir appliqué la texture et ajusté ses paramètres, ton cube devrait maintenant afficher l'image que tu as choisie sur ses faces. Grâce aux lumières de la semaine dernière, tu pourras observer comment la texture réagit en fonction de la lumière et des ombres, ce qui donne un effet encore plus réaliste à la scène.

Prochaines étapes

Les textures ajoutent une grande profondeur à tes objets 3D, mais tu peux aller encore plus loin ! La semaine prochaine, nous explorerons comment appliquer des textures avancées comme les cartes de bump ou de normal pour créer des détails encore plus fins sur les surfaces.

Ressources utiles

1. « TextureLoader », dans Ricardo Cabello, dir., three.js, 2025-02-20, https://threejs.org/docs/#api/en/loaders/TextureLoader
2. Lewy BLUE, « A Brief Introduction to Texture Mapping », dans Lewy BLUE, dir., discoverthreejs, 2025-02-20, https://discoverthreejs.com/book/first-steps/textures-intro/