freshtechbro/react-three-fiber

Que fait react-three-fiber ?

Construisez des scènes 3D déclaratives avec React Three Fiber (R3F) - un moteur de rendu React pour Three.js. Utilisez-le pour créer des expériences 3D interactives dans des applications React avec une architecture basée sur les composants, une gestion d'état et des abstractions réutilisables. Idéal pour les configurateurs de produits, portfolios, jeux, visualisation de données et expériences web immersives.

Installation

npm install @react-three/fiber three

Utilisation de base

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

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="hotpink" />
      </mesh>
    </Canvas>
  )
}

Fonctionnalités clés

• Architecture déclarative : Utilisez les composants React pour décrire la scène 3D.
• Gestion d'état intégrée : Combinez avec Zustand ou React context pour gérer l'état de la scène.
• Abstractions réutilisables : Créez vos propres composants 3D réutilisables.
• Animations : Utilisez useFrame pour des animations par frame ou @react-spring/three pour des animations fluides.
• Lumières et ombres : Support complet des lumières dynamiques, ombres et effets visuels.
• Interactions : Gérez les événements de souris et les interactions utilisateur via les props onClick, onPointerOver, etc.

Exemple avancé : Intégration de modèles 3D

import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

function Model() {
  const gltf = useLoader(GLTFLoader, '/path/to/model.gltf')
  return <primitive object={gltf.scene} />
}

Ressources

• Documentation officielle R3F
• Exemples et démos
• Communauté Discord