Quand mes étudiants en développement full-stack découvrent qu’on peut intégrer de la 3D directement dans un composant React, je vois leurs yeux s’illuminer. Le problème, c’est que Three.js brut peut vite décourager : API impérative, gestion manuelle du cycle de vie, code verbeux. C’est exactement là que React Three Fiber change la donne. Cette bibliothèque transforme Three.js en composants React déclaratifs, et je vais vous montrer comment l’utiliser concrètement, étape par étape.

Qu’est-ce que React Three Fiber et à quoi ça sert

React Three Fiber (souvent abrégé R3F) est un renderer React pour Three.js, la bibliothèque JavaScript de référence pour la 3D sur le web. Concrètement, il permet d’écrire des scènes 3D en utilisant la syntaxe JSX que tout développeur React connaît déjà. Au lieu d’instancier manuellement des objets Three.js, vous déclarez des composants comme <mesh>, <boxGeometry> ou <ambientLight>.

Le projet est maintenu par le collectif Poimandres (pmndrs) et compte plus de 28 000 étoiles sur GitHub. Il ne s’agit pas d’une surcouche qui ralentit Three.js : react three fiber traduit directement vos composants en objets Three.js natifs, sans couche d’abstraction intermédiaire. Les performances restent donc identiques à celles de Three.js pur.

Dans la pratique, je l’utilise pour :

• Des visualisations de données en 3D intégrées dans des dashboards React
• Des configurateurs produit (meubles, voitures, vêtements) pour le e-commerce
• Des expériences interactives et portfolios créatifs
• Des jeux web légers directement dans le navigateur
• Des prototypes rapides pour valider un concept 3D avant développement natif

Installer React Three Fiber dans un projet React

L’installation via @react-three/fiber npm est simple. Je pars du principe que vous avez déjà un projet React fonctionnel (créé avec Vite, Create React App ou Next.js). Ouvrez votre terminal et lancez :

npm install three @react-three/fiber @react-three/drei

Trois paquets suffisent pour démarrer :

• three : la bibliothèque Three.js elle-même (dépendance obligatoire)
• @react-three/fiber : le renderer React pour Three.js
• @react-three/drei : une collection de helpers et composants utilitaires qui simplifient énormément le travail quotidien

Vérifiez que les versions sont compatibles. En 2026, la version stable de react-three fiber est la v8.x, qui requiert React 18 ou supérieur et Three.js 0.160+. Si vous utilisez TypeScript, les types sont inclus dans le paquet, aucune installation supplémentaire n’est nécessaire.

Créer sa première scène 3D pas à pas

Voici le code minimal pour afficher un cube 3D rotatif. Je décompose chaque ligne pour que ce soit parfaitement clair, même si vous n’avez jamais touché à Three.js :

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

function MonCube() {
  return (
    <mesh rotation={[0.5, 0.5, 0]}>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color="#4f46e5" />
    </mesh>
  )
}

export default function Scene() {
  return (
    <Canvas style={{ height: '100vh' }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} />
      <MonCube />
      <OrbitControls />
    </Canvas>
  )
}

Décortiquons ce react three fiber example :

• <Canvas> crée automatiquement un WebGLRenderer, une scène et une caméra perspective. C’est le point d’entrée obligatoire de toute scène R3F.
• <mesh> est l’équivalent d’un THREE.Mesh : un objet 3D composé d’une géométrie et d’un matériau.
• <boxGeometry args={[2, 2, 2]}> génère un cube de 2 unités de côté. Le tableau args correspond aux paramètres du constructeur Three.js.
• <meshStandardMaterial> applique un matériau PBR (Physically Based Rendering) qui réagit à la lumière.
• <OrbitControls> vient de Drei et permet à l’utilisateur de tourner autour de la scène avec la souris.

En moins de 25 lignes, vous avez une scène 3D interactive. C’est cette simplicité qui rend la bibliothèque si populaire dans la communauté React, et c’est aussi un excellent support pour apprendre les bases lors d’une formation en développement web.

Les composants essentiels : lumières, caméras et géométries

Pour construire des scènes plus élaborées, il faut maîtriser trois familles de composants. Voici un récapitulatif des éléments que j’utilise le plus souvent avec mes étudiants :

Chaque composant accepte les mêmes propriétés que son équivalent Three.js. Par exemple, <directionalLight position={[10, 10, 5]} intensity={1.2} castShadow /> positionne une lumière directionnelle, règle son intensité et active les ombres. La correspondance est directe et exhaustive : tout ce que vous pouvez faire avec Three.js, vous pouvez le faire avec react-three fiber.

