Ajouter des lumières dans une scène 3D avec Three.js

Bienvenue dans la troisième semaine de notre série sur Three.js ! La semaine dernière, tu as appris à créer un cube tournant, et j’espère que tu as pu t’amuser à personnaliser sa forme ou sa couleur. Cette semaine, nous allons rendre ta scène plus réaliste en ajoutant des lumières.

Pourquoi ajouter des lumières ?

Dans une scène 3D, les lumières jouent un rôle essentiel pour donner de la profondeur et du réalisme. Sans lumière, les objets peuvent paraître plats et monotones. Avec Three.js, tu peux facilement ajouter différents types de lumières pour varier les effets visuels.

Étape 1 : Retirer le matériau basique

Tout d’abord, nous allons changer le matériau de ton cube. Le matériau utilisé jusqu'à présent, MeshBasicMaterial, ne réagit pas aux lumières, ce qui rend les objets moins réalistes. Pour cette étape, remplace-le par un matériau plus avancé comme MeshStandardMaterial, qui prendra en compte les lumières et produira des ombres et des reflets plus détaillés.

Dans ton fichier app.js, remplace cette ligne :

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

Par celle-ci :

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });

Étape 2 : Ajouter une lumière directionnelle

Une lumière directionnelle fonctionne comme la lumière du soleil : elle émet des rayons parallèles provenant d'une direction spécifique. Cette lumière sera ajoutée pour éclairer le cube sous un certain angle, créant des ombres nettes sur les côtés opposés.

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

.normalize() assure que seule la direction de la lumière compte, pas la distance. Cela permet d'avoir un éclairage cohérent quelle que soit la position de la lumière.

Tu peux également ajuster la position de cette lumière directionnelle pour changer l'angle d'éclairage sur le cube.

Étape 3 : Ajouter une lumière ambiante

La lumière ambiante, quant à elle, éclaire uniformément tous les objets de la scène sans créer d'ombres. Elle est idéale pour donner un éclairage doux et uniforme. Une petite touche de lumière ambiante avec la lumière directionnelle permet de combiner un éclairage réaliste avec un effet doux sur les objets.

Voici comment ajouter la lumière ambiante :

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

Étape 4 : Ajuster l’intensité et la position

Pour un rendu encore plus personnalisé, tu peux ajuster l'intensité de la lumière directionnelle. Augmenter ou diminuer la luminosité permet de jouer sur l'effet des ombres et des reflets. De plus, changer la position de la lumière peut complètement modifier la manière dont l'objet est éclairé, donnant des résultats différents en fonction de l'angle de vue.

Étape 5 : Résultat

Une fois ces lumières ajoutées, ton cube devrait paraître beaucoup plus réaliste, avec des ombres et des reflets qui varient en fonction de l'angle de la lumière. Le cube réagit désormais à la lumière, créant un effet plus immersif.

Prochaines étapes

Les lumières sont un élément clé pour améliorer ta scène 3D. Maintenant que tu maîtrises les bases de l'éclairage, la semaine prochaine, nous verrons comment ajouter des textures à tes objets pour les rendre encore plus réalistes !

Ressources utiles

1. « AmbientLight », dans Ricardo Cabello, dir., three.js, 2025-02-18, https://threejs.org/docs/?q=light#api/en/lights/AmbientLight
2. Lewy BLUE, « Ambient Lighting: Illumination from Every Direction », dans Lewy BLUE, dir., discoverthreejs, 2025-02-18, https://discoverthreejs.com/book/first-steps/ambient-lighting/