Maîtriser `<Lightformer>` pour un éclairage personnalisé

1. Au-delà de l'HDRI : Peindre avec la lumière

L'éclairage basé sur l'image (IBL) avec un fichier HDRI est excellent pour simuler un environnement existant. Mais que faire si vous voulez créer une ambiance qui n'existe pas ? Par exemple, mettre en valeur un produit avec un éclairage de studio spécifique : une lumière principale forte, une lumière de remplissage plus douce, et un contre-jour pour détacher la silhouette.

Les lumières traditionnelles de Three.js (PointLight, SpotLight) peuvent accomplir cela, mais elles ont un coût : chaque lumière qui projette des ombres dynamiques est gourmande en ressources. Si vous en ajoutez plusieurs, les performances peuvent chuter.

C'est là qu'intervient <Lightformer>. C'est un composant de drei qui représente une forme géométrique (un rectangle, un cercle) qui émet de la lumière. Cependant, au lieu d'être une "vraie" source de lumière 3D, elle "peint" sa forme et sa couleur directement sur la carte d'environnement gérée par son parent, le composant <Environment>.

L'avantage principal est la performance. Comme les Lightformers sont intégrés à l'IBL, vous pouvez en ajouter des dizaines sans l'impact sur les performances qu'auraient des lumières 3D traditionnelles.

2. Le composant <Lightformer> et ses propriétés

Pour comprendre comment utiliser ce composant, le meilleur point de départ est sa documentation. Elle est très concise et va droit au but.

Comme vous l'avez lu, un <Lightformer> doit toujours être un enfant d'un composant <Environment>. Voici un résumé de ses propriétés essentielles :

• form="'rect' | 'circle' | 'ring'" : La forme de la source lumineuse. Par défaut, c'est 'rect'.
• intensity={number} : La puissance de la lumière.
• color={'string' | number} : La couleur de la lumière.
• scale={[x, y, z]} : La taille de la forme lumineuse.
• position={[x, y, z]} et rotation={[x, y, z]} : Pour placer et orienter votre source de lumière dans l'espace 3D.

Voici un exemple simple pour illustrer son utilisation. On crée un environnement vide (sans preset ni files) et on y place un seul Lightformer.

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment, Lightformer } from '@react-three/drei'
import { YourModel } from './YourModel'

function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <YourModel />

      {/* L'environnement sert de 'toile' pour nos Lightformers */}
      <Environment resolution={256}>
        {/* Un panneau lumineux rectangulaire, bleu, placé au-dessus du modèle */}
        <Lightformer
          position={[0, 4, -1]}
          rotation-x={-Math.PI / 2}
          scale={[10, 1, 1]}
          color="lightblue"
          intensity={4}
        />
      </Environment>

      <OrbitControls />
    </Canvas>
  )
}

Dans cet exemple, resolution={256} sur l'<Environment> permet de définir la qualité de la carte d'environnement générée. Une valeur plus basse est plus performante.

3. Construire un studio d'éclairage virtuel

La véritable puissance des Lightformers se révèle lorsqu'on les combine pour créer une configuration d'éclairage complexe, comme dans un studio photo.

Le code suivant est un excellent exemple de cette approche. Il utilise plusieurs Lightformers pour éclairer une scène.

Ce que cet exemple nous apprend est crucial :

• Composition : On peut superposer des lumières de différentes formes, tailles et intensités pour sculpter l'éclairage.
• Organisation : L'utilisation d'un <group> permet de manipuler (par exemple, faire tourner) l'ensemble de l'installation lumineuse en une seule fois.
• Programmation : On peut générer des lumières de manière dynamique, par exemple pour créer une rangée de néons ou un chemin lumineux, comme le montre la boucle map.

4. Atelier : Éclairage trois points sur votre modèle

Mettons cela en pratique. L'éclairage trois points est une technique fondamentale en photographie et cinématographie. Il utilise trois sources de lumière pour modeler un sujet :

