3dtiles-inspector 0.2.9 → 0.2.10

package/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on Keep a Changelog and this project follows Semantic Versio
 
 ## [Unreleased]
 
+## [0.2.10] - 2026-05-22
+
+### Added
+
+- Added an infinite `Scale` drag track and editable value input for root transform edits.
+
 ## [0.2.9] - 2026-05-21
 
 ### Changed

package/README.md

@@ -85,7 +85,7 @@ const {
 
 <img src="https://raw.githubusercontent.com/WilliamLiu-1997/3DTiles-Inspector/main/screenshot.png" alt="screenshot" />
 
-- `Translate`, `Rotate`, and `Reset` for root transform edits
+- `Translate`, `Rotate`, infinite `Scale` track/value input, and `Reset` for root transform edits
 - `Move Camera` to a WGS84 latitude / longitude / height
 - `Move Tiles` to relocate the tileset root with an ENU-aligned transform
 - `Set Position` to click the globe, terrain, or loaded tiles and place the tileset there

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

@@ -45581,6 +45581,156 @@ var init_geometricError = __esm({
   }
 });
 
+// src/viewer/transform/uniformScale.js
+function exponentToUniformScale(exponent) {
+  return 2 ** exponent;
+}
+function scaleToExponent(scale) {
+  return Math.log2(scale);
+}
+function getFinitePositiveScale(value) {
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : null;
+}
+function normalizeUniformScale(value) {
+  const scale = getFinitePositiveScale(value);
+  if (scale === null) {
+    return null;
+  }
+  return scale;
+}
+function formatUniformScale(scale) {
+  const value = Number(scale);
+  if (!Number.isFinite(value)) {
+    return "1";
+  }
+  const absValue = Math.abs(value);
+  if (absValue > 0 && (absValue < 1e-5 || absValue >= 1e6)) {
+    return value.toExponential(3).replace(/\.?0+e/, "e");
+  }
+  const formatted = absValue < 0.01 ? value.toFixed(5) : absValue < 0.1 ? value.toFixed(4) : absValue < 10 ? value.toFixed(3) : absValue < 100 ? value.toFixed(2) : value.toFixed(1);
+  return formatted.replace(/\.?0+$/, "");
+}
+function createUniformScaleController({
+  applyScale,
+  uniformScaleTrackEl,
+  uniformScaleValueInput
+}) {
+  let uniformScale = 1;
+  let syncingInputs = false;
+  let trackDragStartClientX = 0;
+  let trackDragStartExponent = 0;
+  function getScaleExponent() {
+    return scaleToExponent(uniformScale);
+  }
+  function updateInputs() {
+    syncingInputs = true;
+    try {
+      const formattedScale = formatUniformScale(uniformScale);
+      uniformScaleTrackEl.setAttribute(
+        "aria-label",
+        `Scale x${formattedScale}`
+      );
+      uniformScaleTrackEl.title = `Scale x${formattedScale}`;
+      uniformScaleValueInput.value = formatUniformScale(uniformScale);
+    } finally {
+      syncingInputs = false;
+    }
+  }
+  function applyUniformScale(nextScale) {
+    uniformScale = nextScale;
+    applyScale(nextScale);
+    updateInputs();
+  }
+  function setScale(scale) {
+    const nextScale = normalizeUniformScale(scale);
+    if (nextScale === null) {
+      return false;
+    }
+    applyUniformScale(nextScale);
+    return true;
+  }
+  function setScaleExponent(exponent) {
+    const exponentNumber = Number(exponent);
+    if (!Number.isFinite(exponentNumber)) {
+      updateInputs();
+      return false;
+    }
+    const nextScale = exponentToUniformScale(exponentNumber);
+    if (!Number.isFinite(nextScale) || nextScale <= 0) {
+      updateInputs();
+      return false;
+    }
+    applyUniformScale(nextScale);
+    return true;
+  }
+  function beginTrackDrag(clientX) {
+    trackDragStartClientX = clientX;
+    trackDragStartExponent = getScaleExponent();
+    uniformScaleTrackEl.style.setProperty("--scale-track-offset", "0px");
+  }
+  function setScaleFromTrackClientX(clientX) {
+    const deltaX = clientX - trackDragStartClientX;
+    uniformScaleTrackEl.style.setProperty(
+      "--scale-track-offset",
+      `${deltaX}px`
+    );
+    return setScaleExponent(
+      trackDragStartExponent + deltaX / TRACK_PIXELS_PER_SCALE_EXPONENT
+    );
+  }
+  function nudgeScaleExponent(delta) {
+    return setScaleExponent(getScaleExponent() + delta);
+  }
+  function setScaleValue(value, { commit = false } = {}) {
+    if (syncingInputs) {
+      return true;
+    }
+    const rawValue = typeof value === "string" ? value.trim() : value;
+    if (rawValue === "" && !commit) {
+      return false;
+    }
+    const scale = normalizeUniformScale(rawValue);
+    if (scale === null) {
+      if (commit) {
+        updateInputs();
+      }
+      return false;
+    }
+    applyUniformScale(scale);
+    return true;
+  }
+  function initializeInputs() {
+    uniformScaleValueInput.removeAttribute("max");
+    uniformScaleValueInput.removeAttribute("min");
+    uniformScaleValueInput.step = "any";
+    updateInputs();
+  }
+  function syncFromRootScale(scale) {
+    const nextScale = normalizeUniformScale(scale);
+    uniformScale = nextScale === null ? 1 : nextScale;
+    updateInputs();
+  }
+  return {
+    beginTrackDrag,
+    formatScale: formatUniformScale,
+    getScale: () => uniformScale,
+    initializeInputs,
+    nudgeScaleExponent,
+    setScale,
+    setScaleExponent,
+    setScaleFromTrackClientX,
+    setScaleValue,
+    syncFromRootScale
+  };
+}
+var TRACK_PIXELS_PER_SCALE_EXPONENT;
+var init_uniformScale = __esm({
+  "src/viewer/transform/uniformScale.js"() {
+    TRACK_PIXELS_PER_SCALE_EXPONENT = 90;
+  }
+});
+
 // node_modules/@cesium/engine/Source/Core/defined.js
 function defined(value) {
   return value !== void 0 && value !== null;
@@ -70869,7 +71019,8 @@ function bindViewerEvents({
   handlers,
   ktx2Loader,
   renderer,
-  setStatus
+  setStatus,
+  uniformScale
 }) {
   const {
     boundingVolumeButton,
@@ -70887,8 +71038,20 @@ function bindViewerEvents({
     setPositionButton,
     terrainButton,
     toolbarToggleButton,
-    translateButton
+    translateButton,
+    uniformScaleTrackEl,
+    uniformScaleValueInput
   } = elements;
+  let uniformScaleTrackPointerId = null;
+  function setUniformScaleStatus() {
+    setStatus(
+      `Scale set to x${uniformScale.formatScale(uniformScale.getScale())}.`
+    );
+  }
+  function updateUniformScaleFromTrackPointer(event) {
+    handlers.cancelPositionPickModes();
+    uniformScale.setScaleFromTrackClientX(event.clientX);
+  }
   translateButton.addEventListener("click", () => {
     handlers.cancelPositionPickModes();
     handlers.toggleTransformMode("translate");
@@ -70903,6 +71066,70 @@ function bindViewerEvents({
       getActiveTransformMode() === "rotate" ? "Rotate mode enabled." : "Rotate mode disabled."
     );
   });
+  uniformScaleTrackEl.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    uniformScaleTrackPointerId = event.pointerId;
+    uniformScaleTrackEl.focus();
+    uniformScaleTrackEl.classList.add("dragging");
+    uniformScaleTrackEl.setPointerCapture(event.pointerId);
+    uniformScale.beginTrackDrag(event.clientX);
+  });
+  uniformScaleTrackEl.addEventListener("pointermove", (event) => {
+    if (event.pointerId !== uniformScaleTrackPointerId) {
+      return;
+    }
+    updateUniformScaleFromTrackPointer(event);
+  });
+  uniformScaleTrackEl.addEventListener("pointerup", (event) => {
+    if (event.pointerId !== uniformScaleTrackPointerId) {
+      return;
+    }
+    uniformScaleTrackPointerId = null;
+    uniformScaleTrackEl.classList.remove("dragging");
+    uniformScaleTrackEl.releasePointerCapture(event.pointerId);
+    setUniformScaleStatus();
+  });
+  uniformScaleTrackEl.addEventListener("pointercancel", (event) => {
+    if (event.pointerId !== uniformScaleTrackPointerId) {
+      return;
+    }
+    uniformScaleTrackPointerId = null;
+    uniformScaleTrackEl.classList.remove("dragging");
+    uniformScaleTrackEl.releasePointerCapture(event.pointerId);
+  });
+  uniformScaleTrackEl.addEventListener("keydown", (event) => {
+    let handled = true;
+    const step = event.shiftKey ? 1 : 0.1;
+    if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+      uniformScale.nudgeScaleExponent(-step);
+    } else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+      uniformScale.nudgeScaleExponent(step);
+    } else {
+      handled = false;
+    }
+    if (!handled) {
+      return;
+    }
+    event.preventDefault();
+    handlers.cancelPositionPickModes();
+    setUniformScaleStatus();
+  });
+  uniformScaleValueInput.addEventListener("input", () => {
+    handlers.cancelPositionPickModes();
+    uniformScale.setScaleValue(uniformScaleValueInput.value);
+  });
+  uniformScaleValueInput.addEventListener("change", () => {
+    if (!uniformScale.setScaleValue(uniformScaleValueInput.value, {
+      commit: true
+    })) {
+      setStatus("Scale must be greater than 0.", true);
+      return;
+    }
+    setUniformScaleStatus();
+  });
   cropScreenSelectButton.addEventListener(
     "click",
     handlers.toggleCropScreenSelectionMode
@@ -70915,7 +71142,10 @@ function bindViewerEvents({
     "click",
     handlers.cancelCropScreenSelection
   );
-  toolbarToggleButton.addEventListener("click", handlers.toggleToolbarVisibility);
+  toolbarToggleButton.addEventListener(
+    "click",
+    handlers.toggleToolbarVisibility
+  );
   terrainButton.addEventListener("click", () => {
     handlers.setTerrainEnabled(!getTerrainEnabled());
     setStatus(
@@ -70955,42 +71185,30 @@ function bindViewerEvents({
   setPositionButton.addEventListener("click", handlers.toggleSetPositionMode);
   resetButton.addEventListener("click", handlers.resetToSaved);
   saveButton.addEventListener("click", handlers.saveTransform);
-  renderer.domElement.addEventListener(
-    "pointerdown",
-    (event) => {
-      if (handlers.handleScreenSelectionPointerDown(event)) {
-        return;
-      }
-      handlers.handleSetPositionPointerDown(event);
+  renderer.domElement.addEventListener("pointerdown", (event) => {
+    if (handlers.handleScreenSelectionPointerDown(event)) {
+      return;
     }
-  );
-  renderer.domElement.addEventListener(
-    "pointermove",
-    (event) => {
-      if (handlers.handleScreenSelectionPointerMove(event)) {
-        return;
-      }
-      handlers.handleSetPositionPointerMove(event);
+    handlers.handleSetPositionPointerDown(event);
+  });
+  renderer.domElement.addEventListener("pointermove", (event) => {
+    if (handlers.handleScreenSelectionPointerMove(event)) {
+      return;
     }
-  );
-  renderer.domElement.addEventListener(
-    "pointerup",
-    (event) => {
-      if (handlers.handleScreenSelectionPointerUp(event)) {
-        return;
-      }
-      handlers.handleSetPositionPointerUp(event);
+    handlers.handleSetPositionPointerMove(event);
+  });
+  renderer.domElement.addEventListener("pointerup", (event) => {
+    if (handlers.handleScreenSelectionPointerUp(event)) {
+      return;
     }
-  );
-  renderer.domElement.addEventListener(
-    "pointercancel",
-    (event) => {
-      if (handlers.handleScreenSelectionPointerCancel(event)) {
-        return;
-      }
-      handlers.handleSetPositionPointerCancel(event);
+    handlers.handleSetPositionPointerUp(event);
+  });
+  renderer.domElement.addEventListener("pointercancel", (event) => {
+    if (handlers.handleScreenSelectionPointerCancel(event)) {
+      return;
     }
-  );
+    handlers.handleSetPositionPointerCancel(event);
+  });
   window.addEventListener("resize", () => {
     renderer.setSize(window.innerWidth, window.innerHeight);
     camera.aspect = window.innerWidth / window.innerHeight;
@@ -74391,7 +74609,8 @@ function createRootTransformController({
   transformControlsHelper,
   transformHandle,
   onTransformsInvalidated,
-  onCoordinateChanged
+  onCoordinateChanged,
+  onUniformScaleChanged
 }) {
   const coordinateWorldPosition = new Vector3();
   const coordinateTransformMatrix = new Matrix4();
@@ -74416,6 +74635,17 @@ function createRootTransformController({
   function getCurrentRootTransformArray() {
     return getCurrentRootTransform(currentRootTransformMatrix).toArray();
   }
+  function getUniformScale() {
+    const scale = transformHandle.scale;
+    const scaleValues = [scale.x, scale.y, scale.z].map((value) => Math.abs(value)).filter((value) => Number.isFinite(value));
+    if (scaleValues.length === 0) {
+      return 1;
+    }
+    return scaleValues.reduce((total, value) => total + value, 0) / scaleValues.length;
+  }
+  function notifyUniformScaleChanged() {
+    onUniformScaleChanged?.(getUniformScale());
+  }
   function getCurrentMatrix() {
     return getObjectMatrix(editableGroup);
   }
@@ -74456,6 +74686,7 @@ function createRootTransformController({
     } finally {
       syncingTransformHandle = false;
     }
+    notifyUniformScaleChanged();
   }
   function applySaved(matrix) {
     applySavedObjectMatrix(editableGroup, matrix);
@@ -74473,6 +74704,19 @@ function createRootTransformController({
       target: coordinateEditMatrix
     });
     invalidate();
+    notifyUniformScaleChanged();
+  }
+  function applyUniformScale(scale) {
+    const nextScale = Number(scale);
+    if (!Number.isFinite(nextScale) || nextScale <= 0) {
+      return false;
+    }
+    transformHandle.scale.set(nextScale, nextScale, nextScale);
+    transformHandle.updateMatrix();
+    transformHandle.updateMatrixWorld(true);
+    applyFromRootTransform(transformHandle.matrix);
+    syncCoordinateInputs();
+    return true;
   }
   async function applyFromCoordinate(latitude, longitude, height) {
     await savedRootMatrixPromise;
@@ -74502,6 +74746,7 @@ function createRootTransformController({
     lastSavedMatrix.identity();
     resetEditableObjectTransform(transformHandle);
     tilesTransformDirty = true;
+    notifyUniformScaleChanged();
   }
   function refresh(url) {
     savedRootMatrix.identity();
@@ -74572,6 +74817,7 @@ function createRootTransformController({
     applyFromCoordinate,
     applyFromRootTransform,
     applySaved,
+    applyUniformScale,
     flush,
     getCurrentMatrix,
     getCurrentRootTransform,
@@ -74579,6 +74825,7 @@ function createRootTransformController({
     getIncrementalSinceSaved,
     getLastSaved: () => lastSavedMatrix,
     getLoadError: () => savedRootMatrixLoadError,
+    getUniformScale,
     isSyncingHandle: () => syncingTransformHandle,
     markDirty() {
       tilesTransformDirty = true;
@@ -74722,7 +74969,9 @@ function getViewerElements() {
     toolbarDockEl: toolbarEl.parentElement,
     toolbarEl,
     toolbarToggleButton: document.getElementById("toolbar-toggle"),
-    translateButton: document.getElementById("translate")
+    translateButton: document.getElementById("translate"),
+    uniformScaleTrackEl: document.getElementById("uniform-scale"),
+    uniformScaleValueInput: document.getElementById("uniform-scale-value")
   };
 }
 var init_elements = __esm({
@@ -74742,6 +74991,7 @@ var require_app = __commonJS({
     init_viewerToggles();
     init_geoCamera();
     init_geometricError();
+    init_uniformScale();
     init_globeController();
     init_sceneSetup();
     init_transformControls();
@@ -74785,7 +75035,9 @@ var require_app = __commonJS({
       toolbarDockEl,
       toolbarEl,
       toolbarToggleButton,
-      translateButton
+      translateButton,
+      uniformScaleTrackEl,
+      uniformScaleValueInput
     } = viewerElements;
     var MOVE_TO_TILES_POSE = {
       heading: MOVE_TO_TILES_HEADING,
@@ -74932,6 +75184,11 @@ var require_app = __commonJS({
       geometricErrorValueEl,
       getTiles: () => tiles
     });
+    var uniformScale = createUniformScaleController({
+      applyScale: (scale) => rootTransform?.applyUniformScale(scale),
+      uniformScaleTrackEl,
+      uniformScaleValueInput
+    });
     function getTilesetBoundingSphere(target) {
       if (!tiles || !tiles.getBoundingSphere(target)) {
         return false;
@@ -75020,7 +75277,8 @@ var require_app = __commonJS({
       transformControlsHelper,
       transformHandle,
       onCoordinateChanged: updateCoordinateInputs,
-      onTransformsInvalidated: () => cropController.syncWorldState()
+      onTransformsInvalidated: () => cropController.syncWorldState(),
+      onUniformScaleChanged: uniformScale.syncFromRootScale
     });
     function setGaussianSplatUiVisible(visible) {
       if (splatsCountStatEl) {
@@ -75056,6 +75314,7 @@ var require_app = __commonJS({
       transformModeController.setMode(null);
     }
     geometricError.initializeInputs();
+    uniformScale.initializeInputs();
     transformModeController.setMode(null);
     function moveCameraToTiles() {
       cancelPositionPickModes();
@@ -75264,7 +75523,8 @@ var require_app = __commonJS({
       },
       ktx2Loader,
       renderer,
-      setStatus
+      setStatus,
+      uniformScale
     });
     window.addEventListener("popstate", () => {
       if (cameraUrlPose.applyFromUrl({ showStatus: true })) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dtiles-inspector",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "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/server/viewerHtml.js

@@ -279,7 +279,7 @@ function buildViewerHtml(viewerConfig) {
         grid-template-rows: minmax(0, 1fr) auto;
         gap: 0;
         padding: 10px 14px;
-        border: 1px solid rgba(22, 50, 79, 0.12);
+        border: 1px solid rgba(73, 80, 87, 0.16);
         border-top: 0;
         border-radius: 0 0 20px 20px;
         background: rgba(255, 255, 255, 0.9);
@@ -502,6 +502,124 @@ function buildViewerHtml(viewerConfig) {
         margin: 0;
       }
 
+      .scale-value-input {
+        width: 82px;
+        min-width: 0;
+        padding: 4px 7px;
+        border: 1px solid rgba(22, 50, 79, 0.16);
+        border-radius: 8px;
+        font: inherit;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: right;
+        color: #16324f;
+        background: rgba(255, 255, 255, 0.92);
+      }
+
+      .scale-track {
+        --scale-track-offset: 0px;
+        position: relative;
+        width: 100%;
+        height: 22px;
+        overflow: hidden;
+        border: 1px solid rgba(22, 50, 79, 0.12);
+        border-radius: 9px;
+        padding: 0;
+        background:
+          linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(231, 235, 240, 0.92)),
+          #edf0f4;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.78),
+          inset 0 -1px 0 rgba(73, 80, 87, 0.08);
+        cursor: ew-resize;
+        touch-action: none;
+      }
+
+      .scale-track::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        left: 8px;
+        height: 4px;
+        border-radius: 999px;
+        background:
+          linear-gradient(
+            90deg,
+            rgba(73, 80, 87, 0.08),
+            rgba(73, 80, 87, 0.42) 50%,
+            rgba(73, 80, 87, 0.08)
+          );
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.56);
+        transform: translateY(-50%);
+      }
+
+      .scale-track::after {
+        content: "";
+        position: absolute;
+        inset: 5px 8px 5px;
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(73, 80, 87, 0.46) 0 1px,
+            transparent 1px 100%
+          ),
+          linear-gradient(
+            90deg,
+            rgba(73, 80, 87, 0.26) 0 1px,
+            transparent 1px 100%
+          );
+        background-repeat: repeat-x;
+        background-size:
+          20px 12px,
+          20px 7px;
+        background-position:
+          calc(50% + var(--scale-track-offset) - 1px) -1px,
+          calc(50% + var(--scale-track-offset) + 10px) 2px;
+        opacity: 0.72;
+        pointer-events: none;
+      }
+
+      .scale-track-center {
+        position: absolute;
+        top: 3px;
+        bottom: 3px;
+        left: 50%;
+        width: 2px;
+        border-radius: 999px;
+        background: rgba(73, 80, 87, 0.72);
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72);
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
+
+      .scale-track:hover::before,
+      .scale-track:focus-visible::before,
+      .scale-track.dragging::before {
+        background:
+          linear-gradient(
+            90deg,
+            rgba(73, 80, 87, 0.12),
+            rgba(73, 80, 87, 0.58) 50%,
+            rgba(73, 80, 87, 0.12)
+          );
+      }
+
+      .scale-track.dragging {
+        border-color: rgba(73, 80, 87, 0.32);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.82),
+          inset 0 -1px 0 rgba(73, 80, 87, 0.08);
+      }
+
+      .scale-track:focus {
+        outline: none;
+      }
+
+      .scale-track:focus-visible {
+        outline: none;
+      }
+
       .coordinate-grid {
         display: grid;
         grid-template-columns: 1fr;
@@ -795,8 +913,28 @@ function buildViewerHtml(viewerConfig) {
             <div class="transform-actions">
               <button id="translate" type="button">Translate</button>
               <button id="rotate" type="button">Rotate</button>
-              <button id="set-position" type="button">Set Position</button>
-              <button id="reset" type="button">Reset</button>
+              <div class="range-field full-span">
+                <div class="range-field-header">
+                  <span>Scale</span>
+                  <input
+                    id="uniform-scale-value"
+                    class="scale-value-input"
+                    type="number"
+                    step="any"
+                    value="1"
+                  />
+                </div>
+                <div
+                  id="uniform-scale"
+                  class="scale-track"
+                  tabindex="0"
+                  aria-label="Scale x1"
+                >
+                  <span class="scale-track-center" aria-hidden="true"></span>
+                </div>
+              </div>
+              <button id="set-position" class="full-span" type="button">Set Position</button>
+              <button id="reset" class="full-span" type="button">Reset</button>
             </div>
           </div>
           <div class="toolbar-section">

package/src/viewer/app.js

@@ -10,6 +10,7 @@ import { createStatusPanel } from './dom/statusPanel.js';
 import { createViewerToggles } from './dom/viewerToggles.js';
 import { createGeoCameraController } from './transform/geoCamera.js';
 import { createGeometricErrorController } from './transform/geometricError.js';
+import { createUniformScaleController } from './transform/uniformScale.js';
 import { createGlobeController } from './scene/globeController.js';
 import { createViewerScene } from './scene/sceneSetup.js';
 import { createViewerTransformControls } from './scene/transformControls.js';
@@ -71,6 +72,8 @@ const {
   toolbarEl,
   toolbarToggleButton,
   translateButton,
+  uniformScaleTrackEl,
+  uniformScaleValueInput,
 } = viewerElements;
 
 const MOVE_TO_TILES_POSE = {
@@ -244,6 +247,12 @@ const geometricError = createGeometricErrorController({
   getTiles: () => tiles,
 });
 
+const uniformScale = createUniformScaleController({
+  applyScale: (scale) => rootTransform?.applyUniformScale(scale),
+  uniformScaleTrackEl,
+  uniformScaleValueInput,
+});
+
 function getTilesetBoundingSphere(target) {
   if (!tiles || !tiles.getBoundingSphere(target)) {
     return false;
@@ -342,6 +351,7 @@ rootTransform = createRootTransformController({
   transformHandle,
   onCoordinateChanged: updateCoordinateInputs,
   onTransformsInvalidated: () => cropController.syncWorldState(),
+  onUniformScaleChanged: uniformScale.syncFromRootScale,
 });
 
 function setGaussianSplatUiVisible(visible) {
@@ -384,6 +394,7 @@ function exitSaveInteractionModes() {
 }
 
 geometricError.initializeInputs();
+uniformScale.initializeInputs();
 transformModeController.setMode(null);
 
 function moveCameraToTiles() {
@@ -614,6 +625,7 @@ bindViewerEvents({
   ktx2Loader,
   renderer,
   setStatus,
+  uniformScale,
 });
 
 window.addEventListener('popstate', () => {

package/src/viewer/dom/elements.js

@@ -49,5 +49,7 @@ export function getViewerElements() {
     toolbarEl,
     toolbarToggleButton: document.getElementById('toolbar-toggle'),
     translateButton: document.getElementById('translate'),
+    uniformScaleTrackEl: document.getElementById('uniform-scale'),
+    uniformScaleValueInput: document.getElementById('uniform-scale-value'),
   };
 }

package/src/viewer/dom/events.js

@@ -12,6 +12,7 @@ export function bindViewerEvents({
   ktx2Loader,
   renderer,
   setStatus,
+  uniformScale,
 }) {
   const {
     boundingVolumeButton,
@@ -30,8 +31,23 @@ export function bindViewerEvents({
     terrainButton,
     toolbarToggleButton,
     translateButton,
+    uniformScaleTrackEl,
+    uniformScaleValueInput,
   } = elements;
 
+  let uniformScaleTrackPointerId = null;
+
+  function setUniformScaleStatus() {
+    setStatus(
+      `Scale set to x${uniformScale.formatScale(uniformScale.getScale())}.`,
+    );
+  }
+
+  function updateUniformScaleFromTrackPointer(event) {
+    handlers.cancelPositionPickModes();
+    uniformScale.setScaleFromTrackClientX(event.clientX);
+  }
+
   translateButton.addEventListener('click', () => {
     handlers.cancelPositionPickModes();
     handlers.toggleTransformMode('translate');
@@ -50,6 +66,79 @@ export function bindViewerEvents({
         : 'Rotate mode disabled.',
     );
   });
+  uniformScaleTrackEl.addEventListener('pointerdown', (event) => {
+    if (event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    uniformScaleTrackPointerId = event.pointerId;
+    uniformScaleTrackEl.focus();
+    uniformScaleTrackEl.classList.add('dragging');
+    uniformScaleTrackEl.setPointerCapture(event.pointerId);
+    uniformScale.beginTrackDrag(event.clientX);
+  });
+  uniformScaleTrackEl.addEventListener('pointermove', (event) => {
+    if (event.pointerId !== uniformScaleTrackPointerId) {
+      return;
+    }
+
+    updateUniformScaleFromTrackPointer(event);
+  });
+  uniformScaleTrackEl.addEventListener('pointerup', (event) => {
+    if (event.pointerId !== uniformScaleTrackPointerId) {
+      return;
+    }
+
+    uniformScaleTrackPointerId = null;
+    uniformScaleTrackEl.classList.remove('dragging');
+    uniformScaleTrackEl.releasePointerCapture(event.pointerId);
+    setUniformScaleStatus();
+  });
+  uniformScaleTrackEl.addEventListener('pointercancel', (event) => {
+    if (event.pointerId !== uniformScaleTrackPointerId) {
+      return;
+    }
+
+    uniformScaleTrackPointerId = null;
+    uniformScaleTrackEl.classList.remove('dragging');
+    uniformScaleTrackEl.releasePointerCapture(event.pointerId);
+  });
+  uniformScaleTrackEl.addEventListener('keydown', (event) => {
+    let handled = true;
+    const step = event.shiftKey ? 1 : 0.1;
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+      uniformScale.nudgeScaleExponent(-step);
+    } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+      uniformScale.nudgeScaleExponent(step);
+    } else {
+      handled = false;
+    }
+
+    if (!handled) {
+      return;
+    }
+
+    event.preventDefault();
+    handlers.cancelPositionPickModes();
+    setUniformScaleStatus();
+  });
+  uniformScaleValueInput.addEventListener('input', () => {
+    handlers.cancelPositionPickModes();
+    uniformScale.setScaleValue(uniformScaleValueInput.value);
+  });
+  uniformScaleValueInput.addEventListener('change', () => {
+    if (
+      !uniformScale.setScaleValue(uniformScaleValueInput.value, {
+        commit: true,
+      })
+    ) {
+      setStatus('Scale must be greater than 0.', true);
+      return;
+    }
+    setUniformScaleStatus();
+  });
   cropScreenSelectButton.addEventListener(
     'click',
     handlers.toggleCropScreenSelectionMode,
@@ -62,7 +151,10 @@ export function bindViewerEvents({
     'click',
     handlers.cancelCropScreenSelection,
   );
-  toolbarToggleButton.addEventListener('click', handlers.toggleToolbarVisibility);
+  toolbarToggleButton.addEventListener(
+    'click',
+    handlers.toggleToolbarVisibility,
+  );
   terrainButton.addEventListener('click', () => {
     handlers.setTerrainEnabled(!getTerrainEnabled());
     setStatus(
@@ -104,42 +196,30 @@ export function bindViewerEvents({
   setPositionButton.addEventListener('click', handlers.toggleSetPositionMode);
   resetButton.addEventListener('click', handlers.resetToSaved);
   saveButton.addEventListener('click', handlers.saveTransform);
-  renderer.domElement.addEventListener(
-    'pointerdown',
-    (event) => {
-      if (handlers.handleScreenSelectionPointerDown(event)) {
-        return;
-      }
-      handlers.handleSetPositionPointerDown(event);
-    },
-  );
-  renderer.domElement.addEventListener(
-    'pointermove',
-    (event) => {
-      if (handlers.handleScreenSelectionPointerMove(event)) {
-        return;
-      }
-      handlers.handleSetPositionPointerMove(event);
-    },
-  );
-  renderer.domElement.addEventListener(
-    'pointerup',
-    (event) => {
-      if (handlers.handleScreenSelectionPointerUp(event)) {
-        return;
-      }
-      handlers.handleSetPositionPointerUp(event);
-    },
-  );
-  renderer.domElement.addEventListener(
-    'pointercancel',
-    (event) => {
-      if (handlers.handleScreenSelectionPointerCancel(event)) {
-        return;
-      }
-      handlers.handleSetPositionPointerCancel(event);
-    },
-  );
+  renderer.domElement.addEventListener('pointerdown', (event) => {
+    if (handlers.handleScreenSelectionPointerDown(event)) {
+      return;
+    }
+    handlers.handleSetPositionPointerDown(event);
+  });
+  renderer.domElement.addEventListener('pointermove', (event) => {
+    if (handlers.handleScreenSelectionPointerMove(event)) {
+      return;
+    }
+    handlers.handleSetPositionPointerMove(event);
+  });
+  renderer.domElement.addEventListener('pointerup', (event) => {
+    if (handlers.handleScreenSelectionPointerUp(event)) {
+      return;
+    }
+    handlers.handleSetPositionPointerUp(event);
+  });
+  renderer.domElement.addEventListener('pointercancel', (event) => {
+    if (handlers.handleScreenSelectionPointerCancel(event)) {
+      return;
+    }
+    handlers.handleSetPositionPointerCancel(event);
+  });
 
   window.addEventListener('resize', () => {
     renderer.setSize(window.innerWidth, window.innerHeight);

package/src/viewer/transform/rootTransformController.js

@@ -21,6 +21,7 @@ export function createRootTransformController({
   transformHandle,
   onTransformsInvalidated,
   onCoordinateChanged,
+  onUniformScaleChanged,
 }) {
   const coordinateWorldPosition = new Vector3();
   const coordinateTransformMatrix = new Matrix4();
@@ -48,6 +49,24 @@ export function createRootTransformController({
     return getCurrentRootTransform(currentRootTransformMatrix).toArray();
   }
 
+  function getUniformScale() {
+    const scale = transformHandle.scale;
+    const scaleValues = [scale.x, scale.y, scale.z]
+      .map((value) => Math.abs(value))
+      .filter((value) => Number.isFinite(value));
+    if (scaleValues.length === 0) {
+      return 1;
+    }
+    return (
+      scaleValues.reduce((total, value) => total + value, 0) /
+      scaleValues.length
+    );
+  }
+
+  function notifyUniformScaleChanged() {
+    onUniformScaleChanged?.(getUniformScale());
+  }
+
   function getCurrentMatrix() {
     return getObjectMatrix(editableGroup);
   }
@@ -94,6 +113,7 @@ export function createRootTransformController({
     } finally {
       syncingTransformHandle = false;
     }
+    notifyUniformScaleChanged();
   }
 
   function applySaved(matrix) {
@@ -113,6 +133,21 @@ export function createRootTransformController({
       target: coordinateEditMatrix,
     });
     invalidate();
+    notifyUniformScaleChanged();
+  }
+
+  function applyUniformScale(scale) {
+    const nextScale = Number(scale);
+    if (!Number.isFinite(nextScale) || nextScale <= 0) {
+      return false;
+    }
+
+    transformHandle.scale.set(nextScale, nextScale, nextScale);
+    transformHandle.updateMatrix();
+    transformHandle.updateMatrixWorld(true);
+    applyFromRootTransform(transformHandle.matrix);
+    syncCoordinateInputs();
+    return true;
   }
 
   async function applyFromCoordinate(latitude, longitude, height) {
@@ -145,6 +180,7 @@ export function createRootTransformController({
     lastSavedMatrix.identity();
     resetEditableObjectTransform(transformHandle);
     tilesTransformDirty = true;
+    notifyUniformScaleChanged();
   }
 
   function refresh(url) {
@@ -222,6 +258,7 @@ export function createRootTransformController({
     applyFromCoordinate,
     applyFromRootTransform,
     applySaved,
+    applyUniformScale,
     flush,
     getCurrentMatrix,
     getCurrentRootTransform,
@@ -229,6 +266,7 @@ export function createRootTransformController({
     getIncrementalSinceSaved,
     getLastSaved: () => lastSavedMatrix,
     getLoadError: () => savedRootMatrixLoadError,
+    getUniformScale,
     isSyncingHandle: () => syncingTransformHandle,
     markDirty() {
       tilesTransformDirty = true;

package/src/viewer/transform/uniformScale.js

@@ -0,0 +1,179 @@
+const TRACK_PIXELS_PER_SCALE_EXPONENT = 90;
+
+function exponentToUniformScale(exponent) {
+  return 2 ** exponent;
+}
+
+function scaleToExponent(scale) {
+  return Math.log2(scale);
+}
+
+function getFinitePositiveScale(value) {
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : null;
+}
+
+function normalizeUniformScale(value) {
+  const scale = getFinitePositiveScale(value);
+  if (scale === null) {
+    return null;
+  }
+  return scale;
+}
+
+export function formatUniformScale(scale) {
+  const value = Number(scale);
+  if (!Number.isFinite(value)) {
+    return '1';
+  }
+
+  const absValue = Math.abs(value);
+  if (absValue > 0 && (absValue < 0.00001 || absValue >= 1000000)) {
+    return value.toExponential(3).replace(/\.?0+e/, 'e');
+  }
+
+  const formatted =
+    absValue < 0.01
+      ? value.toFixed(5)
+      : absValue < 0.1
+        ? value.toFixed(4)
+        : absValue < 10
+          ? value.toFixed(3)
+          : absValue < 100
+            ? value.toFixed(2)
+            : value.toFixed(1);
+
+  return formatted.replace(/\.?0+$/, '');
+}
+
+export function createUniformScaleController({
+  applyScale,
+  uniformScaleTrackEl,
+  uniformScaleValueInput,
+}) {
+  let uniformScale = 1;
+  let syncingInputs = false;
+  let trackDragStartClientX = 0;
+  let trackDragStartExponent = 0;
+
+  function getScaleExponent() {
+    return scaleToExponent(uniformScale);
+  }
+
+  function updateInputs() {
+    syncingInputs = true;
+    try {
+      const formattedScale = formatUniformScale(uniformScale);
+      uniformScaleTrackEl.setAttribute(
+        'aria-label',
+        `Scale x${formattedScale}`,
+      );
+      uniformScaleTrackEl.title = `Scale x${formattedScale}`;
+      uniformScaleValueInput.value = formatUniformScale(uniformScale);
+    } finally {
+      syncingInputs = false;
+    }
+  }
+
+  function applyUniformScale(nextScale) {
+    uniformScale = nextScale;
+    applyScale(nextScale);
+    updateInputs();
+  }
+
+  function setScale(scale) {
+    const nextScale = normalizeUniformScale(scale);
+    if (nextScale === null) {
+      return false;
+    }
+
+    applyUniformScale(nextScale);
+    return true;
+  }
+
+  function setScaleExponent(exponent) {
+    const exponentNumber = Number(exponent);
+    if (!Number.isFinite(exponentNumber)) {
+      updateInputs();
+      return false;
+    }
+
+    const nextScale = exponentToUniformScale(exponentNumber);
+    if (!Number.isFinite(nextScale) || nextScale <= 0) {
+      updateInputs();
+      return false;
+    }
+
+    applyUniformScale(nextScale);
+    return true;
+  }
+
+  function beginTrackDrag(clientX) {
+    trackDragStartClientX = clientX;
+    trackDragStartExponent = getScaleExponent();
+    uniformScaleTrackEl.style.setProperty('--scale-track-offset', '0px');
+  }
+
+  function setScaleFromTrackClientX(clientX) {
+    const deltaX = clientX - trackDragStartClientX;
+    uniformScaleTrackEl.style.setProperty(
+      '--scale-track-offset',
+      `${deltaX}px`,
+    );
+    return setScaleExponent(
+      trackDragStartExponent + deltaX / TRACK_PIXELS_PER_SCALE_EXPONENT,
+    );
+  }
+
+  function nudgeScaleExponent(delta) {
+    return setScaleExponent(getScaleExponent() + delta);
+  }
+
+  function setScaleValue(value, { commit = false } = {}) {
+    if (syncingInputs) {
+      return true;
+    }
+
+    const rawValue = typeof value === 'string' ? value.trim() : value;
+    if (rawValue === '' && !commit) {
+      return false;
+    }
+
+    const scale = normalizeUniformScale(rawValue);
+    if (scale === null) {
+      if (commit) {
+        updateInputs();
+      }
+      return false;
+    }
+
+    applyUniformScale(scale);
+    return true;
+  }
+
+  function initializeInputs() {
+    uniformScaleValueInput.removeAttribute('max');
+    uniformScaleValueInput.removeAttribute('min');
+    uniformScaleValueInput.step = 'any';
+    updateInputs();
+  }
+
+  function syncFromRootScale(scale) {
+    const nextScale = normalizeUniformScale(scale);
+    uniformScale = nextScale === null ? 1 : nextScale;
+    updateInputs();
+  }
+
+  return {
+    beginTrackDrag,
+    formatScale: formatUniformScale,
+    getScale: () => uniformScale,
+    initializeInputs,
+    nudgeScaleExponent,
+    setScale,
+    setScaleExponent,
+    setScaleFromTrackClientX,
+    setScaleValue,
+    syncFromRootScale,
+  };
+}