Types de Lumières dans Three.js

1. Pourquoi la lumière est-elle indispensable ?

Comme vous l'avez expérimenté, sans source de lumière, la plupart des matériaux dans Three.js (comme MeshStandardMaterial ou MeshPhongMaterial) apparaissent complètement noirs. C'est parce que ces matériaux sont conçus pour simuler la manière dont la lumière interagit avec les surfaces dans le monde réel. Seul le MeshBasicMaterial n'est pas affecté par la lumière.

L'éclairage ne sert pas seulement à rendre les objets visibles ; il définit le volume, la profondeur et l'atmosphère d'une scène. Il existe plusieurs types de lumières dans Three.js, chacun avec un comportement et un usage spécifiques.

Pour commencer, observons une illustration des types de lumières les plus courants.

Dans cette leçon, nous nous concentrerons sur les trois premiers, qui constituent la base de la plupart des configurations d'éclairage.

2. Les principaux types de lumières

Pour bien comprendre les différences, les cas d'usage et l'implémentation de chaque lumière, je vous invite à étudier le document suivant. Il est concis, bien structuré et fournit des exemples de code clairs.

Maintenant que vous avez lu la ressource, récapitulons et approfondissons chaque type de lumière.

a) AmbientLight : La lumière de remplissage

• Concept : C'est une lumière globale qui éclaire tous les objets de la scène de manière égale, quelle que soit leur position ou leur orientation. Elle n'a pas de source ni de direction.
• Analogies : La lumière diffuse d'un ciel très nuageux, ou la lumière indirecte qui a rebondi sur tous les murs d'une pièce.
• Usage : Elle est rarement utilisée seule car elle aplatit la scène (pas d'ombres, pas de relief). Son rôle principal est de servir de "lumière de remplissage" (fill light). Elle adoucit les ombres créées par d'autres lumières, évitant ainsi qu'elles ne soient d'un noir absolu, ce qui est plus réaliste.
• Implémentation :

  // AmbientLight(couleur, intensité)
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);
  

  Une intensité faible (entre 0.1 et 0.5) est généralement suffisante.

b) DirectionalLight : Le soleil

• Concept : Cette lumière simule une source lumineuse infiniment éloignée, comme le soleil. Tous ses rayons sont parallèles et voyagent dans la même direction.
• Usage : C'est la lumière principale (key light) idéale pour les scènes en extérieur. La direction de la lumière est déterminée par sa position et son target (qui est par défaut au centre de la scène (0,0,0)).
• Implémentation :

  // DirectionalLight(couleur, intensité)
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
  // La lumière vient d'en haut à droite et éclaire vers le centre
  directionalLight.position.set(5, 10, 7.5); 
  scene.add(directionalLight);
  

c) PointLight : L'ampoule

• Concept : Elle émet de la lumière dans toutes les directions à partir d'un seul point dans l'espace, exactement comme une ampoule sans abat-jour.
• Usage : Parfaite pour simuler des sources de lumière locales : une lampe, une bougie, une explosion, etc.
• Implémentation :

  // PointLight(couleur, intensité, distance, decay)
  const pointLight = new THREE.PointLight(0xffd488, 1.5, 50, 2);
  pointLight.position.set(-2, 2, 2);
  scene.add(pointLight);
  

  • distance: La portée maximale de la lumière. 0 signifie une portée infinie.
  • decay: La vitesse à laquelle la lumière perd de son intensité avec la distance. Une valeur de 2 correspond à une atténuation physiquement réaliste.

3. Exercice pratique : Éclairer votre scène

Reprenons la scène que vous avez composée lors de la leçon précédente. Nous allons expérimenter avec différentes configurations de lumière.

Point de départ : Supprimez toutes les lumières de votre code. Vos objets devraient apparaître noirs (sauf s'ils utilisent MeshBasicMaterial).

Étape 1 : AmbientLight seule

Ajoutez uniquement une lumière ambiante.

const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
scene.add(ambientLight);

Observation : Tous les objets sont visibles et uniformément éclairés. Cependant, la scène paraît "plate", sans relief ni volume. C'est pourquoi on utilise rarement cette lumière seule.

Étape 2 : DirectionalLight seule

Maintenant, remplacez la lumière ambiante par une lumière directionnelle.

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

Observation : Le volume des objets est maintenant visible ! Vous voyez des zones éclairées et des zones d'ombre. Cependant, les zones d'ombre peuvent paraître trop sombres, voire complètement noires.

Étape 3 : La combinaison classique

C'est là que la magie opère. Nous allons combiner les deux. La DirectionalLight sera notre source principale, et l'AmbientLight débouchera les ombres.

// Lumière principale pour le relief et les ombres
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// Lumière de remplissage pour adoucir les ombres
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

Observation : C'est le meilleur des deux mondes. Nous avons du volume, des directions d'éclairage claires, et des ombres douces et naturelles. C'est une configuration très polyvalente et efficace.

Étape 4 (Bonus) : Ajouter une lumière d'appoint

Pour ajouter un intérêt visuel, ajoutons une PointLight colorée pour simuler une petite source de lumière décorative.

// ... (gardez les lumières de l'étape 3)

const accentLight = new THREE.PointLight(0xff00ff, 1.5, 10, 2); // Une lumière magenta
// Placez-la près d'un de vos objets
accentLight.position.set(-2, 0.5, 1);
scene.add(accentLight);

Observation : Vous devriez voir une lueur colorée sur les objets proches de la PointLight. C'est un excellent moyen de guider le regard ou de créer une atmosphère spécifique.

Conclusion

Félicitations ! Vous maîtrisez maintenant les trois piliers de l'éclairage dans Three.js. Vous ne vous contentez plus de copier-coller un bloc de code "pour que ça marche", vous comprenez le rôle de chaque lumière et comment les combiner pour obtenir l'effet désiré.

Points clés à retenir :

• Sans lumière, les matériaux réalistes restent noirs.
• AmbientLight : Éclaire tout uniformément. Idéale en tant que lumière de remplissage à faible intensité.
• DirectionalLight : Simule le soleil avec des rayons parallèles. Parfaite comme lumière principale pour définir les formes.
• PointLight : Émet depuis un point. Idéale pour les sources de lumière locales (lampes, bougies).
• La combinaison d'une lumière principale (DirectionalLight) et d'une lumière de remplissage (AmbientLight) est une base solide pour la plupart des scènes.

Aperçu de la prochaine leçon :
Maintenant que vous savez quelles lumières ajouter, nous allons apprendre à affiner leur comportement. Dans la prochaine leçon, nous verrons comment configurer plus en détail les propriétés des lumières (intensité, couleur, portée) et nous aborderons l'un des aspects les plus importants pour le réalisme : la mise en place des ombres portées.