3dtiles-inspector 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -6,6 +6,17 @@ The format is based on Keep a Changelog and this project follows Semantic Versio
 
 ## [Unreleased]
 
+## [0.1.8] - 2026-05-03
+
+### Added
+
+- Added a camera pivot indicator for rotate, pan, and zoom interactions.
+- Added bottom-right tile runtime stats for downloading, parsing, loaded, and visible tile counts.
+
+### Changed
+
+- Moved the `Canvas` toolbar section above `Transform`.
+
 ## [0.1.7] - 2026-04-27
 
 ### Changed

package/README.md

@@ -14,6 +14,13 @@
 
 Requires Node.js 18 or newer.
 
+## Built On
+
+This project is based on and integrates work from:
+
+- [WilliamLiu-1997/3D-Tiles-RendererJS-3DGS-Plugin](https://github.com/WilliamLiu-1997/3D-Tiles-RendererJS-3DGS-Plugin)
+- [NASA-AMMOS/3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS)
+
 ## Install
 
 ```bash

package/dist/inspector-assets/viewer/app.js

@@ -64485,6 +64485,88 @@ var PointerTracker = class {
     return Boolean(this.buttons & 4);
   }
 };
+var PivotPointMesh = class extends Mesh {
+  constructor(size = 15, thickness = 3) {
+    super(new PlaneGeometry(0, 0), new PivotMaterial(size, thickness));
+    this.renderOrder = Infinity;
+  }
+  set focus(value) {
+    this.material.uniforms.opacity.value = value ? 1 : 0.5;
+  }
+  onBeforeRender(renderer2) {
+    renderer2.getSize(this.material.uniforms.resolution.value);
+  }
+  updateMatrixWorld() {
+    this.matrixWorld.makeTranslation(this.position);
+  }
+  dispose() {
+    this.geometry.dispose();
+    this.material.dispose();
+  }
+};
+var PivotMaterial = class extends ShaderMaterial {
+  constructor(size, thickness) {
+    const coreD = size + thickness;
+    const planeD = coreD + 3 * thickness;
+    const normThk = thickness / coreD;
+    const ringR = (coreD - 0.4 * thickness - 4) / coreD;
+    const hw = 0.4 * normThk;
+    super({
+      depthWrite: false,
+      depthTest: false,
+      transparent: true,
+      uniforms: {
+        resolution: { value: new Vector2() },
+        opacity: { value: 1 },
+        planeD: { value: planeD },
+        hw: { value: hw },
+        ringR: { value: ringR },
+        shadowW: { value: hw * 5 },
+        uvScale: { value: planeD / coreD }
+      },
+      vertexShader: `
+        uniform float planeD;
+        uniform vec2 resolution;
+        varying vec2 vUv;
+
+        void main() {
+          vUv = uv;
+          float aspect = resolution.x / resolution.y;
+          vec2 offset = uv * 2.0 - vec2(1.0);
+          offset.y *= aspect;
+          vec4 screenPoint = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          screenPoint.xy += offset * planeD * screenPoint.w / resolution.x;
+          gl_Position = screenPoint;
+        }
+      `,
+      fragmentShader: `
+        uniform float hw;
+        uniform float ringR;
+        uniform float shadowW;
+        uniform float opacity;
+        uniform float uvScale;
+        varying vec2 vUv;
+
+        void main() {
+          vec2 uv = (vUv * 2.0 - 1.0) * uvScale;
+          float len = length(uv);
+          float fw = fwidth(len) * 0.5;
+          float d = abs(len - ringR);
+
+          float ring = 1.0 - smoothstep(hw - fw, hw + fw, d);
+
+          float shadow = (1.0 - smoothstep(hw, shadowW, d)) * (1.0 - smoothstep(ringR - fw, ringR + fw, len)) * 0.5;
+
+          float white = ring;
+          float black = shadow * (1.0 - white);
+          float alpha = (white + black) * opacity;
+          if (alpha < 0.001) discard;
+          gl_FragColor = vec4(vec3(white / max(alpha / opacity, 0.001)), alpha);
+        }
+      `
+    });
+  }
+};
 var _matrix2 = new Matrix4();
 function setRaycasterFromCamera(raycaster, coords, camera2) {
   const ray = raycaster instanceof Ray ? raycaster : raycaster.ray;
@@ -64522,6 +64604,8 @@ var UPDATE_EVENT = { type: "update" };
 var FINISH_EVENT = { type: "finish" };
 var THRESHOLD = 1e-3;
 var MAX = 1e8;
+var PIVOT_SIZE = 22;
+var PIVOT_THICKNESS = 2.5;
 var VIRTUAL_HIT_DISTANCE = 50;
 var ZOOM_OUT_TRANSITION_COS_THRESHOLD = Math.cos(105 * Math.PI / 180);
 var ZOOM_OUT_TRANSITION_COS_MAX_THRESHOLD = Math.cos(95 * Math.PI / 180);
@@ -64550,7 +64634,7 @@ var _quaternion2 = new Quaternion();
 var _plane = new Plane();
 var _ray2 = new Ray();
 var _zoomOutMetrics = { distanceScale: 1, transitionWeight: 0 };
-var _pointerTracker, _domElement, _camera3, _scene2, _raycaster2, _zoomDelta, _zoomInertia, _rotateInertia, _dragInertia, _dragAnchorPoint, _dragStartPosition, _dragStartQuaternion, _dragPlaneNormal, _inertiaValue, _enabled, _ellipsoid, _ellipsoidMaxRadius, _lastTime, _hit, _contextMenuEvent, _pointerDownEvent, _pointerMoveEvent, _pointerUpEvent, _wheelEvent, _pointerEnterEvent, _zoomTimeout, _CameraController_instances, setState_fn, setZooming_fn, resetState_fn, bindEvents_fn, _contextMenu, _pointerDown, _pointerMove, _pointerUp, _wheel, _pointerEnter, finalizeCamera_fn, alignCameraRightToXYPlane_fn, rotateNearAnchor_fn, clampVerticalRotateAngle_fn, rotate_fn, initializeDragAnchor_fn, restoreDragStartCamera_fn, intersectDragPlane_fn, modifiedDrag_fn, keepCameraUpAtFixedPoint_fn, getZoomOutMetrics_fn, getScaledZoomTarget_fn, getZoomOutTransitionTarget_fn, getZoomPosition_fn, applyZoom_fn, reachCameraMaxDistance_fn, isCameraCenterMode_fn, limitCameraDistance_fn, shouldDragModified_fn, keepCameraUp_fn, normalRaycastClosest_fn, raycast_fn;
+var _pointerTracker, _domElement, _camera3, _scene2, _raycaster2, _pivotMesh, _zoomDelta, _zoomInertia, _rotateInertia, _dragInertia, _dragAnchorPoint, _dragStartPosition, _dragStartQuaternion, _dragPlaneNormal, _inertiaValue, _enabled, _ellipsoid, _ellipsoidMaxRadius, _lastTime, _hit, _contextMenuEvent, _pointerDownEvent, _pointerMoveEvent, _pointerUpEvent, _wheelEvent, _pointerEnterEvent, _zoomTimeout, _CameraController_instances, setState_fn, setZooming_fn, resetState_fn, bindEvents_fn, _contextMenu, updateIndicatorFromHit_fn, _pointerDown, _pointerMove, _pointerUp, _wheel, _pointerEnter, finalizeCamera_fn, alignCameraRightToXYPlane_fn, rotateNearAnchor_fn, clampVerticalRotateAngle_fn, rotate_fn, initializeDragAnchor_fn, restoreDragStartCamera_fn, intersectDragPlane_fn, modifiedDrag_fn, keepCameraUpAtFixedPoint_fn, getZoomOutMetrics_fn, getScaledZoomTarget_fn, getZoomOutTransitionTarget_fn, getZoomPosition_fn, applyZoom_fn, reachCameraMaxDistance_fn, isCameraCenterMode_fn, limitCameraDistance_fn, shouldDragModified_fn, keepCameraUp_fn, normalRaycastClosest_fn, raycast_fn;
 var CameraController = class extends EventDispatcher {
   constructor(renderer2, scene2, camera2, options = {}) {
     super();
@@ -64567,6 +64651,7 @@ var CameraController = class extends EventDispatcher {
     __privateAdd(this, _camera3);
     __privateAdd(this, _scene2);
     __privateAdd(this, _raycaster2);
+    __privateAdd(this, _pivotMesh);
     __privateAdd(this, _zoomDelta);
     __privateAdd(this, _zoomInertia);
     __privateAdd(this, _rotateInertia);
@@ -64624,6 +64709,7 @@ var CameraController = class extends EventDispatcher {
         mouseToCoords(_pointer1.x, _pointer1.y, __privateGet(this, _domElement), _pointer1);
         setRaycasterFromCamera(__privateGet(this, _raycaster2), _pointer1, __privateGet(this, _camera3));
         __privateSet(this, _hit, __privateMethod(this, _CameraController_instances, raycast_fn).call(this, __privateGet(this, _raycaster2)));
+        __privateMethod(this, _CameraController_instances, updateIndicatorFromHit_fn).call(this);
         if (this.state === DRAG && __privateGet(this, _hit).distance > 0) {
           __privateMethod(this, _CameraController_instances, initializeDragAnchor_fn).call(this);
         }
@@ -64660,7 +64746,7 @@ var CameraController = class extends EventDispatcher {
       if (!__privateGet(this, _enabled)) {
         return;
       }
-      const tooClose = __privateGet(this, _hit) ? __privateGet(this, _hit).point.distanceTo(__privateGet(this, _camera3).position) <= __privateGet(this, _camera3).near : false;
+      const tooClose = __privateGet(this, _pivotMesh).position.distanceTo(__privateGet(this, _camera3).position) <= __privateGet(this, _camera3).near;
       if (!this.zooming || tooClose) {
         __privateGet(this, _rotateInertia).set(0, 0);
         __privateGet(this, _dragInertia).set(0, 0, 0);
@@ -64674,6 +64760,7 @@ var CameraController = class extends EventDispatcher {
       setRaycasterFromCamera(__privateGet(this, _raycaster2), _pointer1, __privateGet(this, _camera3));
       if (!this.zooming && this.state === NONE || tooClose) {
         __privateSet(this, _hit, __privateMethod(this, _CameraController_instances, raycast_fn).call(this, __privateGet(this, _raycaster2)));
+        __privateMethod(this, _CameraController_instances, updateIndicatorFromHit_fn).call(this);
       }
       let delta = 0;
       switch (e.deltaMode) {
@@ -64721,6 +64808,8 @@ var CameraController = class extends EventDispatcher {
     __privateSet(this, _pointerTracker, new PointerTracker());
     __privateSet(this, _raycaster2, new Raycaster());
     __privateGet(this, _raycaster2).params.Points.threshold = 0.1;
+    __privateSet(this, _pivotMesh, new PivotPointMesh(PIVOT_SIZE, PIVOT_THICKNESS));
+    __privateGet(this, _pivotMesh).visible = false;
     __privateSet(this, _zoomDelta, 0);
     __privateSet(this, _zoomInertia, 0);
     __privateSet(this, _rotateInertia, new Vector2());
@@ -64759,6 +64848,9 @@ var CameraController = class extends EventDispatcher {
   get camera() {
     return __privateGet(this, _camera3);
   }
+  get indicator() {
+    return __privateGet(this, _pivotMesh);
+  }
   setCamera(camera2) {
     __privateSet(this, _camera3, camera2);
     __privateMethod(this, _CameraController_instances, resetState_fn).call(this);
@@ -64772,6 +64864,9 @@ var CameraController = class extends EventDispatcher {
   }
   init() {
     __privateGet(this, _domElement).style.touchAction = "none";
+    __privateGet(this, _pivotMesh).raycast = () => {
+    };
+    __privateGet(this, _scene2).add(__privateGet(this, _pivotMesh));
     __privateSet(this, _contextMenuEvent, __privateGet(this, _contextMenu).bind(this));
     __privateSet(this, _pointerDownEvent, __privateGet(this, _pointerDown).bind(this));
     __privateSet(this, _pointerMoveEvent, __privateGet(this, _pointerMove).bind(this));
@@ -64945,6 +65040,8 @@ var CameraController = class extends EventDispatcher {
       "pointerenter",
       __privateGet(this, _pointerEnterEvent)
     );
+    __privateGet(this, _pivotMesh).removeFromParent();
+    __privateGet(this, _pivotMesh).dispose();
     __privateGet(this, _domElement).style.touchAction = "";
     __privateSet(this, _enabled, false);
     __privateSet(this, _ellipsoid, null);
@@ -64955,6 +65052,7 @@ _domElement = new WeakMap();
 _camera3 = new WeakMap();
 _scene2 = new WeakMap();
 _raycaster2 = new WeakMap();
+_pivotMesh = new WeakMap();
 _zoomDelta = new WeakMap();
 _zoomInertia = new WeakMap();
 _rotateInertia = new WeakMap();
@@ -64982,8 +65080,14 @@ setState_fn = function(state = this.state) {
     return;
   }
   this.state = state;
+  if (state !== NONE) {
+    __privateGet(this, _pivotMesh).visible = true;
+  }
 };
 setZooming_fn = function(zooming, touchZooming = false) {
+  if (!this.zooming && this.state === NONE && zooming) {
+    __privateGet(this, _pivotMesh).visible = true;
+  }
   this.zooming = zooming;
   this.touchZooming = touchZooming;
 };
@@ -65000,6 +65104,7 @@ resetState_fn = function() {
   __privateGet(this, _dragPlaneNormal).set(0, 0, 0);
   __privateSet(this, _zoomInertia, 0);
   __privateSet(this, _hit, null);
+  __privateGet(this, _pivotMesh).visible = false;
 };
 bindEvents_fn = function() {
   __privateGet(this, _domElement).addEventListener("contextmenu", __privateGet(this, _contextMenuEvent));
@@ -65010,6 +65115,15 @@ bindEvents_fn = function() {
   __privateGet(this, _domElement).addEventListener("pointerenter", __privateGet(this, _pointerEnterEvent));
 };
 _contextMenu = new WeakMap();
+updateIndicatorFromHit_fn = function() {
+  if (__privateGet(this, _hit) && __privateGet(this, _hit).distance > 0) {
+    __privateGet(this, _pivotMesh).visible = true;
+    __privateGet(this, _pivotMesh).position.copy(__privateGet(this, _hit).point);
+    __privateGet(this, _pivotMesh).focus = !__privateGet(this, _hit).onGlobe;
+  } else {
+    __privateGet(this, _pivotMesh).visible = false;
+  }
+};
 _pointerDown = new WeakMap();
 _pointerMove = new WeakMap();
 _pointerUp = new WeakMap();
@@ -65291,6 +65405,7 @@ applyZoom_fn = function(zoomAmount) {
     _forward.subVectors(hit.point, __privateGet(this, _camera3).position).normalize();
     hit.point.copy(__privateGet(this, _camera3).position).addScaledVector(_forward, VIRTUAL_HIT_DISTANCE);
     hit.distance = VIRTUAL_HIT_DISTANCE;
+    __privateGet(this, _pivotMesh).position.copy(hit.point);
   }
   let zoomFactor = Math.exp(-zoomAmount * 1e-3);
   if (this.minDistance > 0 && zoomFactor < 1) {
@@ -65463,6 +65578,12 @@ var MOVE_TO_COORDINATE_RADIUS = 10;
 var statusEl = document.getElementById("status");
 var cacheBytesValueEl = document.getElementById("cache-bytes-value");
 var splatsCountValueEl = document.getElementById("splats-count-value");
+var tilesDownloadingValueEl = document.getElementById(
+  "tiles-downloading-value"
+);
+var tilesParsingValueEl = document.getElementById("tiles-parsing-value");
+var tilesLoadedValueEl = document.getElementById("tiles-loaded-value");
+var tilesVisibleValueEl = document.getElementById("tiles-visible-value");
 var toolbarEl = document.getElementById("toolbar");
 var toolbarDockEl = toolbarEl.parentElement;
 var toolbarToggleButton = document.getElementById("toolbar-toggle");
@@ -65963,7 +66084,7 @@ function getActiveSparkSplatsCount() {
   return count;
 }
 function updateRuntimeStats(force = false) {
-  if (!cacheBytesValueEl || !splatsCountValueEl) {
+  if (!cacheBytesValueEl || !splatsCountValueEl || !tilesDownloadingValueEl || !tilesParsingValueEl || !tilesLoadedValueEl || !tilesVisibleValueEl) {
     return;
   }
   const now = performance.now();
@@ -65972,10 +66093,19 @@ function updateRuntimeStats(force = false) {
   }
   lastRuntimeStatsUpdateTime = now;
   const cacheBytes = tiles?.lruCache?.cachedBytes ?? 0;
+  const tilesStats = tiles?.stats;
+  const downloadingTiles = tilesStats?.downloading ?? 0;
+  const parsingTiles = tilesStats?.parsing ?? 0;
+  const loadedTiles = tilesStats?.loaded ?? 0;
+  const visibleTiles = tiles?.visibleTiles?.size ?? tilesStats?.visible ?? 0;
   const activeSparkSplats = getActiveSparkSplatsCount();
   const splatCount = activeSparkSplats !== null ? activeSparkSplats : getLoadedGaussianSplatCount();
   cacheBytesValueEl.textContent = formatBytes(cacheBytes);
   splatsCountValueEl.textContent = formatInteger(splatCount);
+  tilesDownloadingValueEl.textContent = formatInteger(downloadingTiles);
+  tilesParsingValueEl.textContent = formatInteger(parsingTiles);
+  tilesLoadedValueEl.textContent = formatInteger(loadedTiles);
+  tilesVisibleValueEl.textContent = formatInteger(visibleTiles);
 }
 function setGeometricErrorScaleExponent(exponent) {
   geometricErrorScaleExponent = clamp2(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dtiles-inspector",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Inspect, align, and save local 3D Tiles root transforms in an interactive browser session.",
   "author": "William Liu <lyz15972107087@gmail.com>",
   "license": "Apache-2.0",

package/src/viewer/app.js

@@ -79,6 +79,12 @@ const MOVE_TO_COORDINATE_RADIUS = 10;
 const statusEl = document.getElementById('status');
 const cacheBytesValueEl = document.getElementById('cache-bytes-value');
 const splatsCountValueEl = document.getElementById('splats-count-value');
+const tilesDownloadingValueEl = document.getElementById(
+  'tiles-downloading-value',
+);
+const tilesParsingValueEl = document.getElementById('tiles-parsing-value');
+const tilesLoadedValueEl = document.getElementById('tiles-loaded-value');
+const tilesVisibleValueEl = document.getElementById('tiles-visible-value');
 const toolbarEl = document.getElementById('toolbar');
 const toolbarDockEl = toolbarEl.parentElement;
 const toolbarToggleButton = document.getElementById('toolbar-toggle');
@@ -692,7 +698,14 @@ function getActiveSparkSplatsCount() {
 }
 
 function updateRuntimeStats(force = false) {
-  if (!cacheBytesValueEl || !splatsCountValueEl) {
+  if (
+    !cacheBytesValueEl ||
+    !splatsCountValueEl ||
+    !tilesDownloadingValueEl ||
+    !tilesParsingValueEl ||
+    !tilesLoadedValueEl ||
+    !tilesVisibleValueEl
+  ) {
     return;
   }
 
@@ -707,6 +720,11 @@ function updateRuntimeStats(force = false) {
   lastRuntimeStatsUpdateTime = now;
 
   const cacheBytes = tiles?.lruCache?.cachedBytes ?? 0;
+  const tilesStats = tiles?.stats;
+  const downloadingTiles = tilesStats?.downloading ?? 0;
+  const parsingTiles = tilesStats?.parsing ?? 0;
+  const loadedTiles = tilesStats?.loaded ?? 0;
+  const visibleTiles = tiles?.visibleTiles?.size ?? tilesStats?.visible ?? 0;
   const activeSparkSplats = getActiveSparkSplatsCount();
   const splatCount =
     activeSparkSplats !== null
@@ -715,6 +733,10 @@ function updateRuntimeStats(force = false) {
 
   cacheBytesValueEl.textContent = formatBytes(cacheBytes);
   splatsCountValueEl.textContent = formatInteger(splatCount);
+  tilesDownloadingValueEl.textContent = formatInteger(downloadingTiles);
+  tilesParsingValueEl.textContent = formatInteger(parsingTiles);
+  tilesLoadedValueEl.textContent = formatInteger(loadedTiles);
+  tilesVisibleValueEl.textContent = formatInteger(visibleTiles);
 }
 
 function setGeometricErrorScaleExponent(exponent) {

package/src/viewer/cameraController.js

@@ -1,10 +1,13 @@
 import {
   EventDispatcher,
   Matrix4,
+  Mesh,
   Plane,
+  PlaneGeometry,
   Quaternion,
   Ray,
   Raycaster,
+  ShaderMaterial,
   Vector2,
   Vector3,
 } from 'three';
@@ -191,6 +194,98 @@ class PointerTracker {
     return Boolean(this.buttons & 4);
   }
 }
+
+class PivotPointMesh extends Mesh {
+  constructor(size = 15, thickness = 3) {
+    super(new PlaneGeometry(0, 0), new PivotMaterial(size, thickness));
+    this.renderOrder = Infinity;
+  }
+
+  set focus(value) {
+    this.material.uniforms.opacity.value = value ? 1 : 0.5;
+  }
+
+  onBeforeRender(renderer) {
+    renderer.getSize(this.material.uniforms.resolution.value);
+  }
+
+  updateMatrixWorld() {
+    this.matrixWorld.makeTranslation(this.position);
+  }
+
+  dispose() {
+    this.geometry.dispose();
+    this.material.dispose();
+  }
+}
+
+class PivotMaterial extends ShaderMaterial {
+  constructor(size, thickness) {
+    const coreD = size + thickness;
+    const planeD = coreD + 3 * thickness;
+    const normThk = thickness / coreD;
+    const ringR = (coreD - 0.4 * thickness - 4.0) / coreD;
+    const hw = 0.4 * normThk;
+
+    super({
+      depthWrite: false,
+      depthTest: false,
+      transparent: true,
+
+      uniforms: {
+        resolution: { value: new Vector2() },
+        opacity: { value: 1 },
+        planeD: { value: planeD },
+        hw: { value: hw },
+        ringR: { value: ringR },
+        shadowW: { value: hw * 5.0 },
+        uvScale: { value: planeD / coreD },
+      },
+
+      vertexShader: `
+        uniform float planeD;
+        uniform vec2 resolution;
+        varying vec2 vUv;
+
+        void main() {
+          vUv = uv;
+          float aspect = resolution.x / resolution.y;
+          vec2 offset = uv * 2.0 - vec2(1.0);
+          offset.y *= aspect;
+          vec4 screenPoint = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          screenPoint.xy += offset * planeD * screenPoint.w / resolution.x;
+          gl_Position = screenPoint;
+        }
+      `,
+      fragmentShader: `
+        uniform float hw;
+        uniform float ringR;
+        uniform float shadowW;
+        uniform float opacity;
+        uniform float uvScale;
+        varying vec2 vUv;
+
+        void main() {
+          vec2 uv = (vUv * 2.0 - 1.0) * uvScale;
+          float len = length(uv);
+          float fw = fwidth(len) * 0.5;
+          float d = abs(len - ringR);
+
+          float ring = 1.0 - smoothstep(hw - fw, hw + fw, d);
+
+          float shadow = (1.0 - smoothstep(hw, shadowW, d)) * (1.0 - smoothstep(ringR - fw, ringR + fw, len)) * 0.5;
+
+          float white = ring;
+          float black = shadow * (1.0 - white);
+          float alpha = (white + black) * opacity;
+          if (alpha < 0.001) discard;
+          gl_FragColor = vec4(vec3(white / max(alpha / opacity, 0.001)), alpha);
+        }
+      `,
+    });
+  }
+}
+
 const _matrix = new Matrix4();
 // custom version of set raycaster from camera that relies on the underlying matrices
 // so the ray origin is position at the camera near clip.
@@ -240,6 +335,8 @@ const UPDATE_EVENT = { type: 'update' };
 const FINISH_EVENT = { type: 'finish' };
 const THRESHOLD = 1e-3;
 const MAX = 1e8;
+const PIVOT_SIZE = 22;
+const PIVOT_THICKNESS = 2.5;
 const VIRTUAL_HIT_DISTANCE = 50;
 const ZOOM_OUT_TRANSITION_COS_THRESHOLD = Math.cos((105 * Math.PI) / 180);
 const ZOOM_OUT_TRANSITION_COS_MAX_THRESHOLD = Math.cos((95 * Math.PI) / 180);
@@ -281,6 +378,7 @@ class CameraController extends EventDispatcher {
   #camera;
   #scene;
   #raycaster;
+  #pivotMesh;
   #zoomDelta;
   #zoomInertia;
   #rotateInertia;
@@ -330,6 +428,8 @@ class CameraController extends EventDispatcher {
     this.#pointerTracker = new PointerTracker();
     this.#raycaster = new Raycaster();
     this.#raycaster.params.Points.threshold = 0.1;
+    this.#pivotMesh = new PivotPointMesh(PIVOT_SIZE, PIVOT_THICKNESS);
+    this.#pivotMesh.visible = false;
     this.#zoomDelta = 0;
     this.#zoomInertia = 0;
     this.#rotateInertia = new Vector2();
@@ -368,13 +468,22 @@ class CameraController extends EventDispatcher {
   get camera() {
     return this.#camera;
   }
+  get indicator() {
+    return this.#pivotMesh;
+  }
   #setState(state = this.state) {
     if (this.state === state) {
       return;
     }
     this.state = state;
+    if (state !== NONE) {
+      this.#pivotMesh.visible = true;
+    }
   }
   #setZooming(zooming, touchZooming = false) {
+    if (!this.zooming && this.state === NONE && zooming) {
+      this.#pivotMesh.visible = true;
+    }
     this.zooming = zooming;
     this.touchZooming = touchZooming;
   }
@@ -391,6 +500,7 @@ class CameraController extends EventDispatcher {
     this.#dragPlaneNormal.set(0, 0, 0);
     this.#zoomInertia = 0;
     this.#hit = null;
+    this.#pivotMesh.visible = false;
   }
   setCamera(camera) {
     this.#camera = camera;
@@ -405,6 +515,8 @@ class CameraController extends EventDispatcher {
   }
   init() {
     this.#domElement.style.touchAction = 'none';
+    this.#pivotMesh.raycast = () => {};
+    this.#scene.add(this.#pivotMesh);
     this.#contextMenuEvent = this.#contextMenu.bind(this);
     this.#pointerDownEvent = this.#pointerDown.bind(this);
     this.#pointerMoveEvent = this.#pointerMove.bind(this);
@@ -600,6 +712,8 @@ class CameraController extends EventDispatcher {
       'pointerenter',
       this.#pointerEnterEvent,
     );
+    this.#pivotMesh.removeFromParent();
+    this.#pivotMesh.dispose();
     this.#domElement.style.touchAction = '';
     this.#enabled = false;
     this.#ellipsoid = null;
@@ -615,6 +729,15 @@ class CameraController extends EventDispatcher {
   #contextMenu = (e) => {
     e.preventDefault();
   };
+  #updateIndicatorFromHit() {
+    if (this.#hit && this.#hit.distance > 0) {
+      this.#pivotMesh.visible = true;
+      this.#pivotMesh.position.copy(this.#hit.point);
+      this.#pivotMesh.focus = !this.#hit.onGlobe;
+    } else {
+      this.#pivotMesh.visible = false;
+    }
+  }
   #pointerDown = (e) => {
     if (!this.#enabled) {
       return;
@@ -653,6 +776,7 @@ class CameraController extends EventDispatcher {
       mouseToCoords(_pointer1.x, _pointer1.y, this.#domElement, _pointer1);
       setRaycasterFromCamera(this.#raycaster, _pointer1, this.#camera);
       this.#hit = this.#raycast(this.#raycaster);
+      this.#updateIndicatorFromHit();
       if (this.state === DRAG && this.#hit.distance > 0) {
         this.#initializeDragAnchor();
       }
@@ -689,9 +813,9 @@ class CameraController extends EventDispatcher {
     if (!this.#enabled) {
       return;
     }
-    const tooClose = this.#hit
-      ? this.#hit.point.distanceTo(this.#camera.position) <= this.#camera.near
-      : false;
+    const tooClose =
+      this.#pivotMesh.position.distanceTo(this.#camera.position) <=
+      this.#camera.near;
     if (!this.zooming || tooClose) {
       this.#rotateInertia.set(0, 0);
       this.#dragInertia.set(0, 0, 0);
@@ -705,6 +829,7 @@ class CameraController extends EventDispatcher {
     setRaycasterFromCamera(this.#raycaster, _pointer1, this.#camera);
     if ((!this.zooming && this.state === NONE) || tooClose) {
       this.#hit = this.#raycast(this.#raycaster);
+      this.#updateIndicatorFromHit();
     }
     let delta = 0;
     switch (e.deltaMode) {
@@ -1056,6 +1181,7 @@ class CameraController extends EventDispatcher {
         .copy(this.#camera.position)
         .addScaledVector(_forward, VIRTUAL_HIT_DISTANCE);
       hit.distance = VIRTUAL_HIT_DISTANCE;
+      this.#pivotMesh.position.copy(hit.point);
     }
     let zoomFactor = Math.exp(-zoomAmount * 0.001);
     if (this.minDistance > 0 && zoomFactor < 1) {

package/src/viewer/session.js

@@ -900,6 +900,24 @@ function buildViewerHtml(viewerConfig) {
         pointer-events: none;
       }
 
+      .tile-runtime-stats {
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-end;
+        gap: 14px;
+        box-sizing: border-box;
+        max-width: calc(100vw - 32px);
+        padding: 4px 8px;
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 0.15);
+        backdrop-filter: blur(6px);
+        z-index: 12;
+        pointer-events: none;
+      }
+
       .runtime-stat {
         display: grid;
         gap: 4px;
@@ -912,6 +930,19 @@ function buildViewerHtml(viewerConfig) {
         backdrop-filter: blur(14px);
       }
 
+      .tile-runtime-stats .runtime-stat {
+        display: inline-flex;
+        align-items: center;
+        gap: 0;
+        min-width: 0;
+        padding: 0;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        backdrop-filter: none;
+      }
+
       .runtime-stat-label {
         margin: 0;
         font-size: 10px;
@@ -921,6 +952,18 @@ function buildViewerHtml(viewerConfig) {
         color: #5d738b;
       }
 
+      .tile-runtime-stats .runtime-stat-label,
+      .tile-runtime-stats .runtime-stat-value {
+        display: inline-flex;
+        align-items: center;
+        font-size: 12px;
+        font-weight: 400;
+        letter-spacing: 0;
+        line-height: 14px;
+        text-transform: none;
+        color: #24292f;
+      }
+
       .runtime-stat-value {
         margin: 0;
         font-size: 15px;
@@ -929,6 +972,10 @@ function buildViewerHtml(viewerConfig) {
         color: #16324f;
       }
 
+      .tile-runtime-stats .runtime-stat-value {
+        font-variant-numeric: tabular-nums;
+      }
+
       canvas {
         display: block;
       }
@@ -1216,6 +1263,16 @@ function buildViewerHtml(viewerConfig) {
           top: 16px;
           right: 16px;
           left: 16px;
+          flex-wrap: wrap;
+          justify-content: stretch;
+          max-width: none;
+        }
+
+        .tile-runtime-stats {
+          right: 16px;
+          bottom: 16px;
+          left: 16px;
+          flex-wrap: wrap;
           justify-content: stretch;
           max-width: none;
         }
@@ -1225,6 +1282,11 @@ function buildViewerHtml(viewerConfig) {
           min-width: 0;
         }
 
+        .tile-runtime-stats .runtime-stat {
+          flex: 0 0 auto;
+          min-width: 0;
+        }
+
         .toolbar-dock {
           top: auto;
           bottom: 16px;
@@ -1257,6 +1319,24 @@ function buildViewerHtml(viewerConfig) {
         <p id="splats-count-value" class="runtime-stat-value">0</p>
       </div>
     </div>
+    <div class="tile-runtime-stats" aria-live="polite">
+      <div class="runtime-stat">
+        <p class="runtime-stat-label">Downloading:&nbsp;</p>
+        <p id="tiles-downloading-value" class="runtime-stat-value">0</p>
+      </div>
+      <div class="runtime-stat">
+        <p class="runtime-stat-label">Parsing:&nbsp;</p>
+        <p id="tiles-parsing-value" class="runtime-stat-value">0</p>
+      </div>
+      <div class="runtime-stat">
+        <p class="runtime-stat-label">Loaded:&nbsp;</p>
+        <p id="tiles-loaded-value" class="runtime-stat-value">0</p>
+      </div>
+      <div class="runtime-stat">
+        <p class="runtime-stat-label">Visible:&nbsp;</p>
+        <p id="tiles-visible-value" class="runtime-stat-value">0</p>
+      </div>
+    </div>
     <div class="toolbar-dock expanded">
       <button
         id="toolbar-toggle"
@@ -1269,16 +1349,6 @@ function buildViewerHtml(viewerConfig) {
         Hide Sidebar
       </button>
       <div id="toolbar" class="toolbar">
-        <div class="toolbar-section">
-          <div class="toolbar-section-header">
-            <p class="toolbar-section-title">Transform</p>
-          </div>
-          <div class="transform-actions">
-            <button id="translate" type="button">Translate</button>
-            <button id="rotate" type="button">Rotate</button>
-            <button id="set-position" class="full-span" type="button">Set Position</button>
-          </div>
-        </div>
         <div class="toolbar-section">
           <div class="toolbar-section-header">
             <p class="toolbar-section-title">Canvas</p>
@@ -1289,6 +1359,16 @@ function buildViewerHtml(viewerConfig) {
             <button id="move-to-tiles" type="button">Move To Tiles</button>
           </div>
         </div>
+        <div class="toolbar-section">
+          <div class="toolbar-section-header">
+            <p class="toolbar-section-title">Transform</p>
+          </div>
+          <div class="transform-actions">
+            <button id="translate" type="button">Translate</button>
+            <button id="rotate" type="button">Rotate</button>
+            <button id="set-position" class="full-span" type="button">Set Position</button>
+          </div>
+        </div>
         <div class="toolbar-section">
           <div class="toolbar-section-header">
             <p class="toolbar-section-title">Coordinate</p>
@@ -1299,8 +1379,8 @@ function buildViewerHtml(viewerConfig) {
             <label><span>Height</span><input id="height" type="number" step="any" value="0" /></label>
           </div>
           <div class="coordinate-actions">
-            <button id="move-tiles-to-coordinate" class="wide" type="button">Move Tiles</button>
             <button id="move-camera-to-coordinate" class="wide" type="button">Move Camera</button>
+            <button id="move-tiles-to-coordinate" class="wide" type="button">Move Tiles</button>
           </div>
         </div>
         <div class="toolbar-section">