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

<div class="gls-wrap">
  <canvas id="glsCanvas"></canvas>
  <div class="gls-hint">Drag to orbit · Ctrl/Cmd + scroll to zoom</div>
  <div class="gls-zoom">
    <span class="gls-zoom-label">+</span>
    <input type="range" id="glsZoom" class="gls-zoom-slider" min="0" max="100" step="1" />
    <span class="gls-zoom-label">&minus;</span>
  </div>
  <div class="gls-presets" id="glsPresets">
    <button class="gls-preset active" data-preset="studio">Studio</button>
    <button class="gls-preset" data-preset="sunset">Sunset</button>
    <button class="gls-preset" data-preset="dramatic">Dramatic</button>
    <button class="gls-preset" data-preset="noir">Noir</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0a0b12;color:#fff;padding:24px}
.gls-wrap{position:relative;width:min(760px,94vw);height:min(540px,80vh);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);transition:background 1s}
#glsCanvas{display:block;width:100%;height:100%;cursor:grab}
#glsCanvas:active{cursor:grabbing}
.gls-hint{position:absolute;top:18px;left:18px;font-size:11.5px;font-weight:600;color:#e2e8f0;background:rgba(10,12,20,.5);padding:7px 14px;border-radius:999px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1)}
.gls-zoom{position:absolute;right:18px;top:18px;bottom:74px;width:32px;display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(10,12,20,.5);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 0;backdrop-filter:blur(6px)}
.gls-zoom-label{font-size:12px;font-weight:700;color:#e2e8f0;line-height:1;user-select:none}
.gls-zoom-slider{flex:1;width:6px;-webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;accent-color:#fbbf24;cursor:pointer}
.gls-presets{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;background:rgba(10,12,20,.55);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px;backdrop-filter:blur(8px)}
.gls-preset{padding:8px 16px;border-radius:999px;border:none;background:transparent;color:#cbd5e1;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.gls-preset.active{background:rgba(255,255,255,.14);color:#fff}
.gls-preset:hover{color:#fff}

const wrap = document.querySelector('.gls-wrap');
const canvas = document.getElementById('glsCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 50);
camera.position.set(1.9, 1.0, 3.2);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.target.set(0, 0.1, 0);
controls.minDistance = 1.6;
controls.maxDistance = 8;

// OrbitControls' own wheel-zoom is turned off on purpose: left on, it calls
// preventDefault() on every wheel event over the canvas, which would block
// normal page scrolling around this card. Zoom is reimplemented below as an
// explicit, opt-in gesture (a slider, and Ctrl/Cmd + scroll) instead.
controls.enableZoom = false;

const zoomSlider = document.getElementById('glsZoom');

function setZoomDistance(distance) {
  const clamped = THREE.MathUtils.clamp(distance, controls.minDistance, controls.maxDistance);
  const offset = camera.position.clone().sub(controls.target);
  offset.setLength(clamped || 0.001);
  camera.position.copy(controls.target).add(offset);
  const t = (clamped - controls.minDistance) / (controls.maxDistance - controls.minDistance);
  zoomSlider.value = String(Math.round((1 - t) * 100));
}

setZoomDistance(camera.position.distanceTo(controls.target));

zoomSlider.addEventListener('input', () => {
  const t = 1 - Number(zoomSlider.value) / 100;
  setZoomDistance(controls.minDistance + t * (controls.maxDistance - controls.minDistance));
});

canvas.addEventListener('wheel', (e) => {
  if (!e.ctrlKey && !e.metaKey) return; // plain scroll always passes through to the page
  e.preventDefault();
  const current = camera.position.distanceTo(controls.target);
  setZoomDistance(current + e.deltaY * 0.01);
}, { passive: false });

// Every light is built once and simply re-tuned by each preset, rather
// than being torn down and rebuilt — swapping intensities and colors on
// existing THREE.Light objects is cheap and keeps the transition logic
// in one place.
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
const keyLight = new THREE.DirectionalLight(0xffffff, 1.8);
keyLight.position.set(4, 6, 5);
scene.add(keyLight);
const fillLight = new THREE.DirectionalLight(0xffffff, 0.5);
fillLight.position.set(-5, 2, 3);
scene.add(fillLight);
const rimLight = new THREE.PointLight(0xffffff, 1.2, 20);
rimLight.position.set(-2, 2, -4);
scene.add(rimLight);

const ground = new THREE.Mesh(
  new THREE.CircleGeometry(3, 44),
  new THREE.MeshStandardMaterial({ color: 0x14161f, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -0.85;
scene.add(ground);

// Four lighting presets, each a full recipe of ambient/key/fill/rim colors,
// intensities, and a background wash — swapping between them is a
// deliberate art-direction exercise, not just a brightness slider.
const PRESETS = {
  studio: {
    bg: 'radial-gradient(60% 60% at 50% 42%,#1c1f2b,#0a0b12)',
    ambient: [0xffffff, 0.5],
    key: [0xffffff, 1.8],
    fill: [0x93c5fd, 0.5],
    rim: [0xffffff, 1.2],
  },
  sunset: {
    bg: 'radial-gradient(70% 70% at 50% 70%,#4a2a1c,#150a08)',
    ambient: [0xff9a5c, 0.45],
    key: [0xffb066, 2.1],
    fill: [0xff6f61, 0.4],
    rim: [0xffd27a, 1.4],
  },
  dramatic: {
    bg: 'radial-gradient(45% 45% at 60% 35%,#141414,#020202)',
    ambient: [0x223344, 0.15],
    key: [0xffffff, 3.2],
    fill: [0x1e293b, 0.08],
    rim: [0xf43f5e, 1.6],
  },
  noir: {
    bg: 'radial-gradient(60% 60% at 50% 40%,#12151c,#04050a)',
    ambient: [0x334155, 0.25],
    key: [0xcbd5e1, 1.3],
    fill: [0x475569, 0.3],
    rim: [0x60a5fa, 1.1],
  },
};

function applyPreset(name) {
  const p = PRESETS[name];
  wrap.style.background = p.bg;
  ambient.color.set(p.ambient[0]); ambient.intensity = p.ambient[1];
  keyLight.color.set(p.key[0]); keyLight.intensity = p.key[1];
  fillLight.color.set(p.fill[0]); fillLight.intensity = p.fill[1];
  rimLight.color.set(p.rim[0]); rimLight.intensity = p.rim[1];
}

applyPreset('studio');

document.querySelectorAll('.gls-preset').forEach((btn) => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.gls-preset').forEach((b) => b.classList.remove('active'));
    btn.classList.add('active');
    applyPreset(btn.dataset.preset);
  });
});

// Khronos' official sample-asset "Damaged Helmet" — a real, freely-licensed
// .glb with genuine PBR materials, chosen specifically because a lighting
// study is only worth doing on a model with real metal/roughness variation
// to catch and reflect each preset's light differently.
const MODEL_URL = 'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb';

const loader = new THREE.GLTFLoader();
loader.load(
  MODEL_URL,
  (gltf) => {
    const model = gltf.scene;
    // Auto-fit rather than a hardcoded scale factor: different .glb exports
    // (and loader versions) can decode the same source asset at wildly
    // different raw sizes, so measuring the loaded geometry and scaling it
    // to a known target height is far more reliable than guessing a number.
    const box = new THREE.Box3().setFromObject(model);
    const size = box.getSize(new THREE.Vector3());
    const maxDim = Math.max(size.x, size.y, size.z) || 1;
    model.scale.setScalar(1.8 / maxDim);
    const fitted = new THREE.Box3().setFromObject(model);
    model.position.y += -0.85 - fitted.min.y;
    scene.add(model);
  },
  undefined,
  (err) => {
    // Honest failure state: if the CDN model can't load, swap in a simple
    // placeholder so the lighting presets still have something real to
    // demonstrate on.
    console.error('GLB failed to load, showing a placeholder instead:', err);
    const placeholder = new THREE.Mesh(
      new THREE.IcosahedronGeometry(1, 1),
      new THREE.MeshStandardMaterial({ color: 0xcbd5e1, roughness: 0.35, metalness: 0.6 })
    );
    scene.add(placeholder);
  }
);

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();