<bmx-model-viewer>

<bmx-model-viewer id="ex-mv" label="Camera mount" units="mm" style="--bmx-model-viewer-height: 26rem"></bmx-model-viewer>
<p class="note" id="ex-mv-out" role="status" style="margin: 12px 0 0">Drag to turn the model, right-drag to move it, scroll to zoom. Try Section, the exploded view and Measure in the toolbar; the parts list hides, isolates and selects parts.</p>

<script type="module">
  await customElements.whenDefined('bmx-model-viewer');
  const viewer = document.getElementById('ex-mv');
  const out = document.getElementById('ex-mv-out');

  // A small assembly written as OBJ here, so the page needs no model file:
  // boxes and cylinders, grouped into parts, coloured by an MTL file.
  const lines = ['mtllib mount.mtl'];
  let vertices = 0;
  let normals = 0;
  const r3 = n => Math.round(n * 1000) / 1000;
  const vertex = p => (lines.push(`v ${p.map(r3).join(' ')}`), ++vertices);
  const normal = n => (lines.push(`vn ${n.map(r3).join(' ')}`), ++normals);
  const face = (ids, n) => lines.push(`f ${ids.map((id, i) => `${id}//${Array.isArray(n) ? n[i] : n}`).join(' ')}`);
  const part = (object, group, material) => {
    if (object) lines.push(`o ${object}`);
    lines.push(`g ${group}`, `usemtl ${material}`);
  };
  const box = (c, s) => {
    const p = [];
    for (let i = 0; i < 8; i += 1) p.push(vertex([c[0] + ((i & 1 ? 1 : -1) * s[0]) / 2, c[1] + ((i & 2 ? 1 : -1) * s[1]) / 2, c[2] + ((i & 4 ? 1 : -1) * s[2]) / 2]));
    const sides = [[[0, 2, 3, 1], [0, 0, -1]], [[4, 5, 7, 6], [0, 0, 1]], [[0, 4, 6, 2], [-1, 0, 0]], [[1, 3, 7, 5], [1, 0, 0]], [[0, 1, 5, 4], [0, -1, 0]], [[2, 6, 7, 3], [0, 1, 0]]];
    for (const [ids, n] of sides) face(ids.map(i => p[i]), normal(n));
  };
  const cylinder = (axis, c, radius, length, segments) => {
    const at = (a, end) => {
      const u = Math.cos(a) * radius;
      const w = Math.sin(a) * radius;
      const t = (end * length) / 2;
      return axis === 'x' ? [c[0] + t, c[1] + u, c[2] + w] : [c[0] + u, c[1] + t, c[2] + w];
    };
    const out = a => (axis === 'x' ? [0, Math.cos(a), Math.sin(a)] : [Math.cos(a), 0, Math.sin(a)]);
    const low = [];
    const high = [];
    const ns = [];
    for (let i = 0; i < segments; i += 1) {
      const a = (i / segments) * Math.PI * 2;
      low.push(vertex(at(a, -1)));
      high.push(vertex(at(a, 1)));
      ns.push(normal(out(a)));
    }
    for (let i = 0; i < segments; i += 1) {
      const j = (i + 1) % segments;
      if (segments > 8) face([low[i], low[j], high[j], high[i]], [ns[i], ns[j], ns[j], ns[i]]);
      else face([low[i], low[j], high[j], high[i]], normal(out(((i + 0.5) / segments) * Math.PI * 2)));
    }
    const axisNormal = axis === 'x' ? [1, 0, 0] : [0, 1, 0];
    face(high, normal(axisNormal));
    face([...low].reverse(), normal(axisNormal.map(n => -n)));
  };

  part('Base', 'Base plate', 'anodised');
  box([0, 4, 0], [140, 8, 90]);
  [[-58, -33], [58, -33], [-58, 33], [58, 33]].forEach(([x, z], i) => {
    part('', `Bolt ${i + 1}`, 'steel');
    cylinder('y', [x, 11, z], 6, 6, 6);
  });
  part('Frame', 'Left upright', 'anodised');
  box([-45, 40, 0], [10, 64, 44]);
  part('', 'Right upright', 'anodised');
  box([45, 40, 0], [10, 64, 44]);
  part('Tilt head', 'Shaft', 'steel');
  cylinder('x', [0, 56, 0], 6, 116, 32);
  part('', 'Clamp', 'black');
  box([0, 56, 0], [36, 26, 34]);
  part('', 'Camera plate', 'black');
  box([0, 72, 0], [60, 6, 50]);
  part('', 'Knob', 'brass');
  cylinder('x', [64, 56, 0], 14, 10, 24);
  const mtl = 'newmtl anodised\nKd 0.2 0.42 0.74\nnewmtl steel\nKd 0.68 0.7 0.74\nnewmtl black\nKd 0.16 0.17 0.19\nnewmtl brass\nKd 0.82 0.64 0.3\n';

  viewer.addEventListener('bmxSelect', e => (out.textContent = e.detail.part ? `Selected: ${e.detail.name}.` : 'Nothing selected.'));
  viewer.addEventListener('bmxMeasure', e => (out.textContent = `Measured ${e.detail.distance.toFixed(1)} ${e.detail.units}.`));
  viewer.addEventListener('bmxChange', e => (out.textContent = `${e.detail.annotations.length} note(s) - save them as JSON with the model.`));

  await viewer.load(lines.join('\n'), { format: 'obj', name: 'Camera mount', resolve: async () => new TextEncoder().encode(mtl).buffer });
  viewer.annotations = [
    { id: 'n1', text: 'Hand-tighten the knob; 2 N·m at most.', position: [69, 56, 0], part: 'Knob' },
    { id: 'n2', text: 'M6 bolts into the bench, 4 off.', position: [58, 14, 33], part: 'Bolt 4' },
  ];
</script>