R3F · NEXT.JS 16 · TYPESCRIPT
A React Three Fiber learning playground
Server-rendered shells, client-hydrated WebGL. Lessons that cover the patterns you actually use day-to-day with @react-three/fiber, drei, @react-three/rapier, zustand — refs over state, memoised meshes, instancing, Suspense-loaded assets, custom shaders, physics, and adaptive performance.
Basics
Cube, sphere, lights, OrbitControls — the canonical R3F shape.
Textures & PBR
useTexture, Environment, MeshPhysical — Suspense-loaded assets.
Instancing
5000 cubes via drei <Instances> — toggle to see the FPS delta.
Post-processing
Bloom, chromatic aberration, vignette via EffectComposer.
Pointer Events
Hover, click, cursor swaps — raycasting baked into JSX.
Cameras
Perspective vs Orthographic, animated camera, CameraShake.
Environments
Sky, Stars, Sparkles, Cloud, Environment presets — world helpers.
Custom Shaders
shaderMaterial with GLSL — vertex displacement and uniforms.
Physics
@react-three/rapier — RigidBody, colliders, click-to-impulse.
Text
drei Text (SDF) and Text3D — typography in three dimensions.
Models
useGLTF — Suspense-loaded glTF assets via the drei loader.
Animations
useAnimations — clip playback and crossfade on rigged glTF.
Journey
Scroll-driven scene with particles and orbiting lights.
Hero Parallax
Background canvas with mouse-driven camera and floating geometry — the agency-homepage pattern.
Holographic Card
Iridescent foil card with mouse-tilt parallax — the premium-UI element pattern.
Physics Playground
Click-to-launch rigid bodies — the interactive physics-toy pattern.
Configurator
Live product customization (color, finish) with smooth material transitions.
Image Distortion
Hover-distorted image grid with custom vertex + UV-warp shader.
Globe & Arcs
Procedural dotted globe with animated arcs between lat/lon points — the data-viz hero pattern.
Portal Windows
drei MeshPortalMaterial — three rounded panels showing entirely different scenes inside.
Product Showcase
Click-hotspot product page — camera tweens to focus pose, side panel shows the spec.
Cinematic Scroll
Camera-on-rails through staged 3D moments — the Apple AirPods / Vision Pro pattern.
Audio Visualizer
Mic-reactive icosahedron driven by FFT bins via a custom vertex shader.
Scrolling Storyline
Four pinned canvases crossfading as the user scrolls — the multi-scene one-page-site pattern.
Single-Canvas Storyline
One canvas, one camera path threading four spatial chapters — the continuous-world counterpart to scrolling-storyline.
Architecture: each lesson lives at /lessons/<slug> as a Server Component shell, with the WebGL canvas dynamically imported from a thin "use client" wrapper that sets ssr: false. Hero copy and metadata render on the server; the canvas hydrates behind a CLS-stable skeleton.
See README.md for the project tour and CLAUDE.md for the conventions and R3F best practices encoded in this codebase.