Edu · Three.js

What actually reaches the screen.

The screen is the only real thing — a grid of pixels. The 3D world, the camera, the frustum: all of it is a coordinate construct whose only job is to decide what color each pixel becomes. This tool lets you watch that decision happen.

The screen never moves — it's the fixed canvas. Everything else is a construct hanging in front of it. Drag a pot or the center of projection directly to move it (or use the sliders); drag empty space to orbit; scroll or pinch to zoom. Four sightlines per object trace its top, bottom, left, and right edges to where they land on the screen. The panel docks to the side on a wide screen, below on a phone.

The journey of a vertex

Every corner of every pot takes the same trip each frame — and it's pure arithmetic, finished before a single pixel is painted. Nothing is ever drawn "flat" and then bent; the perspective is baked into each point up front, and only then is the triangle between the points filled in.

The divide marked ÷w is the actual perspective — dividing each point by its own depth is what makes far things small. And the final Y-flip is the whole reason browser pixels count down from the top-left while three.js units count up from the center: it happens once, at the very last step.

Try it: follow one sightline from the center of projection to the dot it strikes on the screen. That convergence is the projection — drawn, not asserted.

Move the camera, or move the world?

Under the hood there's no camera that moves — the renderer puts the camera at the origin and transforms everything else to suit. That's why moving the camera one way and moving the entire world the opposite way produce identical pixels: the view step is literally the inverse of the camera's placement, applied to all geometry.

But "the whole world" is the catch. Moving the camera moves everything together. Moving a single object moves only it. That gap is the difference between a view transform and a model transform — which is exactly why there are two pots.

Try it: nudge camX — both pots slide across the screen together. Now nudge the amphora's posX — only the amphora moves. Same kind of motion, completely different meaning.

Zoom is the lens moving; clipping is real

With the screen pinned, the only way to change fov is to move the center of projection toward or away from it — that distance is the focal length. Wide fov pulls the apex in close and gathers a wide cone of the world onto the same screen (everything looks smaller); telephoto pushes it far away. The near and far values are clip walls: anything past them is genuinely cut away, not just hidden. By default near sits right at the screen, so everything you see is behind it — pull near inward and objects between the lens and the screen pop into view.

Try it: change fov and watch the apex slide along the axis — that's a zoom lens. Then pull far inward until a pot loses its back to the clip plane.

What each control does

width / height: The canvas size in pixels. Their ratio sets the screen's shape (the aspect); the projection stretches horizontally to match so the image isn't distorted.
fov: Vertical field of view in degrees — i.e. the focal length. Larger = wider cone, more world gathered onto the screen, smaller subjects.
near / far: The clip walls. Geometry nearer than near or beyond far is removed before anything is drawn.
camera.position · camera.lookAt: The view. Together they place the whole world relative to the camera; editing them slides and turns everything at once.
teapot / amphora · position, scale: Per-object transforms. These move or resize one pot, leaving the rest of the world where it was.

Why a teapot and an amphora

The teapot is the Utah teapot, modeled by Martin Newell in 1975 and ever since the unofficial mascot of computer graphics — the "hello, world" of 3D. The amphora is built with a lathe: a 2D profile spun around an axis, which is exactly how a potter throws a vessel on a wheel. Two ways of making a pot, one fixed screen to land them on.