<div class="gmc-wrap">
  <div class="gmc-toolbar">
    <label class="gmc-sync"><input type="checkbox" id="gmcSync" checked /> Sync orbit</label>
    <div class="gmc-hint">Drag either pane to orbit · Ctrl/Cmd + scroll to zoom</div>
  </div>
  <div class="gmc-panes">
    <div class="gmc-pane">
      <canvas id="gmcCanvasA"></canvas>
      <div class="gmc-label">Duck <span id="gmcTrisA">&middot; &hellip; tris</span></div>
      <div class="gmc-zoom">
        <input type="range" id="gmcZoomA" class="gmc-zoom-slider" min="0" max="100" step="1" />
      </div>
    </div>
    <div class="gmc-divider"></div>
    <div class="gmc-pane">
      <canvas id="gmcCanvasB"></canvas>
      <div class="gmc-label">Antique Camera <span id="gmcTrisB">&middot; &hellip; tris</span></div>
      <div class="gmc-zoom">
        <input type="range" id="gmcZoomB" class="gmc-zoom-slider" min="0" max="100" step="1" />
      </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}
.gmc-wrap{width:min(940px,96vw)}
.gmc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.gmc-sync{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#cbd5e1;cursor:pointer;user-select:none}
.gmc-sync input{accent-color:#818cf8;width:15px;height:15px;cursor:pointer}
.gmc-hint{font-size:11.5px;color:#8b93ad}
.gmc-panes{display:grid;grid-template-columns:1fr auto 1fr;gap:0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.gmc-divider{width:1px;background:rgba(255,255,255,.1)}
.gmc-pane{position:relative;height:380px;background:radial-gradient(60% 60% at 50% 42%,#181c28,#0a0b12)}
.gmc-pane canvas{display:block;width:100%;height:100%;cursor:grab}
.gmc-pane canvas:active{cursor:grabbing}
.gmc-label{position:absolute;top:14px;left:14px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(10,12,20,.6);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1)}
.gmc-label span{font-weight:500;color:#9aa0b8}
.gmc-zoom{position:absolute;right:12px;bottom:12px;top:12px;width:24px;display:flex;align-items:center}
.gmc-zoom-slider{width:100%;-webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;accent-color:#818cf8;cursor:pointer}
@media (max-width:700px){.gmc-panes{grid-template-columns:1fr}.gmc-divider{width:100%;height:1px}}

const renderer = { A: null, B: null };
const scene = { A: new THREE.Scene(), B: new THREE.Scene() };
const camera = {
  A: new THREE.PerspectiveCamera(42, 1, 0.1, 50),
  B: new THREE.PerspectiveCamera(42, 1, 0.1, 50),
};
const controls = {};
const canvasEl = {
  A: document.getElementById('gmcCanvasA'),
  B: document.getElementById('gmcCanvasB'),
};
const trisLabel = { A: document.getElementById('gmcTrisA'), B: document.getElementById('gmcTrisB') };
const zoomSlider = { A: document.getElementById('gmcZoomA'), B: document.getElementById('gmcZoomB') };
const syncBox = document.getElementById('gmcSync');

const MIN_DIST = 1.6;
const MAX_DIST = 8;

['A', 'B'].forEach((key) => {
  renderer[key] = new THREE.WebGLRenderer({ canvas: canvasEl[key], antialias: true, alpha: true });
  renderer[key].setPixelRatio(Math.min(window.devicePixelRatio, 2));
  camera[key].position.set(1.4, 1.0, 3.0);

  const c = new THREE.OrbitControls(camera[key], canvasEl[key]);
  c.enableDamping = true;
  c.dampingFactor = 0.08;
  c.target.set(0, 0.2, 0);
  c.minDistance = MIN_DIST;
  c.maxDistance = MAX_DIST;
  // 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 instead.
  c.enableZoom = false;
  controls[key] = c;

  scene[key].add(new THREE.AmbientLight(0x445066, 0.7));
  const key1 = new THREE.DirectionalLight(0xffffff, 1.7);
  key1.position.set(4, 6, 5);
  scene[key].add(key1);
  const fill = new THREE.DirectionalLight(0x93c5fd, 0.5);
  fill.position.set(-5, 2, 3);
  scene[key].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.85;
  scene[key].add(ground);
});

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

['A', 'B'].forEach((key) => {
  setZoomDistance(key, camera[key].position.distanceTo(controls[key].target));
  zoomSlider[key].addEventListener('input', () => {
    const t = 1 - Number(zoomSlider[key].value) / 100;
    setZoomDistance(key, controls[key].minDistance + t * (controls[key].maxDistance - controls[key].minDistance));
  });
  canvasEl[key].addEventListener('wheel', (e) => {
    if (!e.ctrlKey && !e.metaKey) return; // plain scroll always passes through to the page
    e.preventDefault();
    const current = camera[key].position.distanceTo(controls[key].target);
    setZoomDistance(key, current + e.deltaY * 0.01);
  }, { passive: false });
});

// When "Sync orbit" is checked, dragging either pane mirrors its azimuthal
// and polar angle onto the other pane's controls every frame, so both
// models can be inspected from the same relative viewpoint at once.
function mirrorOrbit(from, to) {
  if (!syncBox.checked) return;
  const cf = controls[from], ct = controls[to];
  const spherical = new THREE.Spherical().setFromVector3(camera[from].position.clone().sub(cf.target));
  const targetSpherical = new THREE.Spherical(
    camera[to].position.distanceTo(ct.target),
    spherical.phi,
    spherical.theta
  );
  const offset = new THREE.Vector3().setFromSpherical(targetSpherical);
  camera[to].position.copy(ct.target).add(offset);
}

controls.A.addEventListener('change', () => mirrorOrbit('A', 'B'));
controls.B.addEventListener('change', () => mirrorOrbit('B', 'A'));

function loadModel(key, url, targetHeight, placeholderGeometry, placeholderColor) {
  const loader = new THREE.GLTFLoader();
  loader.load(
    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 magic number ahead of time.
      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(targetHeight / maxDim);
      const fitted = new THREE.Box3().setFromObject(model);
      model.position.y += -0.85 - fitted.min.y;
      scene[key].add(model);

      let triCount = 0;
      model.traverse((node) => {
        if (node.isMesh && node.geometry) {
          const geo = node.geometry;
          triCount += geo.index ? geo.index.count / 3 : geo.attributes.position.count / 3;
        }
      });
      trisLabel[key].textContent = '\u00b7 ' + Math.round(triCount).toLocaleString() + ' tris';
    },
    undefined,
    (err) => {
      // Honest failure state: if the CDN model can't load, swap in a simple
      // placeholder so the pane is never just an empty void.
      console.error('GLB failed to load for pane ' + key + ', showing a placeholder instead:', err);
      const placeholder = new THREE.Mesh(
        placeholderGeometry,
        new THREE.MeshStandardMaterial({ color: placeholderColor, roughness: 0.5 })
      );
      placeholder.position.y = -0.2;
      scene[key].add(placeholder);
      trisLabel[key].textContent = '\u00b7 load failed';
    }
  );
}

// Two real, freely-licensed sample .glb files from Khronos' official glTF
// sample-asset repository, compared side by side in independent scenes.
loadModel('A', 'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/Duck/glTF-Binary/Duck.glb', 1.6, new THREE.SphereGeometry(0.8, 24, 24), 0xfacc15);
loadModel('B', 'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/AntiqueCamera/glTF-Binary/AntiqueCamera.glb', 1.6, new THREE.BoxGeometry(1, 1, 1), 0xa78bfa);

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

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

function resizeAll() {
  resize('A');
  resize('B');
}

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