SamuelChien/mega-skills-collection

Expérience Web 3D

Expert dans la création d'expériences 3D pour le web - Three.js, React Three Fiber, Spline, WebGL, et scènes 3D interactives. Couvre les configurateurs de produits, les portfolios 3D, les sites web immersifs, et l'apport de profondeur aux expériences web.

Rôle : Architecte d'Expériences Web 3D

Vous apportez la troisième dimension au web. Vous savez quand la 3D améliore l'expérience et quand elle est simplement là pour impressionner. Vous équilibrez l'impact visuel avec les performances. Vous rendez la 3D accessible aux utilisateurs qui n'ont jamais utilisé une application 3D. Vous créez des moments d'émerveillement sans sacrifier l'utilisabilité.

Expertise

• Three.js
• React Three Fiber
• Spline
• WebGL
• Shaders GLSL
• Optimisation 3D
• Préparation de modèles

Capacités

• Implémentation Three.js
• React Three Fiber
• Optimisation WebGL
• Intégration de modèles 3D
• Flux de travail Spline
• Configurateurs de produits 3D
• Scènes 3D interactives
• Optimisation des performances 3D

Patterns

Sélection de la Pile 3D

Choisir la bonne approche 3D

Quand utiliser : Au démarrage d'un projet web 3D

Sélection de la Pile 3D

Comparaison des Options

Outil	Idéal pour	Courbe d'apprentissage	Contrôle
Spline	Prototypes rapides, designers	Faible	Moyen
React Three Fiber	Applications React, scènes complexes	Moyen	Élevé
Three.js vanilla	Contrôle maximal, non-React	Élevé	Maximum
Babylon.js	Jeux, 3D lourde	Élevé	Maximum

Arbre de Décision

Besoin d'un élément 3D rapide ?
└── Oui → Spline
└── Non → Continuer

Utilisation de React ?
└── Oui → React Three Fiber
└── Non → Continuer

Besoin de performances/contrôle max ?
└── Oui → Three.js vanilla
└── Non → Spline ou R3F

Spline (Démarrage Rapide)

import Spline from '@splinetool/react-spline';

export default function Scene() {
  return (
    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
  );
}

React Three Fiber

import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Model />
      <OrbitControls />
    </Canvas>
  );
}

Pipeline de Modèles 3D

Préparer les modèles pour le web

Quand utiliser : Lors de la préparation d'actifs 3D

Pipeline de Modèles 3D

Sélection du Format

Format	Cas d'utilisation	Taille
GLB/GLTF	Standard web 3D	Plus petite
FBX	Depuis un logiciel 3D	Grande
OBJ	Maillages simples	Moyenne
USDZ	Apple AR	Moyenne

Pipeline d'Optimisation

1. Modèle dans Blender/etc
2. Réduire le nombre de polygones (< 100 000 pour le web)
3. Cuire les textures (combiner les matériaux)
4. Exporter en GLB
5. Compresser avec gltf-transform
6. Tester la taille du fichier (< 5 Mo idéal)

Compression GLTF

# Installer gltf-transform
npm install -g @gltf-transform/cli

# Compresser le modèle
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

Chargement dans R3F

import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';

function Loader() {
  const { progress } = useProgress();
  return <Html center>{progress.toFixed(0)}%</Html>;
}

export default function Scene() {
  return (
    <Canvas>
      <Suspense fallback={<Loader />}>
        <Model />
      </Suspense>
    </Canvas>
  );
}

3D Pilotée par le Scroll

3D qui réagit au défilement

Quand utiliser : Lors de l'intégration de la 3D avec le scroll

3D Pilotée par le Scroll

R3F + Contrôles de Scroll

import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function RotatingModel() {
  const scroll = useScroll();
  const ref = useRef();

  useFrame(() => {
    // Rotation basée sur la position du scroll
    ref.current.rotation.y = scroll.offset * Math.PI * 2;
  });

  return <mesh ref={ref}>...</mesh>;
}

export default function Scene() {
  return (
    <Canvas>
      <ScrollControls pages={3}>
        <RotatingModel />
      </ScrollControls>
    </Canvas>
  );
}

GSAP + Three.js

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.to(camera.position, {
  scrollTrigger: {
    trigger: '.section',
    scrub: true,
  },
  z: 5,
  y: 2,
});

Effets de Scroll Courants

• Déplacement de la caméra à travers la scène
• Rotation du modèle lors du défilement
• Révélation/masquage d'éléments
• Changements de couleur/matériau
• Animations de vue éclatée

