25 LESSONS
All lessons
Each lesson is a Server Component shell with the WebGL canvas dynamically loaded behind ssr: false. Hero text and metadata render on the server; the canvas hydrates on the client.
TECH · 12
Tech
Feature-by-feature walkthroughs of the React Three Fiber ecosystem.
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.
SHOWCASE · 13
Showcase
Real-world site patterns — scroll-driven scenes, hero canvases, animation types you see in production WebGL sites.
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.