1. Key Light (Lumière principale) : La source la plus forte, elle définit la forme principale de l'objet.
2. Fill Light (Lumière de remplissage) : Une source plus douce, opposée à la Key Light, qui débouche les ombres.
3. Back Light / Rim Light (Contre-jour) : Une source placée derrière le sujet pour créer un contour lumineux qui le détache de l'arrière-plan.

Reprenez votre projet avec un modèle 3D (celui de la leçon 9.2 par exemple) et essayons de recréer cette configuration.

Instructions :

1. Préparez la scène :

   • Assurez-vous d'avoir votre modèle 3D au centre de la scène.
   • Ajoutez un composant <Environment>. Pour bien voir l'effet des Lightformers, ne mettez ni preset ni files pour le moment. Vous pouvez ajouter un fond sombre avec <color attach="background" args={['#101010']} /> au début de votre <Canvas>.
   • Assurez-vous que les matériaux de votre modèle sont un minimum réfléchissants (metalness > 0.2 ou roughness < 0.8).

2. Ajoutez la Key Light (lumière principale) :

   • Créez un <Lightformer> rectangulaire, de couleur blanche, avec une intensité assez forte (ex: intensity={4}).
   • Positionnez-le en haut, sur un côté de votre modèle. Par exemple : position={[5, 5, 2]}.
   • Utilisez la prop target ou rotation pour l'orienter vers votre modèle.

3. Ajoutez la Fill Light (lumière de remplissage) :

   • Créez un deuxième <Lightformer> rectangulaire.
   • Positionnez-le du côté opposé de la Key Light (ex: position={[-5, 1, 4]}).
   • Donnez-lui une intensité plus faible (ex: intensity={1}) et peut-être une scale plus grande pour qu'elle soit plus diffuse.

4. Ajoutez la Back Light (contre-jour) :

   • Créez un troisième <Lightformer>.
   • Positionnez-le derrière et au-dessus de votre modèle (ex: position={[0, 3, -5]}).
   • Donnez-lui une intensité moyenne (ex: intensity={2}) pour créer une jolie bordure lumineuse (rim light).

Votre code final à l'intérieur du <Canvas> pourrait ressembler à ceci :

<color attach="background" args={['#101010']} />
<VotreModele position={[0, -1, 0]} />

<Environment resolution={256}>
    <group> {/* Optionnel, mais pratique pour tourner toutes les lumières */}
        {/* Key Light */}
        <Lightformer form="rect" intensity={4} color="white" scale={[3, 5, 1]} position={[5, 5, 2]} target={[0, 0, 0]} />

        {/* Fill Light */}
        <Lightformer form="rect" intensity={1} color="white" scale={[10, 5, 1]} position={[-5, 1, 4]} target={[0, 0, 0]} />

        {/* Back Light */}
        <Lightformer form="rect" intensity={2} color="white" scale={[5, 5, 1]} position={[0, 3, -5]} target={[0, 0, 0]} />
    </group>
</Environment>

<OrbitControls />

Expérimentez avec les positions, les intensités et les couleurs pour voir leur impact sur votre modèle. Vous êtes maintenant un directeur de la photographie virtuel !

Conclusion

Vous venez d'ajouter un outil extrêmement puissant et créatif à votre arsenal. L'éclairage n'est plus seulement une question de réalisme global, mais un véritable instrument de design.

Points clés à retenir :

• Le composant <Lightformer> permet de créer des sources lumineuses personnalisées et performantes en les intégrant à la carte d'environnement.
• Il doit toujours être un enfant du composant <Environment>.
• Ses propriétés (form, intensity, color, scale, etc.) vous donnent un contrôle total sur l'apparence et le positionnement de la lumière.
• Combiner plusieurs Lightformers permet de construire des installations d'éclairage complexes et artistiques, comme dans un studio photo, sans sacrifier les performances.

Aperçu de la prochaine leçon :
Nos scènes sont maintenant magnifiquement éclairées, mais elles restent largement passives. Il est temps de les rendre vivantes et interactives ! Dans la prochaine leçon, nous entrerons dans le monde de l'interactivité en apprenant à gérer les événements de la souris comme onClick et onPointerOver directement sur nos objets 3D.