Création d'une scène produit complète

1. Créer un environnement de studio avec drei

Pour qu'un produit soit mis en valeur, il a besoin d'une scène adéquate. Plutôt que de construire un éclairage et un décor à partir de zéro, nous allons utiliser des composants de haut niveau de la bibliothèque drei. C'est l'un des plus grands avantages de l'écosystème R3F : obtenir des résultats professionnels rapidement.

Les composants que nous allons utiliser sont :

• Stage : Crée une plateforme au sol, un éclairage de studio préréglé et gère les ombres. Parfait pour une présentation rapide.
• PresentationControls : Une alternative à OrbitControls qui offre une sensation plus "présentation", en recentrant automatiquement le modèle et en limitant les angles de caméra.
• Environment : Applique un éclairage basé sur l'image (IBL) pour des reflets réalistes, ce qui est essentiel pour un rendu de qualité.

Après avoir suivi ces étapes, votre composant principal (que nous avons appelé Experience dans la leçon précédente) devrait ressembler à ceci :

import { PresentationControls, Stage, Environment } from '@react-three/drei'

export function Experience() {
  return (
    <PresentationControls
      speed={1.5}
      global
      zoom={0.7}
      polar={[-0.1, Math.PI / 4]} // Limite la rotation verticale
    >
      <Stage environment={{ preset: 'city' }} intensity={0.6} castShadow={false}>
        {/* Notre modèle viendra ici */}
      </Stage>
    </PresentationControls>
  );
}

Ce code simple nous donne déjà un éclairage de studio, des ombres douces, un sol et des contrôles de caméra fluides. C'est la puissance de la composition dans R3F.

2. Charger le modèle du produit

Maintenant que notre "studio photo" est prêt, il est temps de faire entrer le sujet principal : notre produit. Comme nous l'avons vu dans la leçon précédente, la meilleure pratique consiste à convertir notre modèle 3D (par exemple, un fichier .glb ou .gltf) en un composant React à l'aide de gltfjsx.

Cette étape nous permet de traiter notre modèle 3D comme n'importe quel autre composant React, de lui passer des props et de gérer son état facilement.

Après avoir généré votre composant à partir de votre modèle 3D, l'intégration est aussi simple que d'écrire :

// Dans Experience.jsx
import { Chair } from './Chair'; // En supposant que gltfjsx a créé Chair.jsx

// ... à l'intérieur du composant Experience
<Stage environment={{ preset: 'city' }} intensity={0.6} castShadow={false}>
  <Chair />
</Stage>
// ...

Le modèle apparaît maintenant dans notre scène, bénéficiant de l'éclairage et de l'environnement que nous avons déjà mis en place.

3. Appliquer des matériaux réalistes (PBR)

Un modèle sans textures de qualité professionnelle aura l'air plastique et peu convaincant. Pour atteindre l'objectif de "showcase de produit", nous devons utiliser des matériaux physiquement réalistes (PBR - Physically Based Rendering). Cela implique d'appliquer plusieurs "cartes" de texture qui disent au moteur de rendu comment la lumière doit interagir avec la surface (couleur, rugosité, reflets, etc.).

Le hook useTexture de drei est l'outil parfait pour charger ces textures de manière efficace.

À l'intérieur de votre composant modèle généré par gltfjsx (par ex. Chair.jsx), vous allez importer useTexture et définir vos matériaux :

import * as THREE from 'three'
import { useTexture } from '@react-three/drei'

// ... dans le composant de votre modèle
const props = useTexture({
  map: 'textures/leather_color.jpg',
  normalMap: 'textures/leather_normal.jpg',
  roughnessMap: 'textures/leather_roughness.jpg',
  aoMap: 'textures/leather_ao.jpg',
})

// Configuration pour la répétition de la texture
props.map.repeat.set(3, 3);
props.map.wrapS = props.map.wrapT = THREE.RepeatWrapping;
// Répétez pour les autres cartes...

// ...
return (
  <group {...props} dispose={null}>
    <mesh geometry={nodes.cushion.geometry}>
      <meshStandardMaterial {...props} />
    </mesh>
    {/* ... autres parties du modèle */}
  </group>
)

Ce processus transforme un modèle 3D basique en un objet photoréaliste, prêt pour une présentation de produit.

Conclusion

Félicitations ! Vous avez assemblé avec succès une scène de présentation de produit complète et statique. En combinant des outils de haut niveau de drei avec le workflow gltfjsx, vous avez créé une base solide et d'aspect professionnel pour votre projet final.

Les points clés de cette leçon sont :

• Assemblage de composants : La scène a été construite en assemblant des composants logiques : <PresentationControls>, <Stage>, <Environment>, et notre propre composant de produit (<Chair>).
• Efficacité avec drei : Les composants comme Stage et Environment nous ont permis de créer un éclairage et un décor de qualité studio avec un minimum d'effort.
• Workflow du modèle : Nous avons renforcé la pratique consistant à utiliser gltfjsx pour intégrer des modèles 3D de manière propre et réutilisable.
• Réalisme avec PBR : L'application de textures PBR via useTexture est l'étape cruciale qui élève la qualité visuelle de la scène à un niveau professionnel.

Vous avez maintenant une scène magnifique, mais statique. Comment permettre à l'utilisateur de la personnaliser ?

Aperçu de la prochaine leçon :

Dans la prochaine leçon, "Implémenter une logique d'interaction utilisateur pour inspecter le produit", nous allons donner vie à notre scène. Nous apprendrons à gérer les clics de l'utilisateur, à changer les matériaux ou les parties du modèle de manière dynamique, et à lier notre scène 3D à une interface utilisateur 2D. C'est là que notre showcase deviendra vraiment interactif