GSAP Motion Lab

Collection 10

Three.js Camera Effects

Twenty-four camera behaviours rendered with Three.js through React Three Fiber, with Drei supplying the camera, control, shake and image-plane helpers and React Postprocessing contributing exactly two restrained passes — a bloom-and-vignette finish on the cinematic arc and a vignette at the portal threshold. Each demo frames a real photograph served from this site's own public folder, mounted on an image plane inside a lit frame, with primitive geometry — a floor, a block skyline, corridor panels — giving the camera something to move against so translation and rotation read as movement. A standard JPG is still a flat plane: moving the camera changes framing, perspective and the photograph's relationship to the geometry around it, but it cannot create parallax inside the photograph, because an ordinary image carries no per-pixel depth. True within-image depth would need a supplied depth map driving a displacement, and no such asset is used here. No external models, no remote textures, no generated textures and no user-authored shaders. Twenty-four live WebGL contexts would exhaust the browser's limit, so a canvas is mounted only while its card is near the viewport and unmounted when it leaves, device pixel ratio is capped, and every canvas renders on demand rather than looping — only orbit, auto-rotate and shake run continuously, and only while visible. Where WebGL is unavailable each demo falls back to the same photograph as ordinary HTML with real alt text, carrying the same title, explanation and camera-state readout, and under reduced motion no loop, pointer listener, scroll handler, orientation listener or auto-rotation is created at all.

24 examples