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 14 basics examples and code samples.
Rotating Cube
Simple rotating cube starter showcasing a basic scene, camera and lighting.
Three.js Sphere Texture Mapping
Three.js sphere with UV texture mapping using procedural checkerboard CanvasTexture. Demonstrates texture wrapping, anisotropy, and material mapping.
Wireframe Toggle
Torus geometry with a material wireframe toggle (GUI and keyboard "w").
Three.js Torus Knot Geometry
Interactive torus knot geometry demo showcasing Three.js TorusKnotGeometry with parametric generation, animation, and standard PBR material shading.
Ambient + Directional Light
Compare ambient fill with a directional key light on a sphere.
Grid + Axes Helpers
Visual helpers to understand world orientation and scale.
3D Point Cloud Visualization
Interactive JavaScript 3D point cloud demo using Three.js PointsMaterial and BufferGeometry for efficient WebGL rendering.
Axes + Orbit Controls
Orbit a normal-mapped cube with axes visible.
Plane Shadows
Enable basic shadow casting/receiving between objects.
Normals Material
Torus knot with MeshNormalMaterial for quick debugging.
Instanced Grid
Thousands of lightweight instances arranged in a grid.
Box Wireframe
Wireframe cube using MeshBasicMaterial.
Materials Gallery
Compare basic/lambert/phong/standard materials on spheres.
Primitives Wall
A row of basic primitives rotating under lights.
Lighting
Explore 11 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.
Sunrise-to-Sunset
Animate sky and sun color/intensity over a day-night cycle.
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.
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 3 camera controls examples and code samples.
Orbit Controls Playground
Interactive orbital camera with damping and auto-rotation controls.
First-Person Camera
WASD movement with mouse look controls for immersive navigation.
Dolly Zoom (Vertigo Effect)
Camera technique that changes FOV while adjusting distance to maintain object size.
Particle Systems
Explore 3 particle systems examples and code samples.
Snowfall
Realistic snow particle system with wind and swaying motion.
Fireworks
Interactive fireworks show with particle explosions and physics.
Galaxy Generator
Procedural spiral galaxy with customizable arms and particle distribution.
Physics Simulation
Explore 2 physics simulation examples and code samples.
Materials & Textures
Explore 2 materials & textures 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
Immersive grass field with advanced wind simulation, realistic blade shapes, natural color variation, and interactive camera controls.
Post-Processing
Explore 10 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.
Audio Visualization
Explore 2 audio visualization examples and code samples.
Music Visualizer
Real-time frequency spectrum visualization with interactive audio controls.
Audio Reactive Particles
Dynamic particle system that responds to audio frequency analysis with explosions, color changes, and movement based on bass, mid, and treble ranges.
WebGL Techniques
Explore 1 webgl techniques examples and code samples.
Scientific & Educational
Explore 1 scientific & educational examples and code samples.
Data Visualization
Explore 2 data visualization examples and code samples.
3D Bar Chart
Interactive 3D bar chart with multiple datasets, animations, and hover effects.
Interactive 3D Globe with Geographic Data Pins
Stunning Three.js 3D globe visualization with animated location pins marking major world cities. Features realistic globe rendering, latitude/longitude grid lines, auto-rotation, and customizable pins for geographic data visualization and interactive mapping.
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.