Drei : la bibliothèque de helpers indispensable

Si react three fiber est le moteur, Drei est la boîte à outils. Maintenue par la même équipe, cette bibliothèque fournit plus de 100 composants prêts à l’emploi qui évitent de réinventer la roue. Voici ceux que je recommande en priorité :

• <OrbitControls> : navigation orbite autour de la scène (rotation, zoom, pan)
• <Html> : injecte du HTML standard à l’intérieur de la scène 3D, parfait pour les tooltips ou labels
• <Text> et <Text3D> : affiche du texte en 3D avec support des polices personnalisées
• <Environment> : charge des maps d’environnement HDR en une seule ligne pour des reflets réalistes
• <useGLTF> : hook pour charger des modèles 3D au format glTF/GLB avec mise en cache automatique
• <Float> : ajoute un mouvement flottant naturel à n’importe quel objet
• <ContactShadows> : ombres de contact réalistes sans configuration complexe

Par exemple, charger un modèle 3D externe devient trivial :

import { useGLTF } from '@react-three/drei'

function MonModele() {
  const { scene } = useGLTF('/modele.glb')
  return <primitive object={scene} scale={0.5} />
}

useGLTF.preload('/modele.glb')

La documentation de Drei sur le site officiel pmndrs est très bien organisée. Je conseille de la parcourir au moins une fois pour connaître l’étendue des possibilités avant de coder quoi que ce soit à la main.

Animations et interactions utilisateur

L’animation est au cœur de l’expérience 3D. React Three Fiber expose le hook useFrame qui s’exécute à chaque frame du rendu (typiquement 60 fois par seconde). C’est l’outil principal pour animer vos objets :

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'

function CubeAnimé() {
  const meshRef = useRef()

  useFrame((state, delta) => {
    meshRef.current.rotation.y += delta * 0.5
    meshRef.current.position.y = Math.sin(state.clock.elapsedTime) * 0.3
  })

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="#06b6d4" />
    </mesh>
  )
}

Le paramètre delta représente le temps écoulé depuis la dernière frame. En multipliant vos valeurs par delta, l’animation reste fluide et constante quel que soit le framerate de l’utilisateur.

Pour les interactions, R3F gère nativement les événements de souris sur les objets 3D :

<mesh
  onClick={(e) => console.log('Clic sur le cube')}
  onPointerOver={(e) => setHovered(true)}
  onPointerOut={(e) => setHovered(false)}
>

Ces événements fonctionnent grâce au raycasting automatique : R3F calcule quel objet 3D se trouve sous le curseur et déclenche l’événement correspondant. Pour des animations plus complexes (transitions fluides entre états), je recommande d’ajouter @react-spring/three qui s’intègre parfaitement avec R3F.

Si vous travaillez sur un projet nécessitant à la fois de la 3D et de la navigation entre pages React, sachez que les scènes R3F se comportent comme n’importe quel composant React : elles se montent et se démontent proprement lors des changements de route.

React Three Fiber ou Three.js : comment choisir

C’est la question que mes étudiants me posent le plus souvent. La réponse dépend de votre contexte. Voici mon analyse après plusieurs années d’utilisation des deux approches :

Choisissez React Three Fiber si :

• Votre application est déjà construite avec React
• Vous avez besoin de mélanger UI classique et 3D
• Votre équipe maîtrise React mais pas Three.js
• Vous voulez bénéficier de l’écosystème React (state management, routing, SSR)
• Vous développez un projet web sur mesure avec des composants 3D intégrés

Restez sur Three.js pur si :

• Votre projet n’utilise pas React du tout
• Vous avez besoin d’un contrôle très fin sur le pipeline de rendu (post-processing avancé, shaders custom complexes)
• Vous portez un projet Three.js existant et ne souhaitez pas migrer
• Vous construisez un jeu 3D intensif où chaque microseconde compte

En termes de performances, react-three fiber n’ajoute aucune surcharge mesurable. Le renderer traduit vos composants JSX en appels Three.js directs. La différence se situe dans l’ergonomie de développement, pas dans la vitesse d’exécution. Pour la grande majorité des projets web intégrant de la 3D, R3F est aujourd’hui le choix le plus productif.

Optimiser les performances de vos scènes 3D

Une scène 3D mal optimisée peut faire chuter le framerate et ruiner l’expérience utilisateur. Voici les techniques que j’applique systématiquement en production :

1. Limiter les re-rendus React. Utilisez React.memo sur vos composants 3D qui ne changent pas souvent. Évitez de passer des objets ou des tableaux créés inline comme props, car ils déclenchent des re-rendus inutiles à chaque frame.

