3dtiles-inspector 0.2.12 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dtiles-inspector",
-  "version": "0.2.12",
+  "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",
@@ -57,7 +57,6 @@
     "@sparkjsdev/spark": "2.1.0",
     "3d-tiles-renderer": "0.4.27",
     "3d-tiles-rendererjs-3dgs-plugin": "0.1.11",
-    "cesium": "1.140.0",
     "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,6 +929,17 @@ 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>

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() {

package/src/viewer/scene/globeController.js

@@ -11,11 +11,12 @@ export function createGlobeController({
   renderer,
 }) {
   let tiles = null;
-  let terrainEnabled = true;
+  let terrainEnabled = false;
 
-  function setTerrainEnabled(enabled) {
+  function setTerrainEnabled(enabled, { cesiumIonToken = '' } = {}) {
     const globeTileOptions = {
       camera,
+      cesiumIonToken,
       preprocessURL: normalizeLocalResourceUrl,
       renderer,
     };

package/src/viewer/scene/tiles.js

@@ -1,4 +1,3 @@
-import { Ion } from 'cesium';
 import { TilesRenderer } from '3d-tiles-renderer';
 import { ImplicitTilingPlugin } from '3d-tiles-renderer/src/core/plugins/ImplicitTilingPlugin.js';
 import { CesiumIonAuthPlugin } from '3d-tiles-renderer/src/three/plugins/CesiumIonAuthPlugin.js';
@@ -22,7 +21,6 @@ const SATELLITE_IMAGERY = {
   levels: 18,
 };
 const CESIUM_ION_TERRAIN = {
-  apiToken: Ion.defaultAccessToken,
   assetId: 1,
 };
 
@@ -73,13 +71,21 @@ export function createImageryGlobeTiles(options) {
 }
 
 export function createTerrainGlobeTiles(options) {
+  const apiToken =
+    typeof options.cesiumIonToken === 'string'
+      ? options.cesiumIonToken.trim()
+      : '';
+  if (!apiToken) {
+    throw new Error('Cesium ion token is required to enable terrain.');
+  }
+
   const next = new TilesRenderer();
   const satelliteOverlay = createSatelliteOverlay(options.preprocessURL);
   next.downloadQueue.maxJobs = 8;
   next.parseQueue.maxJobs = 2;
   next.registerPlugin(
     new CesiumIonAuthPlugin({
-      apiToken: CESIUM_ION_TERRAIN.apiToken,
+      apiToken,
       assetId: String(CESIUM_ION_TERRAIN.assetId),
       autoRefreshToken: true,
       assetTypeHandler: (type, tilesRenderer) => {