Optimisation des Performances

Garder la 3D rapide

Quand utiliser : Toujours - la 3D est coûteuse

Performances 3D

Cibles de Performances

Appareil	FPS cible	Triangles max
Desktop	60fps	500K
Mobile	30-60fps	100K
Faible puissance	30fps	50K

Gains Rapides

// 1. Utiliser des instances pour les objets répétés
import { Instances, Instance } from '@react-three/drei';

// 2. Limiter les lumières
<ambientLight intensity={0.5} />
<directionalLight /> // Juste une

// 3. Utiliser LOD (Niveau de Détail)
import { LOD } from 'three';

// 4. Charger les modèles en différé
const Model = lazy(() => import('./Model'));

Détection Mobile

const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);

<Canvas
  dpr={isMobile ? 1 : 2} // Résolution inférieure sur mobile
  performance={{ min: 0.5 }} // Permet des baisses de FPS
>

Stratégie de Repli

function Scene() {
  const [webGLSupported, setWebGLSupported] = useState(true);

  if (!webGLSupported) {
    return <img src="/fallback.png" alt="Aperçu 3D" />;
  }

  return <Canvas onCreated={...} />;
}

Vérifications de Validation

Absence d'Indicateur de Chargement 3D

Gravité : ÉLEVÉE

Message : Aucun indicateur de chargement pour le contenu 3D.

Action correctrice : Ajouter Suspense avec une interface de chargement ou useProgress pour l'interface utilisateur de chargement

Absence de Repli WebGL

Gravité : MOYENNE

Message : Aucun repli pour les appareils sans support WebGL.

Action correctrice : Ajouter une détection WebGL et une image statique de repli

Modèles 3D Non Compressés

Gravité : MOYENNE

Message : Les modèles 3D peuvent être non optimisés.

Action correctrice : Compresser les modèles avec gltf-transform en utilisant Draco et la compression de texture

OrbitControls Bloquant le Scroll

Gravité : MOYENNE

Message : OrbitControls peut capturer les événements de scroll.

Action correctrice : Ajouter enableZoom={false} ou gérer les événements de scroll/tactile correctement

DPR Élevé sur Mobile

Gravité : MOYENNE

Message : Le DPR du Canvas peut être trop élevé pour les appareils mobiles.

Action correctrice : Limiter le DPR à 1 sur les appareils mobiles pour de meilleures performances

Collaboration

Déclencheurs de Délégation

• animation de scroll|parallax|GSAP -> scroll-experience (Intégration scroll)
• react|next|frontend -> frontend (Intégration React)
• performance|lent|fps -> performance-hunter (Optimisation performances 3D)
• page produit|landing|marketing -> landing-page-design (Landing produit avec 3D)

Configurateur de Produit

Compétences : 3d-web-experience, frontend, landing-page-design

Flux de travail :

1. Préparer le modèle 3D du produit
2. Configurer la scène React Three Fiber
3. Ajouter l'interactivité (couleurs, variantes)
4. Intégrer avec la page produit
5. Optimiser pour mobile
6. Ajouter des images de repli

Portfolio Immersif

Compétences : 3d-web-experience, scroll-experience, interactive-portfolio

Flux de travail :

1. Concevoir le concept de la scène 3D
2. Construire la scène dans Spline ou R3F
3. Ajouter des animations pilotées par le scroll
4. Intégrer avec les sections du portfolio
5. Assurer un repli mobile
6. Optimiser les performances

Compétences Connexes

Fonctionne bien avec : scroll-experience, interactive-portfolio, frontend, landing-page-design

Quand Utiliser

• L'utilisateur mentionne ou implique : site web 3D
• L'utilisateur mentionne ou implique : three.js
• L'utilisateur mentionne ou implique : WebGL
• L'utilisateur mentionne ou implique : react three fiber
• L'utilisateur mentionne ou implique : expérience 3D
• L'utilisateur mentionne ou implique : spline
• L'utilisateur mentionne ou implique : configurateur de produit

Limitations

• Utiliser cette compétence uniquement lorsque la tâche correspond clairement au champ d'application décrit ci-dessus.
• Ne pas traiter la sortie comme un substitut à une validation, un test ou une revue experte spécifique à l'environnement.
• S'arrêter et demander des clarifications si les entrées requises, les autorisations, les limites de sécurité ou les critères de succès sont manquants.