Three.js – Textures et Matériaux

Dans notre article précédent, nous avons construit une scène simple avec un cube, ajouté de la lumière et rendu l’interaction possible. Aujourd’hui, nous allons améliorer l’apparence de nos objets en appliquant des textures et des matériaux.

Introduction aux textures

Les textures permettent d’ajouter des détails visuels à nos objets en appliquant des images sur leurs surfaces. Three.js prend en charge plusieurs types de textures, comme les textures de couleur (diffuse), les maps de normal, ou encore les maps d’environnement.

Chargement d’une texture

Three.js offre un TextureLoader pour charger et appliquer des textures sur nos objets. Voici comment charger une image et l’appliquer à un cube :

// Chargement de la texture
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/brique.jpg');

// Création d’un matériau avec texture
const material = new THREE.MeshStandardMaterial({
    map: texture,
});

// Création du cube avec la texture
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Types de matériaux

Three.js propose plusieurs types de matériaux. Voici quelques-uns des plus courants :

• MeshBasicMaterial : Ne réagit pas à la lumière, idéal pour des objets toujours visibles.
• MeshStandardMaterial : Prend en compte l’éclairage, parfait pour des rendus réalistes.
• MeshPhongMaterial : Simule les reflets brillants et les ombres douces.
• MeshLambertMaterial : Offre un rendu diffus avec un bon compromis entre réalisme et performance.

Application d’un effet de relief (normal map)

Une normal map ajoute du relief à une surface en simulant des ombres et des reflets. Voici comment ajouter une normal map à notre cube :

const normalTexture = textureLoader.load('textures/normal.jpg');
const materialWithNormal = new THREE.MeshStandardMaterial({
    map: texture,
    normalMap: normalTexture,
});
const cubeWithNormal = new THREE.Mesh(geometry, materialWithNormal);
scene.add(cubeWithNormal);

Résultat et améliorations

Grâce aux textures et matériaux, notre scène devient plus réaliste ! Voici quelques améliorations possibles :

• Expérimentez avec différents types de matériaux pour voir leur impact visuel.
• Essayez d’appliquer des textures sur d’autres formes comme une sphère ou un plan.
• Ajoutez une réflexion en utilisant une cube map ou une environment map.

Défi

1. Ajoutez une texture de sol à votre scène pour créer un effet réaliste.
2. Expérimentez avec la transparence (opacity) et l’émissivité (emissive) des matériaux.
3. Testez l’effet des textures procédurales sur vos objets.

Sources

• Documentation officielle de Three.js : Three.js Materials (Consultée le 15 mars 2025)
• Guide complet sur les matériaux dans Three.js : Chris Courses (Consulté le 15 mars 2025)
• Guide essentiel des matériaux en Three.js : TMS Outsource (Consulté le 15 mars 2025)

À bientôt pour un prochain article où nous explorerons les animations dans Three.js !