React Three Fiber
A React renderer for three.js that lets you build 3D scenes declaratively with reusable components.
Three.js as declarative React components — reactive, composable, the way to do 3D in a React app. If you know React, this is how 3D finally clicks.
React Three Fiber renders Three.js scenes as React components. Instead of imperative scene-graph code you describe meshes, lights and cameras declaratively, and they react to state like any other component. It doesn't replace Three.js — it is Three.js expressed in JSX — so everything you learn transfers straight across.
Start with this
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
export default function Scene() {
return (
<Canvas camera={{ position: [3, 3, 3] }}>
<ambientLight intensity={0.6} />
<directionalLight position={[5, 5, 5]} />
<mesh rotation={[0.4, 0.2, 0]}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="#4c6cff" />
</mesh>
<OrbitControls />
</Canvas>
);
}The take, for AI builders
If you already think in React, this is how 3D finally clicks — state drives the scene and the component model keeps it composable. Pair it with Drei for controls and helpers from day one, and add Rapier when you need physics. The one caveat: you still have to learn Three.js concepts (geometry, materials, lights), because R3F is the binding, not a shortcut around the fundamentals.
When to reach for it
✓ Good fit
- You're building 3D inside a React app and want it reactive
- You want a composable, component-based scene graph
- You'll lean on the Drei and Rapier ecosystem
✕ Not for
- You're not using React (use plain Three.js)
- You need a full game engine with an editor (look at PlayCanvas or Babylon.js)
Alternatives
The underlying library — use it directly if you're not in React.
A batteries-included engine with more built-in tooling out of the box.
Related in 3D & graphics
Babylon.js
A full-featured open-source WebGL/WebGPU 3D engine for building games and interactive experiences.
- 3d-engine
- webgl
- webgpu
A batteries-included WebGL/WebGPU engine — more out-of-the-box tooling than Three.js, with great WebXR support. The pick when you want an engine, not a library.
Visit ↗Drei
A collection of useful helpers and ready-made abstractions for React Three Fiber.
- react-three-fiber
- helpers
- 3d
The indispensable helper kit for R3F — controls, loaders, cameras, environments, shaders, all ready-made. You'll install it five minutes after R3F.
Visit ↗model-viewer
Google's open-source web component for embedding interactive 3D models (glTF/GLB) with optional AR.
- web-component
- 3d-models
- augmented-reality
Google's web component to drop a 3D or AR model on a page with one tag. The simplest possible way to show a product in 3D, AR included.
Visit ↗