Configuration des Propriétés de la Lumière

1. Les propriétés fondamentales : color et intensity

Toutes les lumières dans Three.js partagent deux propriétés essentielles qui définissent leur caractère de base : la couleur (color) et l'intensité (intensity).

• color : Cette propriété définit la teinte de la lumière émise. Elle peut être définie de plusieurs manières, la plus courante étant une valeur hexadécimale (par exemple, 0xffffff pour le blanc, 0xff0000 pour le rouge). La couleur n'est pas qu'un outil pour des effets spéciaux ; des teintes subtiles peuvent grandement améliorer le réalisme. Par exemple, une lumière directionnelle légèrement jaune pour simuler le soleil et une lumière ambiante légèrement bleue pour simuler le ciel.

• intensity : Il s'agit d'un simple multiplicateur qui contrôle la "force" de la lumière. Une intensité de 1.0 est une valeur de base, 0.5 correspond à une lumière deux fois moins forte, et 2.0 à une lumière deux fois plus forte. Il n'y a pas de "bonne" valeur ; tout dépend de l'effet recherché et de la combinaison des lumières dans votre scène.

Dans la pratique, on initialise souvent ces valeurs directement dans le constructeur de la lumière :

// new LightType(color, intensity)

// Une lumière ambiante blanche, assez faible
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

// Une lumière directionnelle jaune soleil, assez forte
const directionalLight = new THREE.DirectionalLight(0xffffcc, 1.2);

Pour voir un exemple concret, vous pouvez vous référer à l'extrait de code de la ressource "Les matériaux — JavaScript avancé" que nous avons survolée.

2. Propriétés spécifiques : distance et decay pour les PointLight

Certaines lumières, comme la PointLight et la SpotLight, ont des propriétés supplémentaires qui simulent leur comportement physique de manière plus fine. Les deux plus importantes pour une PointLight sont distance et decay.

• distance : Cette propriété définit la portée maximale de la lumière. Au-delà de cette distance, la lumière n'a plus d'effet. La valeur par défaut est 0, ce qui signifie une portée infinie. Définir une distance est crucial pour le réalisme (une bougie n'éclaire pas une pièce entière) et pour les performances (le moteur de rendu n'a pas besoin de calculer l'effet de la lumière sur des objets très éloignés).

• decay : Cette propriété contrôle la vitesse à laquelle l'intensité de la lumière diminue avec la distance. C'est ce qu'on appelle l'atténuation (ou falloff).

L'image suivante illustre parfaitement ce concept :

Une valeur de decay de 2 correspond à une atténuation physiquement réaliste (selon la loi en carré inverse). C'est généralement le meilleur choix pour un rendu crédible.

Point important : Pour que la propriété decay ait un effet, la propriété distance doit être définie sur une valeur supérieure à 0. C'est une erreur courante de l'oublier.

On peut définir ces propriétés dans le constructeur ou après la création :

// new PointLight(color, intensity, distance, decay)
const pointLight = new THREE.PointLight(0xff9900, 1.5, 20, 2);
scene.add(pointLight);

// Ou en modifiant les propriétés après coup
// const pointLight = new THREE.PointLight(0xff9900, 1.5);
// pointLight.distance = 20;
// pointLight.decay = 2;
// scene.add(pointLight);

L'image ci-dessous montre un exemple parfait de l'utilité de ces réglages. On y voit une scène 3D et une interface de débogage qui permet de modifier les propriétés de la PointLight en temps réel. C'est une pratique très courante dans le développement 3D pour trouver l'éclairage parfait. Nous apprendrons à mettre en place de telles interfaces plus tard dans le cours avec la librairie Leva.

3. Atelier pratique : Sculpter la lumière

Il est temps de mettre ces connaissances en pratique. Repartez du code de votre scène avec plusieurs objets que vous avez créée dans les leçons précédentes. Nous allons ajuster l'éclairage étape par étape.

Votre mission : Expérimentez avec les valeurs ci-dessous pour observer leur impact. Modifiez le code, sauvegardez, et actualisez votre navigateur pour voir le résultat.

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// ... (Initialisation de la scène, caméra, renderer comme avant) ...

// --- CONFIGURATION DE L'ÉCLAIRAGE ---

// 1. Lumière ambiante pour déboucher les ombres.
// Essayez de changer la couleur pour un bleu très pâle (0x4040ff)
// et de jouer avec l'intensité entre 0.1 et 0.5.
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

// 2. Lumière directionnelle comme source principale (soleil).
// Donnez-lui une couleur chaude (0xffffcc) pour simuler le soleil.
// Variez son intensité entre 0.8 et 1.5.
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(5, 10, 7.5); // Vient d'en haut, à droite
scene.add(directionalLight);

// 3. PointLight pour un effet localisé.
// Créez une lumière orange (0xff6600) simulant une ampoule.
// Commencez avec intensity=2, distance=10, decay=2.
// - Que se passe-t-il si vous mettez distance à 0 ? Et à 50 ?
// - Que se passe-t-il si vous mettez decay à 1 ? Et si vous remettez distance à 0 ?
const pointLight = new THREE.PointLight(0xff6600, 2, 10, 2);
pointLight.position.set(-3, 2, 2); // Placez-la près d'un de vos objets
scene.add(pointLight);

// --- VOS OBJETS ---
// ... (Ajoutez votre sol, sphère, cube, tore, etc. ici) ...
// Assurez-vous qu'ils utilisent un matériau qui réagit à la lumière, comme MeshStandardMaterial.

// ... (Boucle d'animation avec requestAnimationFrame) ...

Prenez le temps d'expérimenter. L'éclairage est un art autant qu'une technique. La meilleure façon d'apprendre est de "sentir" l'effet de chaque paramètre.

Conclusion

Félicitations ! Vous avez fait un grand pas au-delà du simple fait d'ajouter des lumières. Vous pouvez maintenant les modeler pour qu'elles servent votre vision créative.

Points clés à retenir :

• Les propriétés color et intensity sont la base du contrôle de toute lumière.
• Des couleurs subtiles et variées (chaudes pour les sources principales, froides pour l'ambiance) ajoutent du réalisme.
• Pour les PointLight, distance et decay sont essentiels pour contrôler la portée et l'atténuation de la lumière de manière réaliste et performante.
• N'oubliez pas : decay ne fonctionne que si distance est supérieur à zéro. Une valeur de decay de 2 est physiquement correcte.

Aperçu de la prochaine leçon :
Maintenant que nous maîtrisons la source de la lumière, il est temps de s'intéresser à son absence : les ombres. Dans la prochaine leçon, nous apprendrons à mettre en place des ombres portées, en configurant le renderer, les lumières qui peuvent en projeter, et les objets qui peuvent en recevoir. C'est une étape cruciale pour ancrer vos objets dans la scène et décupler le sentiment de réalisme.