<!-- Required browser shim for Node-style globals that @babylonjs/inspector's
     React (Fluent UI) deps assume — they reference process.env / global. -->
<script>
  window.process = window.process || { env: { NODE_ENV: 'production' } };
  window.global = window.global || window;
</script>

<script type="module">
  await import('./viewer/adom-3d-viewer-babylon9.esm.js');
  // window.Adom3DViewerBabylon9 is now available.
  const viewer = window.Adom3DViewerBabylon9.init(host, {
    zUp: true,
    modelUrl: 'chip.glb',
    showViewCube: true,
  });
  // viewer.loadModel(url), viewer.clearScene(), viewer.frameModel(),
  // viewer.showDebugLayer() — all the same API as upstream.
</script>

npm install
npm run build:standalone   # → dist-standalone/adom-3d-viewer-babylon9.esm.js + chunks

# adom-3d-viewer-babylon9

Fork of [`adom-inc/3d-viewer`](https://github.com/adom-inc/3d-viewer) upgraded to **Babylon.js 9.5.0** with the redesigned Inspector v9 + 3d-viewer-design-skill-compliant defaults.

## What changed from upstream

- **Babylon 7 → Babylon 9.5** — `@babylonjs/core`, `@babylonjs/loaders`, `@babylonjs/inspector` all bumped to ^9.5.0. Inspector v9 ships the redesigned tree explorer, properties panel, scene-stats, mesh-property inspectors.
- **§3b background gradient** applied (top `#5a6b7e` → bottom `#2a3340`). Replaces the upstream flat near-black that the 3d-viewer-design skill explicitly calls out as debt.
- **ESM output, not IIFE** — Babylon 9's `@babylonjs/inspector` has circular imports that resolve to TDZ if collapsed into a single IIFE (regardless of minifier). ESM preserves module boundaries so they initialize cleanly. Bundle entry is `adom-3d-viewer-babylon9.esm.js`; load via `<script type="module">`.
- **Distinct global namespace** — exposes `window.Adom3DViewerBabylon9` (not `window.Adom3DViewer`) so apps can have both bundles loaded side-by-side during migration.

## Consumer pattern

```html
<!-- Required browser shim for Node-style globals that @babylonjs/inspector's
     React (Fluent UI) deps assume — they reference process.env / global. -->
<script>
  window.process = window.process || { env: { NODE_ENV: 'production' } };
  window.global = window.global || window;
</script>

<script type="module">
  await import('./viewer/adom-3d-viewer-babylon9.esm.js');
  // window.Adom3DViewerBabylon9 is now available.
  const viewer = window.Adom3DViewerBabylon9.init(host, {
    zUp: true,
    modelUrl: 'chip.glb',
    showViewCube: true,
  });
  // viewer.loadModel(url), viewer.clearScene(), viewer.frameModel(),
  // viewer.showDebugLayer() — all the same API as upstream.
</script>
```

The bundle code-splits into ~60 chunks — serve them all from the same directory as the main `.esm.js` entry. Browsers fetch chunks on demand (`./chunk-XXX.js` relative paths).

## Build

```bash
npm install
npm run build:standalone   # → dist-standalone/adom-3d-viewer-babylon9.esm.js + chunks
```

## Roadmap (skill compliance still to land)

- §4b bottom-light toggle as a default toolbar button
- §4d medium-gray translucent ground plane + ShadowGenerator
- §6c Shift+Alt+Click orbit-center recentering
- §6b.i adaptive precision after every reframe
- §8b/c mesh-local axis helpers + screen-space corner triad