React Three Fiber

ELI5 — The Vibe Check

React Three Fiber lets you build Three.js 3D scenes using React components. Instead of imperative 'create mesh, add to scene' code, you write . It's 3D graphics that feel like building a React app. Declarative 3D? Yes please.

Real Talk

React Three Fiber (R3F) is a React renderer for Three.js that expresses 3D scenes as JSX components. It provides automatic disposal, pointer events, hooks for animation frames, and integration with React's ecosystem (Suspense, context, state management). The drei library adds common helpers.

Show Me The Code

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

function Box() {
  return (
    <mesh rotation={[0.5, 0.5, 0]}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

<Canvas>
  <ambientLight />
  <Box />
</Canvas>

When You'll Hear This

"React Three Fiber makes Three.js feel like writing regular React components" / "R3F with drei gives you 90% of common 3D patterns as simple React hooks"