Master Three.js and WebGL
Explore a comprehensive collection of production-ready Three.js examples. From basic geometry to advanced physics and custom shaders, everything you need to build the modern web is here.
Basics
Explore 15 basics examples and code samples.
Rotating Cube in Three.js (Beginner Demo)
Beginner-friendly Three.js rotating cube example that teaches the core Scene, PerspectiveCamera, WebGLRenderer, mesh setup, and real-time animation loop used in most WebGL apps.
Three.js Timer vs Clock Delta Demo (r183)
Side-by-side demo showing why r183 recommends `THREE.Timer` for frame-delta reads, especially when multiple systems request timing in the same animation frame.
Three.js Sphere Texture Mapping Demo
Detailed Three.js sphere texture mapping demo using UV coordinates and procedural CanvasTexture generation. Shows texture wrapping modes, anisotropic filtering, and realistic material response on curved geometry.
Three.js Wireframe Toggle (Torus Demo)
Interactive Three.js wireframe demo showing how to toggle `material.wireframe` on a torus mesh via keyboard and GUI controls to inspect topology and triangle flow.
Three.js Torus Knot Geometry Demo
Interactive torus knot geometry demo showcasing Three.js TorusKnotGeometry with parametric generation, animation, and standard PBR material shading.
Ambient vs Directional Light in Three.js
Three.js lighting fundamentals demo comparing ambient fill light and directional key light on a shaded sphere to show contrast, shadow depth, and readable form.
Three.js GridHelper + AxesHelper Demo
Three.js scene debugging demo using GridHelper and AxesHelper to visualize world orientation, unit scale, and object alignment while orbiting the camera.
3D Point Cloud Visualization in Three.js
High-performance JavaScript 3D point cloud visualization built with Three.js BufferGeometry and PointsMaterial, demonstrating GPU-efficient rendering, per-vertex color, and interactive camera navigation.
Orbit Controls + Axes Helper (Three.js)
Learn OrbitControls camera interaction with a rotating cube and AxesHelper reference, including pan, zoom, and orbit behavior for intuitive Three.js scene navigation.
Three.js Plane Shadows (Cast & Receive)
Core Three.js shadow mapping demo showing how to enable renderer shadows, configure directional lights, and set cast/receive shadow flags on mesh objects for grounded scenes.
MeshNormalMaterial Demo in Three.js
MeshNormalMaterial debugging demo with a rotating torus knot that visualizes surface normals directly, helping diagnose topology, smoothing, and orientation issues.
Three.js InstancedMesh Grid Demo
Performance-oriented Three.js instancing demo rendering hundreds of cubes in a grid using InstancedMesh and per-instance transforms for low draw-call overhead.
Three.js Box Wireframe Geometry Demo
Minimal wireframe cube example using MeshBasicMaterial to visualize triangle edges, geometry structure, and unlit rendering behavior in Three.js.
Three.js Materials Comparison Gallery
Side-by-side Three.js materials comparison across MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, and MeshStandardMaterial under shared lighting.
Three.js Primitive Geometries Showcase
Rotating Three.js primitive geometry showcase comparing box, sphere, cone, and torus meshes under consistent lighting and material settings.
Lighting
Explore 13 lighting examples and code samples.
Three.js Point Light Interactive Demo
Interactive three.js point light with real-time controls for position, color, and intensity. Features point light helper visualization and mouse tracking.
Directional Shadow Visualizer
Inspect directional light shadow camera and map size.
Spotlight Follow Cursor
Spotlight target follows the mouse; tweak angle and penumbra.
Flickering Torch
Noise-based point light flicker simulating a handheld torch.
Three.js Day-Night Cycle Simulation
Dynamic Three.js day-night cycle demo animating sky color, sun position, and light intensity to simulate sunrise, noon, sunset, and nighttime transitions.
Multiple Light Blending
Add/remove multiple colored lights and blend their effects.
Disco Lights
Patterned color-cycling lights with tempo and patterns.
Volumetric Light Shafts
Fake god rays with additive cone; adjust density and decay.
Fog Scattering Playground (r183-inspired)
Atmospheric spotlight demo using exponential fog and additive beam scattering to visualize how light volumetrics react to fog density and penumbra.
Volumetric Spotlight Lab (r183 roadmap)
Dense spotlight beam demo combining real spotlight shadows with additive volumetric cone scattering and animated occluders for dynamic light shafts.
Soft Shadows in Three.js
Advanced three.js soft shadow techniques with PCF shadow mapping, dynamic shadow softness control, and real-time shadow quality comparison.
Neon Glow Text
Emissive neon-style text with adjustable glow intensity.
Depth of Field Gallery
Post-processing depth of field effect with objects at varying distances.
Camera Controls
Explore 5 camera controls examples and code samples.
Three.js Orbit Controls Playground Demo
Interactive Three.js OrbitControls camera playground covering damping, auto-rotation, zoom limits, and polar-angle constraints for smooth navigation in real-world scenes.
Three.js First-Person Camera (WASD + Mouse)
Three.js first-person camera controller with WASD movement, pointer lock mouse look, and collision boundaries for immersive FPS-style navigation in browser scenes.
Dolly Zoom (Vertigo Effect)
Camera technique that changes FOV while adjusting distance to maintain object size.
Advanced Anaglyph Stereo Techniques (r183)
Red-cyan stereoscopic demo using `AnaglyphEffect` with configurable depth presets to compare subtle, balanced, and deep parallax setups.
Stereo Rig Sandbox (r183 roadmap)
Side-by-side stereoscopic camera rig playground with eye-separation and convergence controls for tuning parallax comfort and depth intensity.
Animation
Explore 1 animation examples and code samples.
Particle Systems
Explore 3 particle systems examples and code samples.
Three.js Snowfall Particle System Demo
Real-time snowfall particle system in Three.js with wind drift, vertical fall velocity, sprite-based flakes, and continuous particle recycling for stable performance.
Fireworks
Interactive fireworks show with particle explosions and physics.
Three.js Galaxy Generator Demo
Procedural spiral galaxy generator in Three.js with configurable arms, radial distribution, color gradients, and high-particle-count rendering for astronomy-inspired visuals.
Physics Simulation
Explore 2 physics simulation examples and code samples.
Materials & Textures
Explore 6 materials & textures examples and code samples.
Environment Map (HDRI)
Real-time reflections using cube camera and procedural skybox.
Procedural Noise Texture
Shader-based fractal noise with multiple octaves and color modes.
Water Realism Upgrade (r183-inspired)
Real-time water surface demo using Three.js `Water` with animated wave uniforms, distortion controls, and reflective highlights around a lit island scene.
Env IBL on Lambert vs Phong (r183)
Side-by-side material comparison showing environment-based lighting reflections on `MeshLambertMaterial` and `MeshPhongMaterial` using a live cubemap probe.
Clearcoat + Anisotropy Lab (r183 roadmap)
Side-by-side physical material comparison that demonstrates brushed anisotropic highlights with a clearcoat layer versus a baseline PBR material.
Iridescence Thin-Film Materials (r183 roadmap)
Interactive `MeshPhysicalMaterial` lab that showcases angle-dependent thin-film color shifts with iridescence IOR and thickness controls.
Performance
Explore 2 performance examples and code samples.
BatchedMesh Opacity + Wireframe (r183)
Performance-focused Three.js `BatchedMesh` demo showing per-instance opacity animation via `setColorAt(Vector4)` and live wireframe mode toggling.
Instancing vs BatchedMesh Benchmark (r183 roadmap)
Split-screen benchmark comparing `InstancedMesh` and `BatchedMesh` with synchronized animation, live update timings, and draw-call counters at high instance counts.
Rendering
Explore 3 rendering examples and code samples.
Reversed Depth + PostFX Compatibility (r183)
Long depth-range scene rendered with `reverseDepthBuffer` and `EffectComposer`, demonstrating post-processing compatibility under reversed depth.
TRAA vs SMAA Comparison (r183 roadmap)
Split-screen anti-aliasing comparison with temporal accumulation AA on the left and SMAA post-processing on the right for visual quality tradeoff analysis.
Shadow Map Types Comparison (r183 roadmap)
Three-way split viewport that compares `PCFShadowMap`, `PCFSoftShadowMap`, and `VSMShadowMap` on the same animated scene and light setup.
Geometry
Explore 1 geometry examples and code samples.
Retro / Demoscene
Explore 1 retro / demoscene examples and code samples.
Procedural Generation
Explore 6 procedural generation examples and code samples.
Random Terrain
Fractal noise-based terrain generation with vegetation and biomes.
Rain with Splashes
Fast falling raindrops with wind and fog; reset on ground contact.
Fountain Emitter
Upward particle fountain with gravity and per-particle lifetime.
Animated Texture Scroll
Scroll a checker texture across a cylinder by animating UV offsets.
Starfield Warp
Infinite starfield moving towards the camera with wraparound.
Realistic Animated Grass Field in Three.js
Immersive grass field with advanced wind simulation, realistic blade shapes, natural color variation, and interactive camera controls.
Post-Processing
Explore 11 post-processing examples and code samples.
Bloom Glow
HDR bloom post-processing effect with threshold and intensity controls.
Motion Blur
Velocity-based blur trails created by blending current and previous frames with custom shader.
Depth of Field Focus
Bokeh depth of field pass with smooth auto-focus and click-to-focus controls across layered geometry.
Glitch VFX Playground
Neon city scene routed through DigitalGlitch shader with burst, pulse, and wild distortion modes.
Film Grain Studio
Cinematic scene layered with animated film grain, scanlines, and color tint controlled through a custom shader.
Color Grading Studio
Interactive slope-offset-power grading pipeline with exposure, saturation, and temperature controls.
Screen Space Reflections
Real-time reflections using render targets to create realistic water surface reflections with interactive controls.
FXAA/SMAA Antialiasing
Advanced antialiasing techniques (FXAA and SMAA) to reduce jagged edges in post-processing.
Chromatic Aberration
Simulate lens distortion effects where colors bleed at the edges of high-contrast objects.
Vignette & Lens Distortion
Camera imperfections including dark edges (vignette) and radial lens warping.
Retro Pass Pipeline (r183-inspired)
CRT-style post-processing chain built with `EffectComposer`, combining scanlines, barrel curvature, chromatic separation, grain, and vignette.
Audio Visualization
Explore 2 audio visualization examples and code samples.
Three.js Music Visualizer (Web Audio FFT)
Real-time Three.js music visualizer driven by Web Audio API FFT analysis, with animated frequency bars, color modes, and sensitivity controls for audio-reactive scenes.
Audio Reactive Particles in Three.js
Audio-reactive particle simulation using Web Audio frequency bands (bass, mid, treble) to drive motion, bursts, color shifts, and lighting changes in a real-time Three.js scene.
WebGL Techniques
Explore 2 webgl techniques examples and code samples.
Render Targets
Render to texture technique showing a spinning cube rendered to texture and applied to multiple objects.
MRT G-Buffer Visualizer (r183 roadmap)
WebGL2 multiple-render-target demo that captures normal and depth attachments and visualizes them alongside the beauty pass in a four-panel layout.
Scientific & Educational
Explore 1 scientific & educational examples and code samples.
Data Visualization
Explore 2 data visualization examples and code samples.
Interactive 3D Bar Chart in Three.js
Interactive Three.js 3D bar chart for dataset comparison with animated transitions, hover feedback, dynamic scaling, and orbitable camera controls for exploratory data visualization.
Interactive 3D Globe in Three.js
Interactive Three.js 3D globe visualization with geospatial location pins, latitude/longitude grid overlays, smooth auto-rotation, and configurable styling for geographic data storytelling and map-based dashboards.
Games & Interactive
Explore 16 games & interactive examples and code samples.
Pong 3D
Classic arcade game reimagined in 3D space with realistic physics, AI opponent, and interactive controls.
Marble Maze
Tilt the mahogany board to guide the silver marble through a challenging logic maze.
3D Tetris
Stacking blocks in three dimensions — a spatial reasoning puzzle in a glass container.
Breakout 3D
Smash a wall of colorful 3D bricks with a bouncing ball and a sliding paddle.
Snake 3D
Slither through a neon 3D grid, consuming energy cubes to grow while avoiding the walls and your own tail.
Pac-Man 3D
Navigate a 3D neon maze, collect pellets, and avoid the ghosts in this spatial reimagining of the classic.
Missile Command 3D
Defend the metropolis from a barrage of incoming ballistic missiles using interceptor rockets and tactical explosions.
Target Gallery
Test your reflexes in this 3D shooting gallery. Click on rapidly moving targets and clear the field before time runs out.
Stacking Challenge
How high can you go? Stack sliding blocks with pixel-perfect precision. Any overhang is sliced off!
3D Bowling
Realistic physics-based bowling. Aim your throw, add some spin, and try for a strike!
Space Invaders 3D
A voxel-based orbital shooter. Defend your sector from descending grids of alien invaders.
Minesweeper 3D
The classic logic puzzle, reimagined as a 3D block. Reveal all safe tiles without hitting a mine!
Tower Defense
Strategic defense game. Place automated turrets along a path to stop waves of incoming enemies.
Asteroids 3D
Classic space shooter in 3D. Pilot your ship through a field of drifting asteroids and clear the sector.
Rubik's Cube
A fully interactive and solvable 3D Rubik's Cube puzzle.
Chess 3D
A beautiful 3D chess board for interactive play. Grab and move pieces across the board.