3dtiles-inspector 0.2.11 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dtiles-inspector",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "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",
@@ -55,9 +55,8 @@
   },
   "devDependencies": {
     "@sparkjsdev/spark": "2.1.0",
-    "3d-tiles-renderer": "0.4.25",
-    "3d-tiles-rendererjs-3dgs-plugin": "0.1.8",
-    "cesium": "1.140.0",
+    "3d-tiles-renderer": "0.4.27",
+    "3d-tiles-rendererjs-3dgs-plugin": "0.1.11",
     "esbuild": "^0.25.11"
   },
   "dependencies": {

package/src/server/viewerHtml.js

@@ -654,6 +654,34 @@ function buildViewerHtml(viewerConfig) {
         background: rgba(255, 255, 255, 0.92);
       }
 
+      .token-field {
+        display: grid;
+        gap: 5px;
+        min-width: 0;
+      }
+
+      .token-field span {
+        min-width: 0;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: #5d738b;
+      }
+
+      .token-field input {
+        width: 100%;
+        min-width: 0;
+        padding: 8px 10px;
+        border: 1px solid rgba(22, 50, 79, 0.16);
+        border-radius: 10px;
+        font: inherit;
+        font-size: 12px;
+        font-weight: 600;
+        color: #16324f;
+        background: rgba(255, 255, 255, 0.92);
+      }
+
       .coordinate-actions {
         display: grid;
         grid-template-columns: 1fr;
@@ -901,11 +929,36 @@ function buildViewerHtml(viewerConfig) {
               <p class="toolbar-section-title">Canvas</p>
             </div>
             <div class="coordinate-actions">
+              <label class="token-field">
+                <span>Cesium ion token</span>
+                <input
+                  id="cesium-ion-token"
+                  type="password"
+                  autocomplete="off"
+                  autocapitalize="off"
+                  spellcheck="false"
+                  placeholder="Required for terrain"
+                />
+              </label>
               <button id="terrain" class="wide" type="button">Terrain</button>
               <button id="bounding-volume" class="wide" type="button">Bounding Volume</button>
               <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">Coordinate</p>
+            </div>
+            <div class="coordinate-grid">
+              <label><span>Latitude</span><input id="latitude" type="number" step="any" value="0" /></label>
+              <label><span>Longitude</span><input id="longitude" type="number" step="any" value="0" /></label>
+              <label><span>Height</span><input id="height" type="number" step="any" value="0" /></label>
+            </div>
+            <div class="coordinate-actions">
+              <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">
             <div class="toolbar-section-header">
               <p class="toolbar-section-title">Transform</p>
@@ -937,20 +990,6 @@ function buildViewerHtml(viewerConfig) {
               <button id="reset" class="full-span" type="button">Reset</button>
             </div>
           </div>
-          <div class="toolbar-section">
-            <div class="toolbar-section-header">
-              <p class="toolbar-section-title">Coordinate</p>
-            </div>
-            <div class="coordinate-grid">
-              <label><span>Latitude</span><input id="latitude" type="number" step="any" value="0" /></label>
-              <label><span>Longitude</span><input id="longitude" type="number" step="any" value="0" /></label>
-              <label><span>Height</span><input id="height" type="number" step="any" value="0" /></label>
-            </div>
-            <div class="coordinate-actions">
-              <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">
             <div class="toolbar-section-header">
               <p class="toolbar-section-title">LOD</p>

package/src/viewer/app.js

@@ -46,6 +46,7 @@ const viewerElements = getViewerElements();
 const {
   boundingVolumeButton,
   cacheBytesValueEl,
+  cesiumIonTokenInput,
   cropSectionEl,
   geometricErrorLayerScaleInput,
   geometricErrorLayerValueEl,
@@ -142,6 +143,7 @@ const globeController = createGlobeController({
 
 const viewerToggles = createViewerToggles({
   boundingVolumeButton,
+  cesiumIonTokenInput,
   globeController,
   setStatus,
   terrainButton,

package/src/viewer/dom/elements.js

@@ -4,6 +4,7 @@ export function getViewerElements() {
   return {
     boundingVolumeButton: document.getElementById('bounding-volume'),
     cacheBytesValueEl: document.getElementById('cache-bytes-value'),
+    cesiumIonTokenInput: document.getElementById('cesium-ion-token'),
     cropCountValueEl: document.getElementById('crop-count-value'),
     cropListEl: document.getElementById('crop-list'),
     cropSectionEl: document.getElementById('crop-section'),

package/src/viewer/dom/events.js

@@ -156,7 +156,9 @@ export function bindViewerEvents({
     handlers.toggleToolbarVisibility,
   );
   terrainButton.addEventListener('click', () => {
-    handlers.setTerrainEnabled(!getTerrainEnabled());
+    if (!handlers.setTerrainEnabled(!getTerrainEnabled())) {
+      return;
+    }
     setStatus(
       getTerrainEnabled()
         ? 'Terrain enabled with Cesium World Terrain.'

package/src/viewer/dom/viewerToggles.js

@@ -1,5 +1,6 @@
 export function createViewerToggles({
   boundingVolumeButton,
+  cesiumIonTokenInput,
   globeController,
   setStatus,
   terrainButton,
@@ -19,8 +20,23 @@ export function createViewerToggles({
   }
 
   function setTerrainEnabled(enabled) {
-    globeController.setTerrainEnabled(enabled);
-    syncTerrainButton();
+    try {
+      const cesiumIonToken = cesiumIonTokenInput?.value?.trim() || '';
+      if (enabled && !cesiumIonToken) {
+        cesiumIonTokenInput?.focus();
+        setStatus('Enter a Cesium ion token to enable terrain.', true);
+        syncTerrainButton();
+        return false;
+      }
+
+      globeController.setTerrainEnabled(enabled, { cesiumIonToken });
+      syncTerrainButton();
+      return true;
+    } catch (err) {
+      setStatus(err && err.message ? err.message : String(err), true);
+      syncTerrainButton();
+      return false;
+    }
   }
 
   function syncBoundingVolumeButton() {