Three.js Interactive Guide — Learn 3D Web Graphics

Geometry defines the shape — vertices, edges and faces. Everything is a BufferGeometry: typed arrays of vertex data sent directly to the GPU. Three.js ships 21 built-in constructors. Switch between them above and adjust parameters in real-time.

How Geometry Works

Every vertex has a position (xyz), a normal (the direction the surface faces, for lighting), and UV coordinates (for texture mapping). The index attribute tells the GPU which vertices form each triangle.

Increasing segments creates smoother shapes but higher vertex counts. A SphereGeometry(1, 8, 6) is blocky; SphereGeometry(1, 64, 32) is smooth. Use the sliders above to feel the difference.

Beyond parametric shapes, Three.js offers path-based geometries: LatheGeometry revolves a profile around an axis, TubeGeometry wraps a tube along a 3D curve, ExtrudeGeometry pushes a 2D shape into 3D with bevels, and ShapeGeometry renders flat 2D outlines. Try them in the explorer above.

Materials control appearance — colour, shininess, transparency, and light response. From the zero-cost MeshBasicMaterial to the photorealistic MeshPhysicalMaterial with clearcoat, transmission, and iridescence.

Material Hierarchy

MeshBasicMaterial ignores light entirely — flat colour, cheapest to render. MeshLambertMaterial uses per-vertex diffuse lighting, good for matte surfaces. MeshPhongMaterial adds specular highlights (per-fragment).

MeshStandardMaterial is PBR (physically based rendering) with roughness and metalness. MeshPhysicalMaterial extends it with clearcoat, transmission, iridescence, and sheen.

The camera defines how 3D is projected to 2D. PerspectiveCamera mimics human vision — farther objects shrink. OrthographicCamera keeps all sizes equal. Click the presets above to see how real games use different camera setups — from first-person shooters to isometric strategy games.

Perspective vs Orthographic

PerspectiveCamera takes four parameters: fov (vertical field of view, degrees), aspect (canvas ratio), near and far clipping planes. A FOV of 30 looks telephoto; 75 is standard FPS; 120+ gives ultra-wide fisheye.

OrthographicCamera uses left, right, top, bottom, near, far — defining a box frustum with no perspective. Objects stay the same screen size regardless of distance. Used for isometric games, CAD views, and shadow map cameras.

Lighting makes a 3D scene feel real. Three.js has 7 light types — from AmbientLight that fills everything evenly to SpotLight casting dramatic cones with shadows. Toggle each light type and drag the position to see how it changes the scene.

Choosing the Right Light

DirectionalLight emits parallel rays like the sun — ideal for outdoor scenes. PointLight radiates in all directions from a single position, like a bulb. SpotLight creates a cone beam with soft penumbra edges, perfect for dramatic accents.

HemisphereLight uses two colours (sky above, ground below) for natural outdoor ambience. A three-point setup — key, fill, rim — is the film-industry standard for making any subject look professional.

Everything in a scene is an Object3D. A Mesh combines geometry + material. InstancedMesh draws thousands of copies in one GPU call. Points renders particles. Drag the count slider to see how instancing scales to 50,000 objects at interactive frame rates.

Instancing for Performance

InstancedMesh lets you draw thousands of objects with a single draw call. Each instance can have its own transform matrix and colour, but they all share the same geometry and material. This is the key technique for particle systems, forests, crowds, and anything with many similar objects.

Controls translate user input into camera or object movement. OrbitControls is the default for model viewers. MapControls for top-down. Switch modes and adjust damping, speed, and distance limits to feel the difference.

OrbitControls Configuration

Damping adds inertia — the camera glides to a stop instead of snapping. Auto-rotate slowly orbits when idle. Set minDistance/maxDistance to prevent zooming too close or far. maxPolarAngle prevents looking under the ground.

Post-processing applies screen-space effects after the scene renders. EffectComposer chains passes together — bloom, film grain, pixelation, vignette. Toggle effects and adjust parameters live.

Building a Post-Processing Pipeline

EffectComposer replaces your normal renderer.render() call. Add a RenderPass first, then stack effects. Bloom makes bright areas glow. Pixelate downsamples for a retro look. Order matters — bloom before colour grading, always end with OutputPass.

One scene, many looks. The same tree and house rendered in completely different visual styles — each one powered by a different Three.js technique. Click a style to see it applied live and learn what code creates that look.

One Scene, Many Techniques

Every style above uses the exact same geometry — a tree, a house, and a ground plane. The only things changing are materials, camera type, and post-processing. This is the core insight of Three.js: visual style is not about modeling — it's about how you render.

Clay = one material on everything. Toon = a gradient map that quantizes light into steps. Neon = emissive + bloom. Gold = metalness 1.0 + environment map. Sunset = warm directional light + fog. Blueprint = wireframe + bloom glow.