2. Réutiliser les géométries et matériaux. Au lieu de créer une nouvelle boxGeometry pour chaque cube, déclarez-la une fois et partagez-la entre les meshes via des refs. La mémoire GPU vous remerciera.

3. Activer le mode « demand » sur le Canvas. Par défaut, R3F rend en continu (60 fps). Si votre scène est statique entre les interactions, passez en rendu à la demande :

<Canvas frameloop="demand">
  {/* La scène ne se re-rend que quand c'est nécessaire */}
</Canvas>

4. Compresser vos modèles 3D. Utilisez meshoptimizer ou l’outil gltf-transform pour réduire la taille de vos fichiers GLB. Une réduction de 60 à 80 % est courante sans perte de qualité visible.

5. Implémenter le Level of Detail (LOD). Drei fournit un composant <Detailed> qui affiche des versions simplifiées de vos modèles quand ils sont éloignés de la caméra. C’est essentiel pour les scènes contenant de nombreux objets.

Ces pratiques sont d’autant plus importantes si votre application doit fonctionner sur des machines modestes. Gardez à l’esprit que la sécurité informatique s’applique aussi aux applications 3D : validez toujours les fichiers glTF chargés depuis des sources externes pour éviter les scripts malveillants intégrés.

Intégrer React Three Fiber avec Next.js ou Vite

L’intégration de react three fiber avec les frameworks modernes demande quelques ajustements. Voici mes recommandations pour les deux environnements les plus courants.

Avec Vite

Vite est le choix le plus simple. L’installation fonctionne directement, sans configuration supplémentaire. Créez un projet et installez les dépendances :

npm create vite@latest mon-projet-3d -- --template react-ts
cd mon-projet-3d
npm install three @react-three/fiber @react-three/drei

C’est prêt. Vite gère nativement l’import des fichiers .glb, .hdr et autres assets 3D. Je recommande ce react three fiber tutorial pour les débutants qui veulent un environnement sans friction.

Avec Next.js

Next.js nécessite une attention particulière car le rendu serveur (SSR) ne supporte pas WebGL. La solution est d’utiliser un import dynamique avec ssr: false :

import dynamic from 'next/dynamic'

const Scene3D = dynamic(() => import('../components/Scene3D'), {
  ssr: false,
  loading: () => <div>Chargement de la scène 3D...</div>
})

export default function Page() {
  return <Scene3D />
}

Avec cette approche, le composant 3D n’est chargé que côté client. Le reste de votre application Next.js continue de bénéficier du SSR et du SEO. Si vous travaillez en télétravail, cette configuration se met en place en quelques minutes via un simple partage de repository.

Ressources pour aller plus loin

Après avoir posé les bases, voici les ressources que je recommande à mes étudiants pour progresser :

• La documentation officielle R3F (r3f.docs.pmnd.rs) : complète, avec des exemples interactifs pour chaque concept
• Le dépôt GitHub react-three-fiber (pmndrs/react-three-fiber) : les issues et discussions sont une mine d’or pour résoudre des problèmes spécifiques
• Three.js Journey : un cours payant mais excellent qui couvre React Three Fiber en profondeur
• Les exemples CodeSandbox de la communauté pmndrs : des dizaines de projets fonctionnels à explorer et modifier
• Le Discord pmndrs : une communauté active et bienveillante pour poser vos questions

React est-il toujours pertinent en 2026 pour ce type de projet ? Absolument. Avec son écosystème mature, sa communauté massive et l’adoption continue par les entreprises, React reste le framework front-end dominant. L’ajout de React Server Components a même ouvert de nouvelles possibilités pour optimiser le chargement des scènes 3D. Si vous envisagez une formation informatique à distance, React et ses outils associés comme R3F sont des compétences très demandées sur le marché.

Pour ceux qui s’intéressent aux aspects légaux du développement web, notamment la collecte de données via des expériences 3D interactives, je vous invite à consulter les obligations RGPD pour les développeurs.

Three.js (ou 3js comme certains l’abrègent) est utilisé pour tout ce qui touche à la 3D dans le navigateur : visualisations de données, jeux, réalité augmentée sur le web, configurateurs produit et expériences immersives. React Three Fiber rend simplement cet univers accessible aux développeurs React, et après avoir accompagné des dizaines de projets étudiants avec cette stack, je peux affirmer que la courbe d’apprentissage est remarquablement douce comparée à Three.js pur.

Lucie Moreau

Formatrice IT indépendante depuis 2016, ancienne étudiante BTS SIO SLAM. 6 ans d'expérience en entreprise.