GLB Lighting Studio Viewer — Free Three.js glTF Lighting Preset Snippet

A single fixed lighting setup only ever shows one mood. This snippet loads a real, PBR-textured .glb model and gives it four complete lighting *recipes* to switch between — Studio, Sunset, Dramatic, and Noir — each one a coordinated change to every light's color and intensity plus the surrounding background wash, so the same physical geometry and materials can read as a clean product shot, a golden-hour scene, a high-contrast hero shot, or a moody character study.

One set of lights, retuned — not rebuilt

Rather than destroying and recreating light objects per preset (expensive, and a common source of memory leaks in longer-lived scenes), the four THREE.Light instances — ambient, keyLight, fillLight, rimLight — are created exactly once. applyPreset() simply calls .color.set() and reassigns .intensity on each existing light. Every preset switch is just property mutation on the same four objects, which is instant and leaves nothing to garbage-collect.

A recipe, not a slider

Each entry in the PRESETS object is a small, self-contained object holding a [color, intensity] pair for every light plus a CSS background gradient string — real art direction, not one shared brightness knob. Sunset warms every light's hue and pushes the ambient and key warmer; Dramatic drops ambient and fill almost to zero while cranking the key light hard, producing real chiaroscuro; Noir desaturates everything toward cool grays and blues. Because every preset sets *all four* lights explicitly, switching between any two presets in either order always produces a fully correct result — there's no residual state left over from whichever preset was active before.

A real PBR model to catch the difference

The loaded Damaged Helmet sample asset has genuine metalness/roughness texture variation across its surface — a lighting study is only worth doing on a model whose materials actually respond differently to changing key/fill/rim balance, unlike a flat-colored placeholder.

The background changes too, not just the lights

Each preset also sets a CSS radial-gradient on the wrapper element behind the transparent-alpha canvas, with a 1-second CSS transition already declared on that property — so switching from Studio's cool blue-black to Sunset's warm amber backdrop reads as one coordinated scene change, not just a lighting tweak floating in an unrelated background.

Zoom is opt-in, not a hijacked scroll wheel

OrbitControls' built-in wheel-zoom is turned off, with zoom reimplemented as a slider plus Ctrl/Cmd + scroll, so a plain scroll over the card always scrolls the page.

Customizing it

Add a fifth preset by extending the PRESETS object with a new [color, intensity] recipe, swap MODEL_URL for any other PBR-textured .glb, or pair this with GLB wireframe/solid toggle viewer for a combined material-and-lighting study tool.