@thethingteam/colmap-viewer 0.1.0

package/README.md

@@ -0,0 +1,117 @@
+# colmap-viewer
+
+Browser-based 3D viewer for [COLMAP](https://colmap.github.io/) reconstruction results, built on Three.js.
+
+Visualizes point clouds, camera frustums, and coordinate axes from COLMAP binary output files. Works as a drop-in Web Component or as a programmatic TypeScript/JavaScript API.
+
+## Install
+
+```bash
+npm install @thethingteam/colmap-viewer
+```
+
+**Peer dependencies** — install these alongside the package:
+
+```bash
+npm install three @thethingteam/colmap-wasm
+```
+
+## Quick Start — Web Component
+
+The easiest way to embed the viewer. Point it at your COLMAP binary files and it renders into the element.
+
+```html
+<!-- index.html -->
+<script type="module">
+  import '@thethingteam/colmap-viewer'
+</script>
+
+<colmap-viewer
+  style="width: 100%; height: 600px;"
+  cameras-url="/data/cameras.bin"
+  images-url="/data/images.bin"
+  points3d-url="/data/points3D.bin"
+></colmap-viewer>
+```
+
+The element registers itself as `<colmap-viewer>` on import. The `points3d-url` attribute is optional — omit it if you only want to visualize cameras.
+
+## Programmatic API — `ColmapRenderer`
+
+Use `ColmapRenderer` directly when you need lifecycle control or want to load from pre-fetched buffers.
+
+**Load from URLs:**
+
+```ts
+import { ColmapRenderer } from '@thethingteam/colmap-viewer'
+
+const container = document.getElementById('viewer')!
+
+const renderer = new ColmapRenderer(container, {
+  showThemeToggle: true,
+  showAxisLegend: true,
+  showControlsHint: true,
+})
+
+await renderer.loadFromUrls({
+  cameras: '/data/cameras.bin',
+  images: '/data/images.bin',
+  points3d: '/data/points3D.bin', // optional
+})
+
+// Clean up when done
+renderer.dispose()
+```
+
+**Load from `ArrayBuffer`:**
+
+```ts
+import { ColmapRenderer } from '@thethingteam/colmap-viewer'
+
+const renderer = new ColmapRenderer(container)
+
+await renderer.loadFromBuffers({
+  cameras: camerasBuffer,   // ArrayBuffer
+  images: imagesBuffer,     // ArrayBuffer
+  points3d: points3dBuffer, // ArrayBuffer, optional
+})
+```
+
+## Options Reference
+
+| Attribute (Web Component) | Option (JS) | Type | Default | Description |
+|---|---|---|---|---|
+| `cameras-url` | — | `string` | — | URL of `cameras.bin` (required) |
+| `images-url` | — | `string` | — | URL of `images.bin` (required) |
+| `points3d-url` | — | `string` | — | URL of `points3D.bin` (optional) |
+| `show-theme-toggle` | `showThemeToggle` | `boolean` | `true` | Show light/dark mode toggle in the HUD |
+| `show-axis-legend` | `showAxisLegend` | `boolean` | `true` | Show XYZ axis legend overlay |
+| `show-controls-hint` | `showControlsHint` | `boolean` | `true` | Show mouse controls hint at the bottom |
+
+**Boolean attributes** on the Web Component follow standard HTML conventions — presence means `true`, set to `"false"` to disable:
+
+```html
+<colmap-viewer
+  cameras-url="/data/cameras.bin"
+  images-url="/data/images.bin"
+  show-theme-toggle="false"
+  show-controls-hint="false"
+></colmap-viewer>
+```
+
+## Lower-level Exports
+
+For advanced use cases, the library also exports its internal building blocks individually:
+
+```ts
+import { parse, buildScene, createHud } from '@thethingteam/colmap-viewer'
+import type { ColmapFiles, HudOptions, LayerKey } from '@thethingteam/colmap-viewer'
+```
+
+- **`parse(files)`** — parses raw COLMAP binary buffers into structured data
+- **`buildScene(container, result, imageFiles, onProgress)`** — constructs the Three.js scene
+- **`createHud(container, options)`** — mounts the HUD overlay and returns a dispose function
+
+## License
+
+MIT

package/dist/colmap-viewer.css

@@ -0,0 +1 @@
+:root{--bg: #f7f8fc;--surface: #ffffff;--surface-2: #eef0f6;--border: #dde0ec;--text: #1a1b2e;--text-muted: #7a7e99;--accent: #0077cc;--accent-dim: #ddeeff;--accent-hover: #c8e4ff;--error: #cc3333;--green: #227744;--overlay-bg: rgba(200, 200, 220, .7)}[data-theme=dark]{--bg: #0d0d18;--surface: #14142a;--surface-2: #1e1e38;--border: #2a2a45;--text: #e0e0f0;--text-muted: #8899bb;--accent: #66ccff;--accent-dim: #1a3a6a;--accent-hover: #1e4a88;--error: #ff5555;--green: #44aa77;--overlay-bg: rgba(5, 5, 15, .78)}.hud{position:absolute;top:12px;right:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;min-width:160px;box-shadow:0 2px 12px #00000014;z-index:10;display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--text)}[data-theme=dark] .hud{box-shadow:0 2px 12px #0006}.hud-title{color:var(--accent);font-weight:600;font-size:13px}.hud-stats{display:flex;flex-direction:column;gap:3px;color:var(--text)}.hud-divider{border:none;border-top:1px solid var(--border);margin:0}.hud-toggles{display:flex;flex-direction:column;gap:5px}.hud-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text);user-select:none}.hud-toggle--disabled{opacity:.35;cursor:default}.hud-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer;width:100%;text-align:center;transition:background .15s}.hud-btn:hover{filter:brightness(.95)}[data-theme=dark] .hud-btn:hover{filter:brightness(1.1)}.hud-size-section{display:flex;flex-direction:column;gap:5px}.hud-size-label{color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.hud-slider{width:100%;accent-color:var(--accent);cursor:pointer}.hud-theme-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer;width:100%;text-align:center;transition:color .15s,background .15s}.hud-theme-btn:hover{color:var(--text);background:var(--surface-2);filter:brightness(.95)}[data-theme=dark] .hud-theme-btn:hover{filter:brightness(1.1)}.colmap-renderer-status,.colmap-renderer-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;pointer-events:none}.colmap-renderer-status{color:var(--text-muted, #7a7e99)}.colmap-renderer-error{color:var(--error, #cc3333);pointer-events:auto}.controls-hint{position:absolute;bottom:14px;left:50%;transform:translate(-50%);background:var(--overlay-bg);border-radius:4px;padding:5px 14px;font-size:11px;color:var(--text-muted);pointer-events:none;z-index:10;white-space:nowrap;backdrop-filter:blur(4px)}.axis-legend{position:absolute;bottom:42px;left:12px;background:var(--overlay-bg);backdrop-filter:blur(4px);border-radius:6px;padding:6px 10px;display:flex;flex-direction:column;gap:3px;pointer-events:none;z-index:10}.axis-legend-row{display:flex;align-items:center;gap:8px}.axis-legend-name{font-size:12px;font-weight:700;min-width:24px}.axis-legend-sub{font-size:10px;color:var(--text-muted)}

package/dist/colmap-viewer.js

@@ -0,0 +1,923 @@
+import { parseColmap as V } from "@thethingteam/colmap-wasm";
+import * as r from "three";
+import { Controls as W, Vector3 as S, MOUSE as j, TOUCH as k, Quaternion as H, Spherical as Z, Vector2 as P, Ray as G, Plane as q, MathUtils as $ } from "three";
+const F = { type: "change" }, Y = { type: "start" }, B = { type: "end" }, N = new G(), K = new q(), Q = Math.cos(70 * $.DEG2RAD), _ = new S(), y = 2 * Math.PI, d = {
+  NONE: -1,
+  ROTATE: 0,
+  DOLLY: 1,
+  PAN: 2,
+  TOUCH_ROTATE: 3,
+  TOUCH_PAN: 4,
+  TOUCH_DOLLY_PAN: 5,
+  TOUCH_DOLLY_ROTATE: 6
+}, I = 1e-6;
+class J extends W {
+  /**
+   * Constructs a new controls instance.
+   *
+   * @param {Object3D} object - The object that is managed by the controls.
+   * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
+   */
+  constructor(t, e = null) {
+    super(t, e), this.state = d.NONE, this.target = new S(), this.cursor = new S(), this.minDistance = 0, this.maxDistance = 1 / 0, this.minZoom = 0, this.maxZoom = 1 / 0, this.minTargetRadius = 0, this.maxTargetRadius = 1 / 0, this.minPolarAngle = 0, this.maxPolarAngle = Math.PI, this.minAzimuthAngle = -1 / 0, this.maxAzimuthAngle = 1 / 0, this.enableDamping = !1, this.dampingFactor = 0.05, this.enableZoom = !0, this.zoomSpeed = 1, this.enableRotate = !0, this.rotateSpeed = 1, this.keyRotateSpeed = 1, this.enablePan = !0, this.panSpeed = 1, this.screenSpacePanning = !0, this.keyPanSpeed = 7, this.zoomToCursor = !1, this.autoRotate = !1, this.autoRotateSpeed = 2, this.keys = { LEFT: "ArrowLeft", UP: "ArrowUp", RIGHT: "ArrowRight", BOTTOM: "ArrowDown" }, this.mouseButtons = { LEFT: j.ROTATE, MIDDLE: j.DOLLY, RIGHT: j.PAN }, this.touches = { ONE: k.ROTATE, TWO: k.DOLLY_PAN }, this.target0 = this.target.clone(), this.position0 = this.object.position.clone(), this.zoom0 = this.object.zoom, this._domElementKeyEvents = null, this._lastPosition = new S(), this._lastQuaternion = new H(), this._lastTargetPosition = new S(), this._quat = new H().setFromUnitVectors(t.up, new S(0, 1, 0)), this._quatInverse = this._quat.clone().invert(), this._spherical = new Z(), this._sphericalDelta = new Z(), this._scale = 1, this._panOffset = new S(), this._rotateStart = new P(), this._rotateEnd = new P(), this._rotateDelta = new P(), this._panStart = new P(), this._panEnd = new P(), this._panDelta = new P(), this._dollyStart = new P(), this._dollyEnd = new P(), this._dollyDelta = new P(), this._dollyDirection = new S(), this._mouse = new P(), this._performCursorZoom = !1, this._pointers = [], this._pointerPositions = {}, this._controlActive = !1, this._onPointerMove = et.bind(this), this._onPointerDown = tt.bind(this), this._onPointerUp = st.bind(this), this._onContextMenu = lt.bind(this), this._onMouseWheel = nt.bind(this), this._onKeyDown = at.bind(this), this._onTouchStart = rt.bind(this), this._onTouchMove = ht.bind(this), this._onMouseDown = it.bind(this), this._onMouseMove = ot.bind(this), this._interceptControlDown = ct.bind(this), this._interceptControlUp = dt.bind(this), this.domElement !== null && this.connect(this.domElement), this.update();
+  }
+  connect(t) {
+    super.connect(t), this.domElement.addEventListener("pointerdown", this._onPointerDown), this.domElement.addEventListener("pointercancel", this._onPointerUp), this.domElement.addEventListener("contextmenu", this._onContextMenu), this.domElement.addEventListener("wheel", this._onMouseWheel, { passive: !1 }), this.domElement.getRootNode().addEventListener("keydown", this._interceptControlDown, { passive: !0, capture: !0 }), this.domElement.style.touchAction = "none";
+  }
+  disconnect() {
+    this.domElement.removeEventListener("pointerdown", this._onPointerDown), this.domElement.removeEventListener("pointermove", this._onPointerMove), this.domElement.removeEventListener("pointerup", this._onPointerUp), this.domElement.removeEventListener("pointercancel", this._onPointerUp), this.domElement.removeEventListener("wheel", this._onMouseWheel), this.domElement.removeEventListener("contextmenu", this._onContextMenu), this.stopListenToKeyEvents(), this.domElement.getRootNode().removeEventListener("keydown", this._interceptControlDown, { capture: !0 }), this.domElement.style.touchAction = "auto";
+  }
+  dispose() {
+    this.disconnect();
+  }
+  /**
+   * Get the current vertical rotation, in radians.
+   *
+   * @return {number} The current vertical rotation, in radians.
+   */
+  getPolarAngle() {
+    return this._spherical.phi;
+  }
+  /**
+   * Get the current horizontal rotation, in radians.
+   *
+   * @return {number} The current horizontal rotation, in radians.
+   */
+  getAzimuthalAngle() {
+    return this._spherical.theta;
+  }
+  /**
+   * Returns the distance from the camera to the target.
+   *
+   * @return {number} The distance from the camera to the target.
+   */
+  getDistance() {
+    return this.object.position.distanceTo(this.target);
+  }
+  /**
+   * Adds key event listeners to the given DOM element.
+   * `window` is a recommended argument for using this method.
+   *
+   * @param {HTMLDOMElement} domElement - The DOM element
+   */
+  listenToKeyEvents(t) {
+    t.addEventListener("keydown", this._onKeyDown), this._domElementKeyEvents = t;
+  }
+  /**
+   * Removes the key event listener previously defined with `listenToKeyEvents()`.
+   */
+  stopListenToKeyEvents() {
+    this._domElementKeyEvents !== null && (this._domElementKeyEvents.removeEventListener("keydown", this._onKeyDown), this._domElementKeyEvents = null);
+  }
+  /**
+   * Save the current state of the controls. This can later be recovered with `reset()`.
+   */
+  saveState() {
+    this.target0.copy(this.target), this.position0.copy(this.object.position), this.zoom0 = this.object.zoom;
+  }
+  /**
+   * Reset the controls to their state from either the last time the `saveState()`
+   * was called, or the initial state.
+   */
+  reset() {
+    this.target.copy(this.target0), this.object.position.copy(this.position0), this.object.zoom = this.zoom0, this.object.updateProjectionMatrix(), this.dispatchEvent(F), this.update(), this.state = d.NONE;
+  }
+  update(t = null) {
+    const e = this.object.position;
+    _.copy(e).sub(this.target), _.applyQuaternion(this._quat), this._spherical.setFromVector3(_), this.autoRotate && this.state === d.NONE && this._rotateLeft(this._getAutoRotationAngle(t)), this.enableDamping ? (this._spherical.theta += this._sphericalDelta.theta * this.dampingFactor, this._spherical.phi += this._sphericalDelta.phi * this.dampingFactor) : (this._spherical.theta += this._sphericalDelta.theta, this._spherical.phi += this._sphericalDelta.phi);
+    let i = this.minAzimuthAngle, o = this.maxAzimuthAngle;
+    isFinite(i) && isFinite(o) && (i < -Math.PI ? i += y : i > Math.PI && (i -= y), o < -Math.PI ? o += y : o > Math.PI && (o -= y), i <= o ? this._spherical.theta = Math.max(i, Math.min(o, this._spherical.theta)) : this._spherical.theta = this._spherical.theta > (i + o) / 2 ? Math.max(i, this._spherical.theta) : Math.min(o, this._spherical.theta)), this._spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this._spherical.phi)), this._spherical.makeSafe(), this.enableDamping === !0 ? this.target.addScaledVector(this._panOffset, this.dampingFactor) : this.target.add(this._panOffset), this.target.sub(this.cursor), this.target.clampLength(this.minTargetRadius, this.maxTargetRadius), this.target.add(this.cursor);
+    let n = !1;
+    if (this.zoomToCursor && this._performCursorZoom || this.object.isOrthographicCamera)
+      this._spherical.radius = this._clampDistance(this._spherical.radius);
+    else {
+      const a = this._spherical.radius;
+      this._spherical.radius = this._clampDistance(this._spherical.radius * this._scale), n = a != this._spherical.radius;
+    }
+    if (_.setFromSpherical(this._spherical), _.applyQuaternion(this._quatInverse), e.copy(this.target).add(_), this.object.lookAt(this.target), this.enableDamping === !0 ? (this._sphericalDelta.theta *= 1 - this.dampingFactor, this._sphericalDelta.phi *= 1 - this.dampingFactor, this._panOffset.multiplyScalar(1 - this.dampingFactor)) : (this._sphericalDelta.set(0, 0, 0), this._panOffset.set(0, 0, 0)), this.zoomToCursor && this._performCursorZoom) {
+      let a = null;
+      if (this.object.isPerspectiveCamera) {
+        const l = _.length();
+        a = this._clampDistance(l * this._scale);
+        const c = l - a;
+        this.object.position.addScaledVector(this._dollyDirection, c), this.object.updateMatrixWorld(), n = !!c;
+      } else if (this.object.isOrthographicCamera) {
+        const l = new S(this._mouse.x, this._mouse.y, 0);
+        l.unproject(this.object);
+        const c = this.object.zoom;
+        this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / this._scale)), this.object.updateProjectionMatrix(), n = c !== this.object.zoom;
+        const h = new S(this._mouse.x, this._mouse.y, 0);
+        h.unproject(this.object), this.object.position.sub(h).add(l), this.object.updateMatrixWorld(), a = _.length();
+      } else
+        console.warn("WARNING: OrbitControls.js encountered an unknown camera type - zoom to cursor disabled."), this.zoomToCursor = !1;
+      a !== null && (this.screenSpacePanning ? this.target.set(0, 0, -1).transformDirection(this.object.matrix).multiplyScalar(a).add(this.object.position) : (N.origin.copy(this.object.position), N.direction.set(0, 0, -1).transformDirection(this.object.matrix), Math.abs(this.object.up.dot(N.direction)) < Q ? this.object.lookAt(this.target) : (K.setFromNormalAndCoplanarPoint(this.object.up, this.target), N.intersectPlane(K, this.target))));
+    } else if (this.object.isOrthographicCamera) {
+      const a = this.object.zoom;
+      this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / this._scale)), a !== this.object.zoom && (this.object.updateProjectionMatrix(), n = !0);
+    }
+    return this._scale = 1, this._performCursorZoom = !1, n || this._lastPosition.distanceToSquared(this.object.position) > I || 8 * (1 - this._lastQuaternion.dot(this.object.quaternion)) > I || this._lastTargetPosition.distanceToSquared(this.target) > I ? (this.dispatchEvent(F), this._lastPosition.copy(this.object.position), this._lastQuaternion.copy(this.object.quaternion), this._lastTargetPosition.copy(this.target), !0) : !1;
+  }
+  _getAutoRotationAngle(t) {
+    return t !== null ? y / 60 * this.autoRotateSpeed * t : y / 60 / 60 * this.autoRotateSpeed;
+  }
+  _getZoomScale(t) {
+    const e = Math.abs(t * 0.01);
+    return Math.pow(0.95, this.zoomSpeed * e);
+  }
+  _rotateLeft(t) {
+    this._sphericalDelta.theta -= t;
+  }
+  _rotateUp(t) {
+    this._sphericalDelta.phi -= t;
+  }
+  _panLeft(t, e) {
+    _.setFromMatrixColumn(e, 0), _.multiplyScalar(-t), this._panOffset.add(_);
+  }
+  _panUp(t, e) {
+    this.screenSpacePanning === !0 ? _.setFromMatrixColumn(e, 1) : (_.setFromMatrixColumn(e, 0), _.crossVectors(this.object.up, _)), _.multiplyScalar(t), this._panOffset.add(_);
+  }
+  // deltaX and deltaY are in pixels; right and down are positive
+  _pan(t, e) {
+    const i = this.domElement;
+    if (this.object.isPerspectiveCamera) {
+      const o = this.object.position;
+      _.copy(o).sub(this.target);
+      let n = _.length();
+      n *= Math.tan(this.object.fov / 2 * Math.PI / 180), this._panLeft(2 * t * n / i.clientHeight, this.object.matrix), this._panUp(2 * e * n / i.clientHeight, this.object.matrix);
+    } else this.object.isOrthographicCamera ? (this._panLeft(t * (this.object.right - this.object.left) / this.object.zoom / i.clientWidth, this.object.matrix), this._panUp(e * (this.object.top - this.object.bottom) / this.object.zoom / i.clientHeight, this.object.matrix)) : (console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."), this.enablePan = !1);
+  }
+  _dollyOut(t) {
+    this.object.isPerspectiveCamera || this.object.isOrthographicCamera ? this._scale /= t : (console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."), this.enableZoom = !1);
+  }
+  _dollyIn(t) {
+    this.object.isPerspectiveCamera || this.object.isOrthographicCamera ? this._scale *= t : (console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."), this.enableZoom = !1);
+  }
+  _updateZoomParameters(t, e) {
+    if (!this.zoomToCursor)
+      return;
+    this._performCursorZoom = !0;
+    const i = this.domElement.getBoundingClientRect(), o = t - i.left, n = e - i.top, a = i.width, l = i.height;
+    this._mouse.x = o / a * 2 - 1, this._mouse.y = -(n / l) * 2 + 1, this._dollyDirection.set(this._mouse.x, this._mouse.y, 1).unproject(this.object).sub(this.object.position).normalize();
+  }
+  _clampDistance(t) {
+    return Math.max(this.minDistance, Math.min(this.maxDistance, t));
+  }
+  //
+  // event callbacks - update the object state
+  //
+  _handleMouseDownRotate(t) {
+    this._rotateStart.set(t.clientX, t.clientY);
+  }
+  _handleMouseDownDolly(t) {
+    this._updateZoomParameters(t.clientX, t.clientX), this._dollyStart.set(t.clientX, t.clientY);
+  }
+  _handleMouseDownPan(t) {
+    this._panStart.set(t.clientX, t.clientY);
+  }
+  _handleMouseMoveRotate(t) {
+    this._rotateEnd.set(t.clientX, t.clientY), this._rotateDelta.subVectors(this._rotateEnd, this._rotateStart).multiplyScalar(this.rotateSpeed);
+    const e = this.domElement;
+    this._rotateLeft(y * this._rotateDelta.x / e.clientHeight), this._rotateUp(y * this._rotateDelta.y / e.clientHeight), this._rotateStart.copy(this._rotateEnd), this.update();
+  }
+  _handleMouseMoveDolly(t) {
+    this._dollyEnd.set(t.clientX, t.clientY), this._dollyDelta.subVectors(this._dollyEnd, this._dollyStart), this._dollyDelta.y > 0 ? this._dollyOut(this._getZoomScale(this._dollyDelta.y)) : this._dollyDelta.y < 0 && this._dollyIn(this._getZoomScale(this._dollyDelta.y)), this._dollyStart.copy(this._dollyEnd), this.update();
+  }
+  _handleMouseMovePan(t) {
+    this._panEnd.set(t.clientX, t.clientY), this._panDelta.subVectors(this._panEnd, this._panStart).multiplyScalar(this.panSpeed), this._pan(this._panDelta.x, this._panDelta.y), this._panStart.copy(this._panEnd), this.update();
+  }
+  _handleMouseWheel(t) {
+    this._updateZoomParameters(t.clientX, t.clientY), t.deltaY < 0 ? this._dollyIn(this._getZoomScale(t.deltaY)) : t.deltaY > 0 && this._dollyOut(this._getZoomScale(t.deltaY)), this.update();
+  }
+  _handleKeyDown(t) {
+    let e = !1;
+    switch (t.code) {
+      case this.keys.UP:
+        t.ctrlKey || t.metaKey || t.shiftKey ? this.enableRotate && this._rotateUp(y * this.keyRotateSpeed / this.domElement.clientHeight) : this.enablePan && this._pan(0, this.keyPanSpeed), e = !0;
+        break;
+      case this.keys.BOTTOM:
+        t.ctrlKey || t.metaKey || t.shiftKey ? this.enableRotate && this._rotateUp(-y * this.keyRotateSpeed / this.domElement.clientHeight) : this.enablePan && this._pan(0, -this.keyPanSpeed), e = !0;
+        break;
+      case this.keys.LEFT:
+        t.ctrlKey || t.metaKey || t.shiftKey ? this.enableRotate && this._rotateLeft(y * this.keyRotateSpeed / this.domElement.clientHeight) : this.enablePan && this._pan(this.keyPanSpeed, 0), e = !0;
+        break;
+      case this.keys.RIGHT:
+        t.ctrlKey || t.metaKey || t.shiftKey ? this.enableRotate && this._rotateLeft(-y * this.keyRotateSpeed / this.domElement.clientHeight) : this.enablePan && this._pan(-this.keyPanSpeed, 0), e = !0;
+        break;
+    }
+    e && (t.preventDefault(), this.update());
+  }
+  _handleTouchStartRotate(t) {
+    if (this._pointers.length === 1)
+      this._rotateStart.set(t.pageX, t.pageY);
+    else {
+      const e = this._getSecondPointerPosition(t), i = 0.5 * (t.pageX + e.x), o = 0.5 * (t.pageY + e.y);
+      this._rotateStart.set(i, o);
+    }
+  }
+  _handleTouchStartPan(t) {
+    if (this._pointers.length === 1)
+      this._panStart.set(t.pageX, t.pageY);
+    else {
+      const e = this._getSecondPointerPosition(t), i = 0.5 * (t.pageX + e.x), o = 0.5 * (t.pageY + e.y);
+      this._panStart.set(i, o);
+    }
+  }
+  _handleTouchStartDolly(t) {
+    const e = this._getSecondPointerPosition(t), i = t.pageX - e.x, o = t.pageY - e.y, n = Math.sqrt(i * i + o * o);
+    this._dollyStart.set(0, n);
+  }
+  _handleTouchStartDollyPan(t) {
+    this.enableZoom && this._handleTouchStartDolly(t), this.enablePan && this._handleTouchStartPan(t);
+  }
+  _handleTouchStartDollyRotate(t) {
+    this.enableZoom && this._handleTouchStartDolly(t), this.enableRotate && this._handleTouchStartRotate(t);
+  }
+  _handleTouchMoveRotate(t) {
+    if (this._pointers.length == 1)
+      this._rotateEnd.set(t.pageX, t.pageY);
+    else {
+      const i = this._getSecondPointerPosition(t), o = 0.5 * (t.pageX + i.x), n = 0.5 * (t.pageY + i.y);
+      this._rotateEnd.set(o, n);
+    }
+    this._rotateDelta.subVectors(this._rotateEnd, this._rotateStart).multiplyScalar(this.rotateSpeed);
+    const e = this.domElement;
+    this._rotateLeft(y * this._rotateDelta.x / e.clientHeight), this._rotateUp(y * this._rotateDelta.y / e.clientHeight), this._rotateStart.copy(this._rotateEnd);
+  }
+  _handleTouchMovePan(t) {
+    if (this._pointers.length === 1)
+      this._panEnd.set(t.pageX, t.pageY);
+    else {
+      const e = this._getSecondPointerPosition(t), i = 0.5 * (t.pageX + e.x), o = 0.5 * (t.pageY + e.y);
+      this._panEnd.set(i, o);
+    }
+    this._panDelta.subVectors(this._panEnd, this._panStart).multiplyScalar(this.panSpeed), this._pan(this._panDelta.x, this._panDelta.y), this._panStart.copy(this._panEnd);
+  }
+  _handleTouchMoveDolly(t) {
+    const e = this._getSecondPointerPosition(t), i = t.pageX - e.x, o = t.pageY - e.y, n = Math.sqrt(i * i + o * o);
+    this._dollyEnd.set(0, n), this._dollyDelta.set(0, Math.pow(this._dollyEnd.y / this._dollyStart.y, this.zoomSpeed)), this._dollyOut(this._dollyDelta.y), this._dollyStart.copy(this._dollyEnd);
+    const a = (t.pageX + e.x) * 0.5, l = (t.pageY + e.y) * 0.5;
+    this._updateZoomParameters(a, l);
+  }
+  _handleTouchMoveDollyPan(t) {
+    this.enableZoom && this._handleTouchMoveDolly(t), this.enablePan && this._handleTouchMovePan(t);
+  }
+  _handleTouchMoveDollyRotate(t) {
+    this.enableZoom && this._handleTouchMoveDolly(t), this.enableRotate && this._handleTouchMoveRotate(t);
+  }
+  // pointers
+  _addPointer(t) {
+    this._pointers.push(t.pointerId);
+  }
+  _removePointer(t) {
+    delete this._pointerPositions[t.pointerId];
+    for (let e = 0; e < this._pointers.length; e++)
+      if (this._pointers[e] == t.pointerId) {
+        this._pointers.splice(e, 1);
+        return;
+      }
+  }
+  _isTrackingPointer(t) {
+    for (let e = 0; e < this._pointers.length; e++)
+      if (this._pointers[e] == t.pointerId) return !0;
+    return !1;
+  }
+  _trackPointer(t) {
+    let e = this._pointerPositions[t.pointerId];
+    e === void 0 && (e = new P(), this._pointerPositions[t.pointerId] = e), e.set(t.pageX, t.pageY);
+  }
+  _getSecondPointerPosition(t) {
+    const e = t.pointerId === this._pointers[0] ? this._pointers[1] : this._pointers[0];
+    return this._pointerPositions[e];
+  }
+  //
+  _customWheelEvent(t) {
+    const e = t.deltaMode, i = {
+      clientX: t.clientX,
+      clientY: t.clientY,
+      deltaY: t.deltaY
+    };
+    switch (e) {
+      case 1:
+        i.deltaY *= 16;
+        break;
+      case 2:
+        i.deltaY *= 100;
+        break;
+    }
+    return t.ctrlKey && !this._controlActive && (i.deltaY *= 10), i;
+  }
+}
+function tt(s) {
+  this.enabled !== !1 && (this._pointers.length === 0 && (this.domElement.setPointerCapture(s.pointerId), this.domElement.addEventListener("pointermove", this._onPointerMove), this.domElement.addEventListener("pointerup", this._onPointerUp)), !this._isTrackingPointer(s) && (this._addPointer(s), s.pointerType === "touch" ? this._onTouchStart(s) : this._onMouseDown(s)));
+}
+function et(s) {
+  this.enabled !== !1 && (s.pointerType === "touch" ? this._onTouchMove(s) : this._onMouseMove(s));
+}
+function st(s) {
+  switch (this._removePointer(s), this._pointers.length) {
+    case 0:
+      this.domElement.releasePointerCapture(s.pointerId), this.domElement.removeEventListener("pointermove", this._onPointerMove), this.domElement.removeEventListener("pointerup", this._onPointerUp), this.dispatchEvent(B), this.state = d.NONE;
+      break;
+    case 1:
+      const t = this._pointers[0], e = this._pointerPositions[t];
+      this._onTouchStart({ pointerId: t, pageX: e.x, pageY: e.y });
+      break;
+  }
+}
+function it(s) {
+  let t;
+  switch (s.button) {
+    case 0:
+      t = this.mouseButtons.LEFT;
+      break;
+    case 1:
+      t = this.mouseButtons.MIDDLE;
+      break;
+    case 2:
+      t = this.mouseButtons.RIGHT;
+      break;
+    default:
+      t = -1;
+  }
+  switch (t) {
+    case j.DOLLY:
+      if (this.enableZoom === !1) return;
+      this._handleMouseDownDolly(s), this.state = d.DOLLY;
+      break;
+    case j.ROTATE:
+      if (s.ctrlKey || s.metaKey || s.shiftKey) {
+        if (this.enablePan === !1) return;
+        this._handleMouseDownPan(s), this.state = d.PAN;
+      } else {
+        if (this.enableRotate === !1) return;
+        this._handleMouseDownRotate(s), this.state = d.ROTATE;
+      }
+      break;
+    case j.PAN:
+      if (s.ctrlKey || s.metaKey || s.shiftKey) {
+        if (this.enableRotate === !1) return;
+        this._handleMouseDownRotate(s), this.state = d.ROTATE;
+      } else {
+        if (this.enablePan === !1) return;
+        this._handleMouseDownPan(s), this.state = d.PAN;
+      }
+      break;
+    default:
+      this.state = d.NONE;
+  }
+  this.state !== d.NONE && this.dispatchEvent(Y);
+}
+function ot(s) {
+  switch (this.state) {
+    case d.ROTATE:
+      if (this.enableRotate === !1) return;
+      this._handleMouseMoveRotate(s);
+      break;
+    case d.DOLLY:
+      if (this.enableZoom === !1) return;
+      this._handleMouseMoveDolly(s);
+      break;
+    case d.PAN:
+      if (this.enablePan === !1) return;
+      this._handleMouseMovePan(s);
+      break;
+  }
+}
+function nt(s) {
+  this.enabled === !1 || this.enableZoom === !1 || this.state !== d.NONE || (s.preventDefault(), this.dispatchEvent(Y), this._handleMouseWheel(this._customWheelEvent(s)), this.dispatchEvent(B));
+}
+function at(s) {
+  this.enabled !== !1 && this._handleKeyDown(s);
+}
+function rt(s) {
+  switch (this._trackPointer(s), this._pointers.length) {
+    case 1:
+      switch (this.touches.ONE) {
+        case k.ROTATE:
+          if (this.enableRotate === !1) return;
+          this._handleTouchStartRotate(s), this.state = d.TOUCH_ROTATE;
+          break;
+        case k.PAN:
+          if (this.enablePan === !1) return;
+          this._handleTouchStartPan(s), this.state = d.TOUCH_PAN;
+          break;
+        default:
+          this.state = d.NONE;
+      }
+      break;
+    case 2:
+      switch (this.touches.TWO) {
+        case k.DOLLY_PAN:
+          if (this.enableZoom === !1 && this.enablePan === !1) return;
+          this._handleTouchStartDollyPan(s), this.state = d.TOUCH_DOLLY_PAN;
+          break;
+        case k.DOLLY_ROTATE:
+          if (this.enableZoom === !1 && this.enableRotate === !1) return;
+          this._handleTouchStartDollyRotate(s), this.state = d.TOUCH_DOLLY_ROTATE;
+          break;
+        default:
+          this.state = d.NONE;
+      }
+      break;
+    default:
+      this.state = d.NONE;
+  }
+  this.state !== d.NONE && this.dispatchEvent(Y);
+}
+function ht(s) {
+  switch (this._trackPointer(s), this.state) {
+    case d.TOUCH_ROTATE:
+      if (this.enableRotate === !1) return;
+      this._handleTouchMoveRotate(s), this.update();
+      break;
+    case d.TOUCH_PAN:
+      if (this.enablePan === !1) return;
+      this._handleTouchMovePan(s), this.update();
+      break;
+    case d.TOUCH_DOLLY_PAN:
+      if (this.enableZoom === !1 && this.enablePan === !1) return;
+      this._handleTouchMoveDollyPan(s), this.update();
+      break;
+    case d.TOUCH_DOLLY_ROTATE:
+      if (this.enableZoom === !1 && this.enableRotate === !1) return;
+      this._handleTouchMoveDollyRotate(s), this.update();
+      break;
+    default:
+      this.state = d.NONE;
+  }
+}
+function lt(s) {
+  this.enabled !== !1 && s.preventDefault();
+}
+function ct(s) {
+  s.key === "Control" && (this._controlActive = !0, this.domElement.getRootNode().addEventListener("keyup", this._interceptControlUp, { passive: !0, capture: !0 }));
+}
+function dt(s) {
+  s.key === "Control" && (this._controlActive = !1, this.domElement.getRootNode().removeEventListener("keyup", this._interceptControlUp, { passive: !0, capture: !0 }));
+}
+function ut(s) {
+  const t = s.length, e = new Float32Array(t * 3), i = new Float32Array(t * 3);
+  for (let a = 0; a < t; a++) {
+    const l = s[a];
+    e[a * 3] = l.xyz[0], e[a * 3 + 1] = -l.xyz[1], e[a * 3 + 2] = -l.xyz[2], i[a * 3] = l.rgb[0] / 255, i[a * 3 + 1] = l.rgb[1] / 255, i[a * 3 + 2] = l.rgb[2] / 255;
+  }
+  const o = new r.BufferGeometry();
+  o.setAttribute("position", new r.BufferAttribute(e, 3)), o.setAttribute("color", new r.BufferAttribute(i, 3));
+  const n = new r.PointsMaterial({
+    size: 0.02,
+    vertexColors: !0,
+    sizeAttenuation: !0
+  });
+  return new r.Points(o, n);
+}
+function mt(s) {
+  const [t, e, i, o] = s, n = new r.Matrix3();
+  return n.set(
+    1 - 2 * (i * i + o * o),
+    2 * (e * i - t * o),
+    2 * (e * o + t * i),
+    2 * (e * i + t * o),
+    1 - 2 * (e * e + o * o),
+    2 * (i * o - t * e),
+    2 * (e * o - t * i),
+    2 * (i * o + t * e),
+    1 - 2 * (e * e + i * i)
+  ), n;
+}
+function pt(s, t) {
+  const e = s.clone().transpose(), i = new r.Vector3(t[0], t[1], t[2]);
+  return i.applyMatrix3(e).negate(), new r.Vector3(i.x, -i.y, -i.z);
+}
+function _t(s, t, e, i, o) {
+  const a = t.clone().transpose(), l = [
+    new r.Vector3(-i / 2 / e, -o / 2 / e, 1),
+    new r.Vector3(i / 2 / e, -o / 2 / e, 1),
+    new r.Vector3(i / 2 / e, o / 2 / e, 1),
+    new r.Vector3(-i / 2 / e, o / 2 / e, 1)
+  ].map((h) => (h.multiplyScalar(0.3), h.applyMatrix3(a), h.set(h.x, -h.y, -h.z), h.add(s), h)), c = [];
+  for (const h of l)
+    c.push(s.x, s.y, s.z, h.x, h.y, h.z);
+  for (let h = 0; h < 4; h++) {
+    const f = l[h], u = l[(h + 1) % 4];
+    c.push(f.x, f.y, f.z, u.x, u.y, u.z);
+  }
+  return new Float32Array(c);
+}
+function ft(s, t) {
+  const e = new Map(t.map((n) => [n.id, n])), i = new r.Group(), o = [];
+  for (const n of s) {
+    const a = e.get(n.cameraId);
+    if (!a) continue;
+    const l = mt(n.qvec), c = pt(l, n.tvec), h = a.params[0] ?? 500, f = _t(c, l, h, a.width, a.height), u = new r.BufferGeometry();
+    u.setAttribute("position", new r.BufferAttribute(f, 3));
+    const E = new r.LineBasicMaterial({ color: 52479, opacity: 0.7, transparent: !0 });
+    i.add(new r.LineSegments(u, E)), o.push(c.x, c.y, c.z);
+  }
+  return i;
+}
+function bt(s) {
+  return new r.AxesHelper(Math.max(s * 0.1, 1));
+}
+function gt(s) {
+  const [t, e, i, o] = s, n = new r.Matrix3();
+  return n.set(
+    1 - 2 * (i * i + o * o),
+    2 * (e * i - t * o),
+    2 * (e * o + t * i),
+    2 * (e * i + t * o),
+    1 - 2 * (e * e + o * o),
+    2 * (i * o - t * e),
+    2 * (e * o - t * i),
+    2 * (i * o + t * e),
+    1 - 2 * (e * e + i * i)
+  ), n;
+}
+async function yt(s) {
+  const t = URL.createObjectURL(s);
+  return new Promise((e, i) => {
+    new r.TextureLoader().load(
+      t,
+      (o) => {
+        URL.revokeObjectURL(t), e(o);
+      },
+      void 0,
+      (o) => {
+        URL.revokeObjectURL(t), i(o);
+      }
+    );
+  });
+}
+async function Et(s, t, e) {
+  const i = new Map(t.map((a) => [a.id, a])), o = new r.Group();
+  o.visible = !1;
+  const n = s.map(async (a) => {
+    const l = a.name.split("/").pop() ?? a.name, c = e.get(l) ?? e.get(a.name);
+    if (!c) return;
+    const h = i.get(a.cameraId);
+    if (!h) return;
+    const f = await yt(c), u = h.width / h.height, E = 0.3, A = new r.PlaneGeometry(E * u, E), C = new r.MeshBasicMaterial({ map: f, side: r.DoubleSide }), p = new r.Mesh(A, C), x = gt(a.qvec).clone().transpose(), M = new r.Vector3(a.tvec[0], a.tvec[1], a.tvec[2]);
+    M.applyMatrix3(x).negate(), p.position.set(M.x, -M.y, -M.z);
+    const b = new r.Vector3(0, 0, 1).applyMatrix3(x);
+    b.set(b.x, -b.y, -b.z), p.lookAt(p.position.clone().add(b)), o.add(p);
+  });
+  return await Promise.allSettled(n), o;
+}
+function X(s) {
+  return s ? new r.Color(11845341) : new r.Color(6581890);
+}
+function wt(s, t, e) {
+  const i = e * 2, o = i * 2, n = e / 10, a = new r.PlaneGeometry(o, o);
+  a.rotateX(-Math.PI / 2);
+  const l = document.documentElement.dataset.theme === "dark", c = new r.ShaderMaterial({
+    transparent: !0,
+    depthWrite: !1,
+    side: r.DoubleSide,
+    uniforms: {
+      uColor: { value: X(l) },
+      uRadius: { value: i },
+      uCellSize: { value: n }
+    },
+    vertexShader: (
+      /* glsl */
+      `
+      varying vec2 vPosition;
+      void main() {
+        vPosition = position.xz;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `
+    ),
+    fragmentShader: (
+      /* glsl */
+      `
+      uniform vec3 uColor;
+      uniform float uRadius;
+      uniform float uCellSize;
+      varying vec2 vPosition;
+
+      void main() {
+        vec2 coord = vPosition / uCellSize;
+        vec2 grid = abs(fract(coord - 0.5) - 0.5) / fwidth(coord);
+        float line = min(min(grid.x, grid.y), 1.0);
+        float gridAlpha = 1.0 - line;
+
+        float dist = length(vPosition);
+        float fade = 1.0 - smoothstep(uRadius * 0.6, uRadius, dist);
+
+        float alpha = gridAlpha * fade * 0.7;
+        if (alpha < 0.01) discard;
+        gl_FragColor = vec4(uColor, alpha);
+      }
+    `
+    )
+  }), h = new r.Mesh(a, c);
+  return h.position.set(s.x, t, s.z), h;
+}
+async function Pt(s, t, e, i) {
+  const o = new r.WebGLRenderer({ antialias: !0 });
+  o.setPixelRatio(window.devicePixelRatio), o.setSize(s.clientWidth, s.clientHeight);
+  const n = () => document.documentElement.dataset.theme === "dark" ? 855320 : 15265016;
+  o.setClearColor(n()), s.appendChild(o.domElement);
+  let a;
+  const l = new MutationObserver(() => {
+    o.setClearColor(n());
+    const m = document.documentElement.dataset.theme === "dark";
+    a.material.uniforms.uColor.value = X(m);
+  });
+  l.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] });
+  const c = new r.PerspectiveCamera(
+    60,
+    s.clientWidth / s.clientHeight,
+    1e-3,
+    1e4
+  );
+  c.position.set(0, 0, 5);
+  const h = new J(c, o.domElement);
+  h.enableDamping = !1;
+  const f = new r.Scene();
+  i?.("Building point cloud…");
+  const u = t.points3d.length > 0 ? ut(t.points3d) : null;
+  u && f.add(u), i?.("Building camera frustums…");
+  const E = ft(t.images, t.cameras);
+  f.add(E);
+  const A = new r.Group();
+  u && A.add(u.clone()), A.add(E.clone());
+  const C = new r.Box3().setFromObject(
+    u ?? E
+  ), p = new r.Vector3(), T = new r.Sphere();
+  C.getBoundingSphere(T), C.getCenter(p), a = wt(p, C.min.y, T.radius), f.add(a);
+  const x = bt(T.radius);
+  f.add(x), i?.("Loading image planes…");
+  const M = await Et(t.images, t.cameras, e);
+  f.add(M);
+  const b = () => {
+    const m = T.radius / Math.sin(c.fov * Math.PI / 360);
+    c.position.copy(p).add(new r.Vector3(0, 0, m * 1.5)), c.near = m * 1e-3, c.far = m * 100, c.updateProjectionMatrix(), h.target.copy(p), h.update();
+  };
+  b();
+  const R = T.radius * 5e-3;
+  u && (u.material.size = R);
+  let O;
+  const w = () => {
+    O = requestAnimationFrame(w), h.update(), o.render(f, c);
+  };
+  w();
+  const g = new ResizeObserver(() => {
+    const m = s.clientWidth, v = s.clientHeight;
+    o.setSize(m, v), c.aspect = m / v, c.updateProjectionMatrix();
+  });
+  return g.observe(s), {
+    objects: { pointCloud: u, frustums: E, axes: x, imagePlanes: M, grid: a },
+    canvas: o.domElement,
+    controls: h,
+    defaultPointSize: R,
+    resetView: b,
+    dispose: () => {
+      cancelAnimationFrame(O), g.disconnect(), l.disconnect(), o.dispose(), s.removeChild(o.domElement);
+    }
+  };
+}
+function Ct(s) {
+  return s >= 1e6 ? `${(s / 1e6).toFixed(1)}M` : s >= 1e3 ? `${(s / 1e3).toFixed(0)}k` : String(s);
+}
+function xt(s, t, e, i) {
+  const o = document.createElement("label");
+  o.className = "hud-toggle" + (e ? "" : " hud-toggle--disabled");
+  const n = document.createElement("input");
+  return n.type = "checkbox", n.checked = t, n.disabled = !e, e && n.addEventListener("change", () => i(n.checked)), o.append(n, document.createTextNode(" " + s)), o;
+}
+function Mt(s, t) {
+  const e = document.createElement("div");
+  e.className = "hud";
+  const i = document.createElement("div");
+  i.className = "hud-title", i.textContent = "COLMAP Viewer";
+  const o = document.createElement("div");
+  o.className = "hud-stats";
+  const n = document.createElement("div");
+  n.textContent = `📷 Cameras: ${t.cameraCount}`;
+  const a = document.createElement("div");
+  a.textContent = `⚫ Points: ${Ct(t.pointCount)}`, o.append(n, a);
+  const l = document.createElement("hr");
+  l.className = "hud-divider";
+  const c = document.createElement("div");
+  c.className = "hud-toggles";
+  const h = [
+    ["grid", "Grid", !0],
+    ["pointCloud", "Point Cloud", t.pointCount > 0],
+    ["frustums", "Camera Frustums", t.cameraCount > 0],
+    ["axes", "Axes", !0],
+    ["imagePlanes", "Image Planes", t.hasImagePlanes]
+  ];
+  for (const [w, g, D] of h) {
+    const m = t.objects[w], v = xt(g, m?.visible ?? !0, D, (L) => {
+      m && (m.visible = L);
+    });
+    c.appendChild(v);
+  }
+  const f = document.createElement("hr");
+  f.className = "hud-divider";
+  const u = document.createElement("div");
+  u.className = "hud-size-section", u.style.display = t.pointCount > 0 ? "" : "none";
+  const E = document.createElement("div");
+  E.style.cssText = "display:flex;justify-content:space-between;align-items:baseline";
+  const A = document.createElement("div");
+  A.className = "hud-size-label", A.textContent = "Point Size";
+  const C = document.createElement("div");
+  C.className = "hud-size-label", C.textContent = "1.0×", E.append(A, C);
+  const p = document.createElement("input");
+  p.type = "range", p.className = "hud-slider", p.min = "0.1", p.max = "5", p.step = "0.05", p.value = "1", p.addEventListener("input", () => {
+    const { pointCloud: w } = t.objects;
+    if (!w) return;
+    const g = parseFloat(p.value), D = w.material;
+    D.size = t.defaultPointSize * g, C.textContent = g.toFixed(1) + "×";
+  }), u.append(E, p);
+  const T = document.createElement("hr");
+  T.className = "hud-divider";
+  const x = document.createElement("button");
+  x.className = "hud-btn", x.textContent = "Reset View", x.addEventListener("click", t.onReset);
+  const M = [i, o, l, c, f, u, T, x];
+  if (t.showThemeToggle !== !1) {
+    const w = document.createElement("hr");
+    w.className = "hud-divider";
+    const g = document.createElement("button");
+    g.className = "hud-theme-btn";
+    const D = () => {
+      const m = document.documentElement.dataset.theme === "dark";
+      g.textContent = m ? "☀ Light Mode" : "◑ Dark Mode";
+    };
+    D(), g.addEventListener("click", () => {
+      const m = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
+      document.documentElement.dataset.theme = m, localStorage.setItem("theme", m), D();
+    }), M.push(w, g);
+  }
+  e.append(...M), s.appendChild(e);
+  let b;
+  t.onUploadNew && (b = document.createElement("button"), b.className = "upload-new-btn", b.textContent = "⬆ Upload New", b.addEventListener("click", t.onUploadNew), s.appendChild(b));
+  let R;
+  t.showControlsHint !== !1 && (R = document.createElement("div"), R.className = "controls-hint", R.textContent = "Rotate: drag  |  Zoom: scroll  |  Pan: right-drag", s.appendChild(R));
+  let O;
+  if (t.showAxisLegend !== !1) {
+    O = document.createElement("div"), O.className = "axis-legend";
+    const w = [
+      ["X", "#ff2222", null],
+      ["Y ↑", "#00cc00", "COLMAP −Y ↓"],
+      ["Z", "#2266ff", "COLMAP −Z"]
+    ];
+    for (const [g, D, m] of w) {
+      const v = document.createElement("div");
+      v.className = "axis-legend-row";
+      const L = document.createElement("span");
+      if (L.className = "axis-legend-name", L.textContent = g, L.style.color = D, v.appendChild(L), m) {
+        const z = document.createElement("span");
+        z.className = "axis-legend-sub", z.textContent = m, v.appendChild(z);
+      }
+      O.appendChild(v);
+    }
+    s.appendChild(O);
+  }
+  return () => {
+    e.remove(), b?.remove(), R?.remove(), O?.remove();
+  };
+}
+class St {
+  container;
+  options;
+  scene = null;
+  disposeHud;
+  statusEl = null;
+  abortController = null;
+  constructor(t, e = {}) {
+    this.container = t, this.options = e;
+  }
+  async loadFromUrls(t) {
+    this.abortController?.abort();
+    const e = new AbortController();
+    this.abortController = e, this._setStatus("Fetching COLMAP files…");
+    try {
+      const [i, o, n] = await Promise.all([
+        U(t.cameras),
+        U(t.images),
+        t.points3d ? U(t.points3d) : Promise.resolve(void 0)
+      ]);
+      if (e.signal.aborted) return;
+      await this._render({ cameras: i, images: o, points3d: n }, e.signal);
+    } catch (i) {
+      if (e.signal.aborted) return;
+      this._setError(i instanceof Error ? i.message : String(i));
+    }
+  }
+  async loadFromBuffers(t) {
+    this.abortController?.abort();
+    const e = new AbortController();
+    this.abortController = e, await this._render(t, e.signal);
+  }
+  dispose() {
+    this.abortController?.abort(), this.abortController = null, this._teardown();
+  }
+  async _render(t, e) {
+    this._teardown(), this._setStatus("Parsing…");
+    try {
+      const i = await V(t);
+      if (e.aborted) return;
+      this._setStatus("Building scene…");
+      const o = await Pt(
+        this.container,
+        i,
+        /* @__PURE__ */ new Map(),
+        (n) => this._setStatus(n)
+      );
+      if (e.aborted) {
+        o.dispose();
+        return;
+      }
+      this.scene = o, this._clearStatus(), this.disposeHud = Mt(this.container, {
+        cameraCount: i.images.length,
+        pointCount: i.points3d.length,
+        hasImagePlanes: !1,
+        objects: o.objects,
+        defaultPointSize: o.defaultPointSize,
+        onReset: o.resetView,
+        showThemeToggle: this.options.showThemeToggle,
+        showAxisLegend: this.options.showAxisLegend,
+        showControlsHint: this.options.showControlsHint
+      });
+    } catch (i) {
+      if (e.aborted) return;
+      this._setError(i instanceof Error ? i.message : String(i));
+    }
+  }
+  _teardown() {
+    this.disposeHud?.(), this.disposeHud = void 0, this.scene?.dispose(), this.scene = null, this._clearStatus();
+  }
+  _setStatus(t) {
+    this.statusEl || (this.statusEl = document.createElement("div"), this.statusEl.className = "colmap-renderer-status", this.container.appendChild(this.statusEl)), this.statusEl.textContent = t;
+  }
+  _clearStatus() {
+    this.statusEl?.remove(), this.statusEl = null;
+  }
+  _setError(t) {
+    this._teardown(), this.statusEl || (this.statusEl = document.createElement("div"), this.container.appendChild(this.statusEl)), this.statusEl.className = "colmap-renderer-error", this.statusEl.textContent = `Error: ${t}`;
+  }
+}
+async function U(s) {
+  const t = await fetch(s);
+  if (!t.ok) throw new Error(`fetch failed: ${t.status} ${t.statusText}`);
+  return t.arrayBuffer();
+}
+class Tt extends HTMLElement {
+  static observedAttributes = [
+    "cameras-url",
+    "images-url",
+    "points3d-url",
+    "show-theme-toggle",
+    "show-axis-legend",
+    "show-controls-hint"
+  ];
+  renderer = null;
+  connectedCallback() {
+    getComputedStyle(this).position === "static" && (this.style.position = "relative"), this.renderer = new St(this, this._readOptions()), this._maybeLoad();
+  }
+  disconnectedCallback() {
+    this.renderer?.dispose(), this.renderer = null;
+  }
+  attributeChangedCallback() {
+    this.renderer && this._maybeLoad();
+  }
+  _readOptions() {
+    return {
+      showThemeToggle: this._boolAttr("show-theme-toggle"),
+      showAxisLegend: this._boolAttr("show-axis-legend"),
+      showControlsHint: this._boolAttr("show-controls-hint")
+    };
+  }
+  _boolAttr(t) {
+    const e = this.getAttribute(t);
+    if (e !== null)
+      return e !== "false";
+  }
+  _maybeLoad() {
+    const t = this.getAttribute("cameras-url"), e = this.getAttribute("images-url");
+    !t || !e || this.renderer?.loadFromUrls({
+      cameras: t,
+      images: e,
+      points3d: this.getAttribute("points3d-url") ?? void 0
+    });
+  }
+}
+customElements.get("colmap-viewer") || customElements.define("colmap-viewer", Tt);
+async function At(s, t) {
+  t?.("Parsing cameras…");
+  const e = await V({
+    cameras: s.cameras,
+    images: s.images,
+    points3d: s.points3d
+  });
+  return t?.(`Parsed ${e.cameras.length} cameras, ${e.points3d.length} points`), e;
+}
+export {
+  St as ColmapRenderer,
+  Tt as ColmapViewerElement,
+  Pt as buildScene,
+  Mt as createHud,
+  At as parse
+};

