GLB Spin-to-Reveal Stats Viewer — Free Three.js glTF Product Spec Snippet

<div class="gsr-wrap">
  <canvas id="gsrCanvas"></canvas>
  <div class="gsr-hint">Drag to spin and reveal stats · Ctrl/Cmd + scroll to zoom</div>
  <div class="gsr-zoom">
    <span class="gsr-zoom-label">+</span>
    <input type="range" id="gsrZoom" class="gsr-zoom-slider" min="0" max="100" step="1" />
    <span class="gsr-zoom-label">&minus;</span>
  </div>
  <div class="gsr-stats" id="gsrStats">
    <div class="gsr-stat" data-i="0"><div class="gsr-stat-label">Output</div><div class="gsr-stat-value">2 &times; drivers</div></div>
    <div class="gsr-stat" data-i="1"><div class="gsr-stat-label">Battery</div><div class="gsr-stat-value">10 hrs</div></div>
    <div class="gsr-stat" data-i="2"><div class="gsr-stat-label">Connectivity</div><div class="gsr-stat-value">Bluetooth 5</div></div>
    <div class="gsr-stat" data-i="3"><div class="gsr-stat-label">Build</div><div class="gsr-stat-value">Aluminum shell</div></div>
  </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}
.gsr-wrap{position:relative;width:min(720px,94vw);height:min(520px,80vh);border-radius:20px;overflow:hidden;background:radial-gradient(60% 60% at 50% 42%,#181c28,#0a0b12);border:1px solid rgba(255,255,255,.08)}
#gsrCanvas{display:block;width:100%;height:100%;cursor:grab}
#gsrCanvas:active{cursor:grabbing}
.gsr-hint{position:absolute;top:18px;left:18px;font-size:11.5px;font-weight:600;color:#b7c0da;background:rgba(10,12,20,.55);padding:7px 14px;border-radius:999px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08)}
.gsr-zoom{position:absolute;right:18px;top:18px;bottom:18px;width:32px;display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(10,12,20,.55);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:10px 0;backdrop-filter:blur(6px)}
.gsr-zoom-label{font-size:12px;font-weight:700;color:#b7c0da;line-height:1;user-select:none}
.gsr-zoom-slider{flex:1;width:6px;-webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;accent-color:#fb923c;cursor:pointer}
.gsr-stats{position:absolute;inset:0;pointer-events:none}
.gsr-stat{position:absolute;left:18px;bottom:18px;width:min(230px,55%);background:rgba(10,12,20,.7);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;backdrop-filter:blur(10px);opacity:0;transform:translateY(10px) scale(.97);transition:opacity .3s,transform .3s}
.gsr-stat.on{opacity:1;transform:translateY(0) scale(1)}
.gsr-stat-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fdba74;margin-bottom:4px}
.gsr-stat-value{font-size:16px;font-weight:700;color:#fff}

const canvas = document.getElementById('gsrCanvas');
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.6, 0.9, 2.9);

// The only thing driving camera position is OrbitControls itself — the
// "spin to reveal" interaction below reads the camera's own live orbit
// angle rather than adding a second, competing rotation system.
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.target.set(0, 0.15, 0);
controls.minDistance = 1.5;
controls.maxDistance = 7;
controls.minPolarAngle = Math.PI / 3.2;
controls.maxPolarAngle = Math.PI / 1.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('gsrZoom');

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 });

scene.add(new THREE.AmbientLight(0x445066, 0.7));
const key = new THREE.DirectionalLight(0xffffff, 1.9);
key.position.set(4, 6, 5);
scene.add(key);
const fill = new THREE.DirectionalLight(0xfb923c, 0.45);
fill.position.set(-5, 2, 3);
scene.add(fill);

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.75;
scene.add(ground);

// Each stat card is assigned an azimuthal angle around the product — the
// same angle space OrbitControls' own camera orbit already lives in — so
// "spinning to reveal" a stat means the camera's current azimuthal angle
// has to be genuinely close to that stat's own angle, not an arbitrary
// scroll or click trigger.
const STAT_ANGLES = [0, Math.PI / 2, Math.PI, -Math.PI / 2]; // front, right, back, left
const statEls = Array.from(document.querySelectorAll('.gsr-stat'));
const REVEAL_WINDOW = Math.PI / 3.2; // how close the camera must be to a stat's angle

function angleDiff(a, b) {
  let d = (a - b) % (Math.PI * 2);
  if (d > Math.PI) d -= Math.PI * 2;
  if (d < -Math.PI) d += Math.PI * 2;
  return Math.abs(d);
}

function updateRevealedStats() {
  // OrbitControls exposes the camera's current azimuthal angle around its
  // target directly, so no manual spherical-coordinate math is needed here
  // beyond comparing that live angle against each stat's assigned angle.
  const currentAzimuth = controls.getAzimuthalAngle();
  statEls.forEach((el, i) => {
    const close = angleDiff(currentAzimuth, STAT_ANGLES[i]) < REVEAL_WINDOW;
    el.classList.toggle('on', close);
  });
}

// Khronos' official sample-asset "BoomBox" — a real, freely-licensed .glb
// small, product-like, and detailed enough that spinning around it to
// reveal different real specs feels like a genuine product viewer.
const MODEL_URL = 'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/BoomBox/glTF-Binary/BoomBox.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.3 / maxDim);
    const fitted = new THREE.Box3().setFromObject(model);
    model.position.y += -0.75 - 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 spin-to-reveal interaction still has something
    // real to orbit around.
    console.error('GLB failed to load, showing a placeholder instead:', err);
    const placeholder = new THREE.Mesh(
      new THREE.BoxGeometry(1.3, 0.6, 0.6),
      new THREE.MeshStandardMaterial({ color: 0xfb923c, roughness: 0.4, metalness: 0.3 })
    );
    placeholder.position.y = -0.1;
    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();
  updateRevealedStats();
  renderer.render(scene, camera);
}

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