Three.js Interactive Guide

Hands-on 3D demos for every concept. Click, drag, and tweak parameters in real-time.

37

Live Demos

57

Coming Soon

▼ Explore Demos ← Visual Guide ☕ Buy Me a Coffee

Follow for More

△

Geometry

1 demo

primitives

Geometry primitives.html

Geometry Primitives

All built-in shapes: box, sphere, torus, cylinder, cone, and more. Tweak segments and parameters.

✨

Materials

1 demo

all-materials

Material all-materials.html

Side-by-side comparison of every material type: Basic, Lambert, Phong, Standard, Physical, Toon, and more.

💡

Lights

1 demo

all-lights

Lights all-lights.html

All Light Types

Ambient, directional, point, spot, hemisphere, and area lights. Toggle each and adjust intensity, color, range.

📦

Objects

1 demo

scene-graph

Objects scene-graph.html

Visualize parent-child relationships. See how transforms cascade through the hierarchy.

🎥

Cameras

4 demos

perspective

Camera perspective.html

Perspective Camera

Adjust FOV, near/far planes, and aspect ratio. See how perspective distortion changes in real-time.

orthographic

Camera orthographic.html

Orthographic Camera

No perspective foreshortening. Tweak frustum bounds for 2D-style and isometric views.

cube

Camera cube.html

Six-face rendering for dynamic reflections. Watch environment maps update per frame.

stereo

Camera stereo.html

Side-by-side rendering for VR and anaglyph 3D. Adjust eye separation in real-time.

🖼

Textures

8 demos

basics-uv

Texture basics-uv.html

Texture Basics & UV

UV mapping fundamentals. See how 2D images wrap onto 3D surfaces with offset, repeat, and rotation.

normal-maps

Texture normal-maps.html

Fake surface detail without extra geometry. Adjust normal scale and watch lighting react to bumps.

pbr-set

Texture pbr-set.html

PBR Texture Set

Albedo, roughness, metalness, normal, AO - all PBR maps working together for photorealistic rendering.

cubetexture-skybox

Texture cubetexture-skybox.html

CubeTexture Skybox

360-degree environment backgrounds using six cube faces. Orbit to explore the skybox panorama.

video

Texture video.html

Map live video feeds onto 3D surfaces. Play, pause, and see frames update per tick.

data

Texture data.html

Generate textures from raw pixel data. Write RGBA bytes directly for procedural patterns and effects.

hdr

Texture hdr.html

HDR Environment

High dynamic range lighting with .hdr image-based illumination. Realistic reflections and ambient light.

compressed

Texture compressed.html

Compressed Textures

GPU-native formats like KTX2, ASTC, and S3TC. Compare file size, VRAM usage, and quality trade-offs.

🎬

Renderer

3 demos

shadow-types

Renderer shadow-types.html

Compare Basic, PCF, PCFSoft, and VSM shadow maps. Adjust bias, resolution, and blur radius.

env-mapping

Renderer env-mapping.html

Environment Mapping

Reflection and refraction using environment maps. Switch between cube and equirectangular sources.

tone-mapping

Renderer tone-mapping.html

Map HDR values to screen. Compare Linear, Reinhard, Cineon, ACES, and AgX tone mappers side by side.

anti-aliasing

RendererNEWanti-aliasing.html

Compare aliased vs anti-aliased rendering. Zoom in to see edge quality differences.

render-targets

RendererNEWrender-targets.html

Render a scene to a texture and display it on a screen in another scene.

webgl-vs-webgpu

RendererNEWwebgl-vs-webgpu.html

WebGL vs WebGPU

Side-by-side comparison of WebGL 2 and WebGPU renderers with identical scenes.

compute-shaders

RendererNEWcompute-shaders.html

Compute Shaders

200K GPU-driven particles via TSL compute shaders. Requires WebGPU.

render-pipeline

RendererNEWrender-pipeline.html

Render Pipeline

Step through the GPU render pipeline: vertices, wireframe, rasterized, shaded, final.

array

CamerasNEWarray.html

Multi-viewport grid rendering with configurable FOV and camera spread.

08

Post-Processing

Screen-space effects applied after the main render pass

effect-composer

Post-FXNEWeffect-composer.html

Effect Composer

Chain multiple post-processing passes: bloom, film grain, and dot screen with toggles.

bloom

Post-FXNEWbloom.html

Selective bloom with emissive materials. Tune threshold, strength, and radius.

ssao

Post-FXNEWssao.html

Screen-space ambient occlusion. Toggle output modes and adjust radius.

dof

Post-FXNEWdof.html

Cinematic bokeh blur with focus depth indicator and fine-grained aperture control.

film-grain

Post-FXNEWfilm-grain.html

Analog film grain noise overlay with adjustable intensity.

glitch

Post-FXNEWglitch.html

Digital glitch effects with per-effect toggles and parameter sliders.

outline

Post-FXNEWoutline.html

Object outline highlighting with hover and click interaction.

color-grading

Post-FXNEWcolor-grading.html

Cinematic color grading with presets: None, Cinematic, Warm, Cool, Vintage.

motion-blur

Post-FXNEWmotion-blur.html

Per-object motion blur based on velocity vectors.

god-rays

Post-FXNEWgod-rays.html

Volumetric light shafts with atmospheric haze and floating dust particles.

chromatic-aberration

Post-FXNEWchromatic-aberration.html

Chromatic Aberration

RGB channel separation simulating lens imperfection.

Post-FXNEWpixel-retro.html

Quad split: clean, pixelated, scanlines, and full CRT effect comparison.

57 More Demos Coming Soon

See the Visual Guide for all 96 illustrated breakdowns while we build the interactive versions.

🖱 Controls Soon

🌐 Node / TSL Soon

🎬 Animation Soon

🔊 Audio Soon

🔮 Special Soon

📦 Loaders Soon

⚙ Physics Soon

🔧 Helpers Soon

🛠 Curves Soon

🔢 Math Soon