Learn R3F

Three.js + React Three Fiber

Three.js Fundamentals

Scene Basics
Geometries
Materials
Lights

React Three Fiber

Canvas & Setup
Meshes & Objects
R3F Hooks
Events & Interaction

Drei & Ecosystem@react-three/drei

Controls
Staging & Environment
Text & HTML
Loaders & Models

Core Basics

Debug & Helpers
Transforms & Color

Visual Effects

Particles & Lines

Interactivity

Animation & Physics

Shader Recipes

Shader Recipes

Advanced

Shaders
Post-Processing
Performance

Production

Production

Built with by Purush

Star on GitHub

Open for contributions

Navigate

Search topics across all sections

Learn React Three Fiber

An interactive guide to 3D on the web — from Three.js fundamentals to production R3F.

Three.js First

Scene, camera, renderer, geometries, materials, and lights — the 3D foundations every R3F component builds on. Start here before diving into React.

Interactive Scenes

Each concept comes with a live 3D scene you can interact with. Rotate, zoom, click — learn 3D by playing with 3D.

Visual Learning

See every concept rendered in real-time. From basic meshes to custom shaders, every page has live demos you can tinker with.

Three.js Fundamentals

Start Here

These are the core Three.js concepts that R3F abstracts over. Understanding them makes everything else click — geometry, materials, lights, and the render loop.

How the 3D pipeline works — scene, camera, renderer, and the animation loop that brings everything to life.

Built-in shapes, buffer geometry internals, and creating custom geometry from vertices and faces.

From basic flat colors to physically-based rendering, plus texture mapping and UV coordinates.

Light types, shadow casting and receiving, and environment maps for realistic reflections.

React Three Fiber

@react-three/fiber

The React renderer for Three.js. Write 3D scenes as JSX components with hooks, state, and the full React ecosystem.

The Canvas component, how JSX maps to Three.js objects, and the declarative scene graph.

Meshes & Objects

Mesh component, groups and hierarchy, and instanced rendering for thousands of objects.

useFrame for animations, useThree for scene access, and useLoader for async resources.

Events & Interaction

Pointer events on 3D objects and raycasting for precise hit detection.

Drei & Ecosystem

@react-three/drei

Ready-made helpers, controls, loaders, and abstractions that make R3F development faster. The batteries-included toolkit.

OrbitControls, camera controls, and other navigation helpers.

Staging & Environment

Environment maps, the Stage component, sky, and stars for scene setup.

3D text rendering and overlaying HTML elements in 3D space.

Loaders & Models

Loading GLTF/GLB models and the useGLTF hook for optimized model loading.

Advanced

Deep Dive

Custom shaders, post-processing effects, and performance optimization. These topics take your 3D scenes to the next level.

Custom ShaderMaterial, vertex and fragment shaders, uniforms and varyings.

Post-Processing

EffectComposer setup and built-in effects like bloom, vignette, and SSAO.

Optimization tips, instancing, LOD, drei performance helpers, and profiling.