GLB Exploded View Assembly Toggle — Free Three.js glTF Snippet

<div class="gxv-wrap">
  <canvas id="gxvCanvas"></canvas>
  <div class="gxv-hint">Drag to orbit · Ctrl/Cmd + scroll to zoom</div>
  <div class="gxv-zoom">
    <span class="gxv-zoom-label">+</span>
    <input type="range" id="gxvZoom" class="gxv-zoom-slider" min="0" max="100" step="1" />
    <span class="gxv-zoom-label">&minus;</span>
  </div>
  <div class="gxv-panel">
    <div class="gxv-panel-title">Assembly</div>
    <input type="range" id="gxvExplode" class="gxv-explode-slider" min="0" max="100" step="1" value="0" />
    <div class="gxv-panel-row">
      <span id="gxvExplodeLabel">Collapsed</span>
      <span id="gxvPartCount">&hellip; parts</span>
    </div>
    <button id="gxvAutoBtn" class="gxv-auto-btn">Animate explode</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}
.gxv-wrap{position:relative;width:min(760px,94vw);height:min(540px,80vh);border-radius:20px;overflow:hidden;background:radial-gradient(60% 60% at 50% 42%,#181c28,#0a0b12);border:1px solid rgba(255,255,255,.08)}
#gxvCanvas{display:block;width:100%;height:100%;cursor:grab}
#gxvCanvas:active{cursor:grabbing}
.gxv-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)}
.gxv-zoom{position:absolute;right:18px;top:64px;bottom:150px;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)}
.gxv-zoom-label{font-size:12px;font-weight:700;color:#b7c0da;line-height:1;user-select:none}
.gxv-zoom-slider{flex:1;width:6px;-webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;accent-color:#38bdf8;cursor:pointer}
.gxv-panel{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(10,12,20,.65);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;backdrop-filter:blur(10px)}
.gxv-panel-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b93ad;margin-bottom:8px}
.gxv-explode-slider{width:100%;accent-color:#38bdf8;cursor:pointer}
.gxv-panel-row{display:flex;justify-content:space-between;font-size:12px;color:#cbd5e1;margin-top:6px}
.gxv-auto-btn{margin-top:12px;width:100%;padding:9px;border-radius:9px;border:1px solid rgba(56,189,248,.4);background:rgba(56,189,248,.15);color:#bae6fd;font-size:12.5px;font-weight:700;cursor:pointer}
.gxv-auto-btn:hover{background:rgba(56,189,248,.25)}

const canvas = document.getElementById('gxvCanvas');
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(42, 1, 0.1, 50);
camera.position.set(1.8, 1.3, 3.2);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.target.set(0, 0.2, 0);
controls.minDistance = 1.5;
controls.maxDistance = 9;

// 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('gxvZoom');

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.8);
key.position.set(4, 6, 5);
scene.add(key);
const fill = new THREE.DirectionalLight(0x93c5fd, 0.5);
fill.position.set(-5, 2, 3);
scene.add(fill);

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

// Every direct part of the loaded assembly, captured with its original
// local position so the explode amount can always be reapplied from a
// stable baseline instead of drifting after repeated slider moves.
const parts = [];
let assemblyCenter = new THREE.Vector3();
const explodeLabel = document.getElementById('gxvExplodeLabel');
const partCountLabel = document.getElementById('gxvPartCount');

// Khronos' official sample-asset "Antique Camera" — a real, freely-licensed
// .glb made of multiple distinct mesh parts (body, lens, dials, strap
// loops), chosen specifically because an exploded view is only interesting
// on a model that actually has separable pieces.
const MODEL_URL = 'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/AntiqueCamera/glTF-Binary/AntiqueCamera.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.7 / maxDim);
    const fitted = new THREE.Box3().setFromObject(model);
    model.position.y += -0.9 - fitted.min.y;
    scene.add(model);

    // Flatten every mesh node found anywhere in the loaded hierarchy into a
    // flat parts list, each keeping its own original local position and a
    // per-part outward direction computed from the assembly's own center —
    // this works for any glTF's node structure, not just a specific model.
    const meshNodes = [];
    model.traverse((node) => {
      if (node.isMesh) meshNodes.push(node);
    });

    const overallBox = new THREE.Box3().setFromObject(model);
    overallBox.getCenter(assemblyCenter);

    meshNodes.forEach((node) => {
      const worldPos = new THREE.Vector3();
      node.getWorldPosition(worldPos);
      const direction = worldPos.clone().sub(assemblyCenter);
      if (direction.lengthSq() < 0.0001) direction.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5);
      direction.normalize();
      parts.push({ node, originalPosition: node.position.clone(), direction });
    });

    partCountLabel.textContent = parts.length + (parts.length === 1 ? ' part' : ' parts');
    applyExplode(0);
  },
  undefined,
  (err) => {
    // Honest failure state: if the CDN model can't load, swap in a small
    // multi-part placeholder assembly so the explode control still has
    // something real to act on.
    console.error('GLB failed to load, showing a placeholder instead:', err);
    const placeholderGroup = new THREE.Group();
    const geometries = [new THREE.BoxGeometry(0.6, 0.6, 0.6), new THREE.SphereGeometry(0.35, 16, 16), new THREE.ConeGeometry(0.3, 0.6, 12)];
    geometries.forEach((geo, i) => {
      const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: 0x38bdf8, roughness: 0.5 }));
      mesh.position.set((i - 1) * 0.4, 0, 0);
      placeholderGroup.add(mesh);
      parts.push({ node: mesh, originalPosition: mesh.position.clone(), direction: new THREE.Vector3(i - 1 || 1, 0.3, 0).normalize() });
    });
    placeholderGroup.position.y = -0.3;
    scene.add(placeholderGroup);
    partCountLabel.textContent = parts.length + ' parts';
    applyExplode(0);
  }
);

// Continuous, reversible: each part's position is always recomputed from
// its captured original position plus its own outward direction scaled by
// the current explode amount, never accumulated frame over frame.
const MAX_OFFSET = 1.1;

function applyExplode(amount01) {
  parts.forEach((p) => {
    p.node.position.copy(p.originalPosition).addScaledVector(p.direction, amount01 * MAX_OFFSET);
  });
  explodeLabel.textContent = amount01 < 0.02 ? 'Collapsed' : amount01 > 0.98 ? 'Fully exploded' : Math.round(amount01 * 100) + '% exploded';
}

const explodeSlider = document.getElementById('gxvExplode');
explodeSlider.addEventListener('input', () => {
  applyExplode(Number(explodeSlider.value) / 100);
});

let autoPlaying = false;
let autoDirection = 1;
const autoBtn = document.getElementById('gxvAutoBtn');
autoBtn.addEventListener('click', () => {
  autoPlaying = !autoPlaying;
  autoBtn.textContent = autoPlaying ? 'Stop animation' : 'Animate explode';
  autoBtn.classList.toggle('active', autoPlaying);
});

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

function animate() {
  requestAnimationFrame(animate);
  if (autoPlaying) {
    let next = Number(explodeSlider.value) + autoDirection * 0.8;
    if (next >= 100) { next = 100; autoDirection = -1; }
    if (next <= 0) { next = 0; autoDirection = 1; }
    explodeSlider.value = String(next);
    applyExplode(next / 100);
  }
  controls.update();
  renderer.render(scene, camera);
}

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