package/dist/element.d.ts

@@ -0,0 +1,10 @@
+export declare class ColmapViewerElement extends HTMLElement {
+    static observedAttributes: string[];
+    private renderer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private _readOptions;
+    private _boolAttr;
+    private _maybeLoad;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { ColmapViewerElement } from './element';
+export { ColmapRenderer } from './renderer';
+export type { ColmapUrls, ColmapBuffers, ColmapRendererOptions } from './renderer';
+export { parse } from './parser/index';
+export type { ColmapFiles } from './parser/index';
+export { buildScene } from './scene/index';
+export { createHud } from './ui/hud';
+export type { HudOptions, LayerKey } from './ui/hud';

package/dist/parser/index.d.ts

@@ -0,0 +1,9 @@
+import { ColmapResult } from '@thethingteam/colmap-wasm';
+export type { ColmapResult };
+export interface ColmapFiles {
+    cameras: ArrayBuffer;
+    images: ArrayBuffer;
+    points3d?: ArrayBuffer;
+    imageFiles: Map<string, File>;
+}
+export declare function parse(files: ColmapFiles, onProgress?: (message: string) => void): Promise<ColmapResult>;

package/dist/renderer.d.ts

@@ -0,0 +1,32 @@
+export interface ColmapUrls {
+    cameras: string;
+    images: string;
+    points3d?: string;
+}
+export interface ColmapBuffers {
+    cameras: ArrayBuffer;
+    images: ArrayBuffer;
+    points3d?: ArrayBuffer;
+}
+export interface ColmapRendererOptions {
+    showThemeToggle?: boolean;
+    showAxisLegend?: boolean;
+    showControlsHint?: boolean;
+}
+export declare class ColmapRenderer {
+    private container;
+    private options;
+    private scene;
+    private disposeHud?;
+    private statusEl;
+    private abortController;
+    constructor(container: HTMLElement, options?: ColmapRendererOptions);
+    loadFromUrls(urls: ColmapUrls): Promise<void>;
+    loadFromBuffers(data: ColmapBuffers): Promise<void>;
+    dispose(): void;
+    private _render;
+    private _teardown;
+    private _setStatus;
+    private _clearStatus;
+    private _setError;
+}

package/dist/scene/axes.d.ts

@@ -0,0 +1,2 @@
+import * as THREE from 'three';
+export declare function createAxes(sceneRadius: number): THREE.AxesHelper;

package/dist/scene/cameras.d.ts

@@ -0,0 +1,3 @@
+import { Image, Camera } from '@thethingteam/colmap-wasm';
+import * as THREE from 'three';
+export declare function createCameraFrustums(images: Image[], cameras: Camera[]): THREE.Group;

package/dist/scene/grid.d.ts

@@ -0,0 +1,3 @@
+import * as THREE from 'three';
+export declare function getGridColor(isDark: boolean): THREE.Color;
+export declare function createGrid(center: THREE.Vector3, minY: number, sceneRadius: number): THREE.Mesh;

package/dist/scene/image-planes.d.ts

@@ -0,0 +1,3 @@
+import { Image, Camera } from '@thethingteam/colmap-wasm';
+import * as THREE from 'three';
+export declare function createImagePlanes(images: Image[], cameras: Camera[], imageFiles: Map<string, File>): Promise<THREE.Group>;

package/dist/scene/index.d.ts

@@ -0,0 +1,19 @@
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { ColmapResult } from '../parser/index';
+import * as THREE from 'three';
+export interface SceneObjects {
+    pointCloud: THREE.Points | null;
+    frustums: THREE.Group;
+    axes: THREE.AxesHelper;
+    imagePlanes: THREE.Group;
+    grid: THREE.Mesh;
+}
+export interface SceneHandle {
+    objects: SceneObjects;
+    canvas: HTMLCanvasElement;
+    controls: OrbitControls;
+    defaultPointSize: number;
+    resetView: () => void;
+    dispose: () => void;
+}
+export declare function buildScene(container: HTMLElement, result: ColmapResult, imageFiles: Map<string, File>, onProgress?: (msg: string) => void): Promise<SceneHandle>;

package/dist/scene/point-cloud.d.ts

@@ -0,0 +1,3 @@
+import { Point3D } from '@thethingteam/colmap-wasm';
+import * as THREE from 'three';
+export declare function createPointCloud(points: Point3D[]): THREE.Points;

package/dist/ui/hud.d.ts

@@ -0,0 +1,15 @@
+import { SceneObjects } from '../scene/index';
+export type LayerKey = 'pointCloud' | 'frustums' | 'axes' | 'imagePlanes' | 'grid';
+export interface HudOptions {
+    cameraCount: number;
+    pointCount: number;
+    hasImagePlanes: boolean;
+    objects: SceneObjects;
+    defaultPointSize: number;
+    onReset: () => void;
+    onUploadNew?: () => void;
+    showThemeToggle?: boolean;
+    showAxisLegend?: boolean;
+    showControlsHint?: boolean;
+}
+export declare function createHud(container: HTMLElement, opts: HudOptions): () => void;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@thethingteam/colmap-viewer",
+  "version": "0.1.0",
+  "description": "3D viewer for COLMAP reconstruction results",
+  "type": "module",
+  "main": "./dist/colmap-viewer.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/colmap-viewer.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thethingteam/colmap-viewer.git"
+  },
+  "keywords": [
+    "colmap",
+    "3d",
+    "viewer",
+    "sfm",
+    "webgl",
+    "three"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@thethingteam/colmap-wasm": "*",
+    "three": ">=0.170.0"
+  },
+  "devDependencies": {
+    "@thethingteam/colmap-wasm": "*",
+    "@types/three": "^0.177.0",
+    "three": "^0.177.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^5.0.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  }
+}