@splnlss/3d-story-viewer 0.5.4 → 0.5.6

package/build/viewer.js

@@ -6471,7 +6471,7 @@ const QUAD_INDICES$1 = new Uint16Array([0, 1, 2, 0, 2, 3]);
 const workerUrl$1 = new URL("assets/viewer/spark-old-worker-932b4a2c87ca.js", import.meta.url).href;
 const workerWasmUrl$1 = new URL("assets/viewer/spark-worker-015de49d2d00.wasm", import.meta.url).href;
 function WorkerWrapper$1(options) {
-  const url = new URL(workerUrl$1);
+  const url = new URL(workerUrl$1, globalThis.location.href);
   url.searchParams.set("wasm", workerWasmUrl$1);
   return new Worker(url, {
     name: options == null ? void 0 : options.name
@@ -8218,7 +8218,7 @@ async function withWorker(callback) {
 const workerUrl = new URL("assets/viewer/spark-worker-5ec8a483b87c.js", import.meta.url).href;
 const workerWasmUrl = new URL("assets/viewer/spark-worker-015de49d2d00.wasm", import.meta.url).href;
 function WorkerWrapper$2(options) {
-  const url = new URL(workerUrl);
+  const url = new URL(workerUrl, globalThis.location.href);
   url.searchParams.set("wasm", workerWasmUrl);
   return new Worker(url, {
     name: options == null ? void 0 : options.name
@@ -12111,7 +12111,7 @@ const _SplatAccumulator = class _SplatAccumulator2 {
     this.time = 0;
     this.deltaTime = 0;
     this.viewToWorld = new Matrix4();
-    this.viewOrigin = new Vector3();
+    this.renderOrigin = new Vector3();
     this.viewDirection = new Vector3();
     this.maxSplats = 0;
     this.numSplats = 0;
@@ -12394,10 +12394,10 @@ const _SplatAccumulator = class _SplatAccumulator2 {
     lodInstances
   }) {
     var _a22;
-    this.viewToWorld.copy(camera.matrixWorld);
-    camera.getWorldPosition(this.viewOrigin);
+    camera.getWorldPosition(this.renderOrigin);
+    this.viewToWorld.copy(camera.matrixWorld).setPosition(0, 0, 0);
     camera.getWorldDirection(this.viewDirection);
-    _SplatAccumulator2.viewCenterUniform.value.copy(this.viewOrigin);
+    _SplatAccumulator2.viewCenterUniform.value.set(0, 0, 0);
     _SplatAccumulator2.viewDirUniform.value.copy(this.viewDirection);
     _SplatAccumulator2.sortRadialUniform.value = sortRadial;
     this.time = time;
@@ -12431,6 +12431,7 @@ const _SplatAccumulator = class _SplatAccumulator2 {
           time: this.time,
           deltaTime: this.deltaTime,
           viewToWorld: this.viewToWorld,
+          renderOrigin: this.renderOrigin,
           camera,
           renderSize,
           globalEdits,
@@ -12695,6 +12696,14 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
     this.sortTimeoutId = -1;
     this.sortedCenter = new Vector3().setScalar(Number.NEGATIVE_INFINITY);
     this.sortedDir = new Vector3().setScalar(0);
+    this.accumToCamera = new Matrix4();
+    this.accumToCameraScale = new Vector3();
+    this.renderCameraToWorld = new Matrix4();
+    this.renderCameraOrigin = new Vector3();
+    this.lodCameraToWorld = new Matrix4();
+    this.lodCameraScale = new Vector3();
+    this.lodViewToObject = new Matrix4();
+    this.lodMeshOrigin = new Vector3();
     this.readback32 = new Uint32Array(0);
     this.lastLodRaycastTime = 0;
     this.lodWorker = null;
@@ -12936,17 +12945,14 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
     this.uniforms.far.value = typedCamera.far;
     const geometry = this.geometry;
     geometry.instanceCount = spark.activeSplats;
-    const accumToWorld = new Matrix4();
-    if (!this.display.extSplats) {
-      accumToWorld.makeTranslation(spark.display.viewOrigin);
-    }
-    const cameraToWorld = camera.matrixWorld.clone();
-    const worldToCamera = cameraToWorld.invert();
-    const accumToCamera = worldToCamera.multiply(accumToWorld);
+    const renderCameraToWorld = this.renderCameraToWorld.copy(camera.matrixWorld).setPosition(
+      this.renderCameraOrigin.setFromMatrixPosition(camera.matrixWorld).sub(spark.display.renderOrigin)
+    );
+    const accumToCamera = this.accumToCamera.copy(renderCameraToWorld).invert();
     accumToCamera.decompose(
       this.uniforms.renderToViewPos.value,
       this.uniforms.renderToViewQuat.value,
-      new Vector3()
+      this.accumToCameraScale
     );
     this.uniforms.renderToViewBasis.value.setFromMatrix4(accumToCamera);
     this.uniforms.maxStdDev.value = spark.maxStdDev;
@@ -13123,7 +13129,7 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
       await new Promise((resolve) => setTimeout(resolve, this.readPause));
     }
     const current = this.current;
-    this.sortedCenter.copy(current.viewOrigin);
+    this.sortedCenter.copy(current.renderOrigin);
     this.sortedDir.copy(current.viewDirection);
     const { numSplats, maxSplats } = current;
     const rows = Math.max(1, Math.ceil(maxSplats / 16384));
@@ -13244,8 +13250,9 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
     const viewPos = new Vector3();
     const viewQuat = new Quaternion();
     this.current.viewToWorld.decompose(viewPos, viewQuat, new Vector3());
+    const lodPos = this.lodPosOverride ?? this.current.renderOrigin;
     if (this.lodPosOverride) {
-      viewPos.copy(this.lodPosOverride);
+      viewPos.copy(this.lodPosOverride).sub(this.current.renderOrigin);
     }
     if (this.lodQuatOverride) {
       viewQuat.copy(this.lodQuatOverride).normalize();
@@ -13254,7 +13261,7 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
       if (this.lastLod.pixelScaleLimit !== pixelScaleLimit || this.lastLod.maxSplats !== maxSplats) {
         this.lodDirty = true;
       }
-      const distance2 = viewPos.distanceTo(this.lastLod.pos);
+      const distance2 = lodPos.distanceTo(this.lastLod.pos);
       const distanceRamp = Math.max(0, 1 - distance2 / 1);
       const dot2 = viewQuat.dot(this.lastLod.quat);
       const quatRamp = Math.max(0, 1 - (1 - dot2) / 0.01);
@@ -13354,10 +13361,10 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
         const deltaPred = new Vector3();
         if (this.lastLod) {
           const deltaTime = Math.max(1, now22 - this.lastLod.timestamp);
-          deltaPred.copy(viewPos).sub(this.lastLod.pos).multiplyScalar(this.lastTraverseTime / deltaTime);
+          deltaPred.copy(lodPos).sub(this.lastLod.pos).multiplyScalar(this.lastTraverseTime / deltaTime);
         }
         this.lastLod = {
-          pos: viewPos,
+          pos: lodPos.clone(),
           quat: viewQuat,
           pixelScaleLimit,
           maxSplats,
@@ -13369,8 +13376,10 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
           deltaPred,
           lodMeshes,
           maxSplats,
+          this.lastLod.pos,
           viewPos,
           viewQuat,
+          this.current.renderOrigin,
           pixelScaleLimit
         );
         this.currentLod = this.lastLod;
@@ -13395,18 +13404,20 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
       this.lodIdToSplats.set(lodId, splats);
     }
   }
-  async updateLodInstances(worker, deltaPred, lodMeshes, maxSplats, viewPos, viewQuat, pixelScaleLimit) {
+  async updateLodInstances(worker, deltaPred, lodMeshes, maxSplats, lodPos, viewPos, viewQuat, renderOrigin, pixelScaleLimit) {
     const uuidToMesh = /* @__PURE__ */ new Map();
-    const cameraToWorld = new Matrix4().compose(
+    const cameraToWorld = this.lodCameraToWorld.compose(
       viewPos,
       viewQuat,
-      new Vector3().setScalar(1)
+      this.lodCameraScale.setScalar(1)
     );
     const instances = lodMeshes.reduce(
       (instances2, mesh) => {
         var _a22, _b2;
         uuidToMesh.set(mesh.uuid, mesh);
-        const viewToObject = mesh.matrixWorld.clone().invert().multiply(cameraToWorld);
+        const viewToObject = this.lodViewToObject.copy(mesh.matrixWorld).setPosition(
+          this.lodMeshOrigin.setFromMatrixPosition(mesh.matrixWorld).sub(renderOrigin)
+        ).invert().multiply(cameraToWorld);
         const splats = ((_a22 = mesh.packedSplats) == null ? void 0 : _a22.lodSplats) ?? ((_b2 = mesh.extSplats) == null ? void 0 : _b2.lodSplats) ?? mesh.paged;
         if (!splats) {
           return instances2;
@@ -13422,7 +13433,7 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
           instanceId: mesh.uuid,
           lodId: record.lodId,
           rootPage: record.rootPage,
-          viewToObjectCols: viewToObject.elements,
+          viewToObjectCols: viewToObject.elements.slice(),
           lodScale: mesh.lodScale,
           behindFoveate: mesh.behindFoveate ?? this.behindFoveate,
           coneFov0: mesh.coneFov0 ?? this.coneFov0,
@@ -13457,7 +13468,7 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
         const meshPosition = mesh.getWorldPosition(new Vector3());
         return {
           splats: mesh.paged,
-          distance: meshPosition.distanceTo(viewPos)
+          distance: meshPosition.distanceTo(lodPos)
         };
       }).filter((result2) => result2 !== null);
       if (!this.pageSizeWarning && pagedMeshes.length > this.pager.maxPages) {
@@ -15032,6 +15043,11 @@ const _SplatMesh = class _SplatMesh2 extends SplatGenerator {
     this.splatRgba = null;
     this.maxSh = 3;
     this.showLodPageDyno = new DynoInt({ value: 0 });
+    this.objectToRender = new Matrix4();
+    this.objectToRenderOffset = new Vector3();
+    this.worldToObject = new Matrix4();
+    this.worldToView = new Matrix4();
+    this.viewToObjectMatrix = new Matrix4();
     if (options.splats) {
       this.splats = options.splats;
       this.numSplats = options.splats.getNumSplats();
@@ -15433,6 +15449,7 @@ const _SplatMesh = class _SplatMesh2 extends SplatGenerator {
     time,
     deltaTime,
     viewToWorld,
+    renderOrigin,
     camera,
     renderSize,
     globalEdits,
@@ -15464,40 +15481,44 @@ const _SplatMesh = class _SplatMesh2 extends SplatGenerator {
       this.lastSplats = this.context.splats;
       this.generatorDirty = true;
     }
+    this.updateMatrixWorld();
+    const objectToWorld = this.objectToRender.copy(this.matrixWorld);
+    objectToWorld.setPosition(
+      this.objectToRenderOffset.setFromMatrixPosition(this.matrixWorld).sub(renderOrigin)
+    );
     if (!this.covSplats) {
-      if (this.context.transform.update(this)) {
+      if (this.context.transform.updateFromMatrix(objectToWorld)) {
         updated = true;
       }
       if (this.context.viewToWorld.updateFromMatrix(viewToWorld) && this.enableViewToWorld) {
         updated = true;
       }
-      const worldToView = viewToWorld.clone().invert();
+      const worldToView = this.worldToView.copy(viewToWorld).invert();
       if (this.context.worldToView.updateFromMatrix(worldToView) && this.enableWorldToView) {
         updated = true;
       }
-      const objectToWorld = new Matrix4().compose(
-        this.context.transform.translate.value,
-        this.context.transform.rotate.value,
-        new Vector3().setScalar(this.context.transform.scale.value)
+      const viewToObjectMatrix = this.viewToObjectMatrix.multiplyMatrices(
+        this.worldToObject.copy(objectToWorld).invert(),
+        viewToWorld
       );
-      const worldToObject = objectToWorld.invert();
-      const viewToObjectMatrix = worldToObject.multiply(viewToWorld);
       if (this.context.viewToObject.updateFromMatrix(viewToObjectMatrix) && (this.enableViewToObject || this.context.splats.hasRgbDir())) {
         updated = true;
       }
     } else {
-      if (this.context.covTransform.update(this)) {
+      if (this.context.covTransform.updateFromMatrix(objectToWorld)) {
         updated = true;
       }
       if (this.context.covViewToWorld.updateFromMatrix(viewToWorld) && this.enableViewToWorld) {
         updated = true;
       }
-      const worldToView = viewToWorld.clone().invert();
+      const worldToView = this.worldToView.copy(viewToWorld).invert();
       if (this.context.covWorldToView.updateFromMatrix(worldToView) && this.enableWorldToView) {
         updated = true;
       }
-      const worldToObject = this.matrixWorld.clone().invert();
-      const viewToObjectMatrix = worldToObject.multiply(viewToWorld);
+      const viewToObjectMatrix = this.viewToObjectMatrix.multiplyMatrices(
+        this.worldToObject.copy(objectToWorld).invert(),
+        viewToWorld
+      );
       if (this.context.covViewToObject.updateFromMatrix(viewToObjectMatrix) && (this.enableViewToObject || this.context.splats.hasRgbDir())) {
         updated = true;
       }
@@ -17694,6 +17715,7 @@ const _OldSparkRenderer = class _OldSparkRenderer2 extends Mesh {
     this.lastUpdateTime = null;
     this.defaultCameras = [];
     this.lastStochastic = null;
+    this.renderOrigin = new Vector3();
     this.pendingUpdate = {
       scene: null,
       originToWorld: new Matrix4(),
@@ -18033,6 +18055,7 @@ const _OldSparkRenderer = class _OldSparkRenderer2 extends Mesh {
       originToWorld = this.active.toWorld;
     }
     viewToWorld = viewToWorld ?? originToWorld.clone();
+    this.renderOrigin.setFromMatrixPosition(originToWorld);
     const time = this.time ?? this.clock.getElapsedTime();
     const deltaTime = time - (this.lastUpdateTime ?? time);
     this.lastUpdateTime = time;
@@ -18048,6 +18071,7 @@ const _OldSparkRenderer = class _OldSparkRenderer2 extends Mesh {
         time,
         deltaTime,
         viewToWorld,
+        renderOrigin: this.renderOrigin,
         globalEdits
       });
     }
@@ -26496,7 +26520,7 @@ TWEEN.update.bind(TWEEN);
 var exports = {
   Easing
 };
-const Tokens$1 = {
+const Tokens = {
   CESIUM: void 0,
   GOOGLEMAPS: void 0
 };
@@ -26706,20 +26730,28 @@ class TransitionControls extends EventDispatcher {
     this.lookAt = new Vector3();
     this.cameraTween = null;
     this.lookAtTween = null;
+    this.activeTransition = null;
     this.is2D = false;
   }
   animateTo(position, quaternion, duration = TweenSettings.DURATION) {
-    return new Promise((resolve, reject) => {
+    this.cancel();
+    return new Promise((resolve) => {
       const fromPosition = this.camera.position.clone();
       const fromQuaternion = this.camera.quaternion.clone();
       const toPosition = position.clone();
       const toQuaternion = quaternion.clone();
+      const transition = { resolve, toPosition, toQuaternion };
+      this.activeTransition = transition;
       const deltaPosition = toPosition.clone().sub(fromPosition);
       const deltaDistance = deltaPosition.length();
       const deltaQuaternion = toQuaternion.clone().multiply(fromQuaternion.clone().invert());
       const deltaAngle = Math.acos(Math.min(1, deltaQuaternion.w));
-      if (deltaDistance < 1 && deltaAngle < 1) {
-        resolve();
+      if (duration <= 0 || deltaDistance < 1 && deltaAngle < 1) {
+        this.camera.position.copy(toPosition);
+        this.camera.quaternion.copy(toQuaternion);
+        this.camera.updateMatrixWorld(true);
+        this.activeTransition = null;
+        resolve(true);
       } else {
         const fromLookAt = new Vector3(0, 0, -deltaDistance * 0.25).applyQuaternion(fromQuaternion).add(fromPosition);
         const toLookAt = new Vector3(0, 0, -deltaDistance * 0.25).applyQuaternion(toQuaternion).add(toPosition);
@@ -26730,15 +26762,24 @@ class TransitionControls extends EventDispatcher {
         this.lookAtTween = new Tween(this.lookAt).to(toLookAt, duration).easing(Easing.Quartic.InOut).onComplete(() => {
           this.lookAt.copy(toLookAt);
           this.lookAtTween = null;
+          this.complete(transition);
         }).start();
         this.cameraTween = new Tween(this.camera).to({ position: toPosition, up: toUp }, duration).easing(Easing.Quartic.InOut).onComplete(() => {
           this.camera.position.copy(toPosition);
           this.cameraTween = null;
-          resolve();
+          this.complete(transition);
         }).start();
       }
     });
   }
+  complete(transition) {
+    if (this.activeTransition !== transition || this.cameraTween || this.lookAtTween) return;
+    this.camera.position.copy(transition.toPosition);
+    this.camera.quaternion.copy(transition.toQuaternion);
+    this.camera.updateMatrixWorld(true);
+    this.activeTransition = null;
+    transition.resolve(true);
+  }
   update(time) {
     if (this.cameraUpTween) this.cameraUpTween.update(time);
     if (this.cameraTween) this.cameraTween.update(time);
@@ -26748,6 +26789,8 @@ class TransitionControls extends EventDispatcher {
     }
   }
   cancel() {
+    const transition = this.activeTransition;
+    this.activeTransition = null;
     if (this.cameraTween) {
       this.cameraTween.stop();
       this.cameraTween = null;
@@ -26760,6 +26803,7 @@ class TransitionControls extends EventDispatcher {
       this.cameraUpTween.stop();
       this.cameraUpTween = null;
     }
+    transition == null ? void 0 : transition.resolve(false);
   }
 }
 var sky_default$1 = "uniform vec3 sunPosition;uniform float rayleigh;uniform float turbidity;uniform float mieCoefficient;uniform vec3 up;varying vec3 vWorldPosition;varying vec3 vSunDirection;varying float vSunfade;varying vec3 vBetaR;varying vec3 vBetaM;varying float vSunE;const float e=2.71828182845904523536028747135266249775724709369995957;const float pi=3.141592653589793238462643383279502884197169;const vec3 lambda=vec3(680E-9,550E-9,450E-9);const vec3 totalRayleigh=vec3(5.804542996261093E-6,1.3562911419845635E-5,3.0265902468824876E-5);const float v=4.0;const vec3 K=vec3(0.686,0.678,0.666);const vec3 MieConst=vec3(1.8399918514433978E14,2.7798023919660528E14,4.0790479543861094E14);const float cutoffAngle=1.6110731556870734;const float steepness=1.5;const float EE=1000.0;float sunIntensity(float zenithAngleCos){zenithAngleCos=clamp(zenithAngleCos,-1.0,1.0);return EE*max(0.0,1.0-pow(e,-((cutoffAngle-acos(zenithAngleCos))/steepness)));}vec3 totalMie(float T){float c=(0.2*T)*10E-18;return 0.434*c*MieConst;}void main(){vec4 worldPosition=modelMatrix*vec4(position,1.0);vWorldPosition=worldPosition.xyz;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);gl_Position.z=gl_Position.w;vSunDirection=normalize(sunPosition);vSunE=sunIntensity(dot(vSunDirection,up));vSunfade=1.0-clamp(1.0-exp((sunPosition.y/450000.0)),0.0,1.0);float rayleighCoefficient=rayleigh-(1.0*(1.0-vSunfade));vBetaR=totalRayleigh*rayleighCoefficient;vBetaM=totalMie(turbidity)*mieCoefficient;}";
@@ -27152,7 +27196,7 @@ class GeojsonLayer extends ContentLayer {
     this.clear();
   }
 }
-const GAUSSIAN_FORMATS = /* @__PURE__ */ new Set(["ply", "sog"]);
+const GAUSSIAN_FORMATS = /* @__PURE__ */ new Set(["ply", "sog", "spz"]);
 function geodeticToEcefPosition(longitude, latitude, altitude) {
   const semiMajorAxis = 6378137;
   const eccentricity = 0.081819190842622;
@@ -27189,7 +27233,7 @@ function validateGaussianSplatLayerDefinition(definition) {
   }
   requireNonEmptyString((_a3 = definition.data) == null ? void 0 : _a3.url, "data.url");
   if (!GAUSSIAN_FORMATS.has((_b2 = definition.data) == null ? void 0 : _b2.format)) {
-    throw new Error('data.format must be "ply" or "sog".');
+    throw new Error('data.format must be "ply", "sog", or "spz".');
   }
   const renderOrder = ((_c = definition.options) == null ? void 0 : _c.renderOrder) ?? 0;
   if (renderOrder !== 0) {
@@ -27261,7 +27305,8 @@ function makeGaussianSplatTransform(transform) {
 }
 const FORMAT_TYPES = {
   ply: SplatFileType.PLY,
-  sog: SplatFileType.PCSOGSZIP
+  sog: SplatFileType.PCSOGSZIP,
+  spz: SplatFileType.SPZ
 };
 function normalizeError(error) {
   return error instanceof Error ? error : new Error(String(error));
@@ -27396,24 +27441,32 @@ const ViewerEvents = (
   }
 );
 class Viewer extends EventDispatcher {
+  /**
+   * @param {HTMLElement | null} container
+   * @param {import('../main.js').ViewerOptions} [options]
+   */
   constructor(container, options = {}) {
     super();
     this.isViewer = true;
     this.type = "viewer";
     this.disposed = false;
     this.sparkRenderer = null;
-    Tokens$1.CESIUM = options.cesiumToken || void 0;
-    Tokens$1.GOOGLEMAPS = options.googleMapsToken || void 0;
+    this.transparentBackground = options.transparentBackground ?? true;
+    Tokens.CESIUM = options.cesiumToken || void 0;
+    Tokens.GOOGLEMAPS = options.googleMapsToken || void 0;
     this.state = new StateDispatcher({
       time: { type: "f", value: 0 },
       loaded: false,
-      added: false
+      added: false,
+      ready: false
     });
     this.renderer = new WebGLRenderer({
       antialias: true,
-      powerPreference: "high-performance"
+      powerPreference: "high-performance",
+      alpha: this.transparentBackground,
+      premultipliedAlpha: true
     });
-    this.renderer.setClearColor(16777215, 1);
+    this.renderer.setClearColor(this.transparentBackground ? 0 : 16777215, this.transparentBackground ? 0 : 1);
     this.renderer.toneMapping = AgXToneMapping;
     this.renderer.outputColorSpace = SRGBColorSpace;
     this.renderer.toneMappingExposure = 1;
@@ -27446,8 +27499,11 @@ class Viewer extends EventDispatcher {
     };
     this.globeControls.addEventListener("start", this._onGlobeControlsStart);
     this.transitionControls = new TransitionControls(this.camera);
-    this.globeManager = new GlobeManager(this.scene, this.camera, this.renderer, { apiToken: Tokens$1.CESIUM, googleMapsToken: Tokens$1.GOOGLEMAPS });
-    this.globeControls.setTilesRenderer(this.globeManager.tiles);
+    this.globeManager = new GlobeManager(this.scene, this.camera, this.renderer, { apiToken: Tokens.CESIUM, googleMapsToken: Tokens.GOOGLEMAPS });
+    if (this.globeManager.tiles) {
+      this.globeManager.tiles.group.visible = !this.transparentBackground;
+      this.globeControls.setTilesRenderer(this.globeManager.tiles);
+    }
     this.cameraCoords = {};
     this.pointerCoords = {};
     this.pointerXYZ = new Vector3();
@@ -27489,6 +27545,7 @@ class Viewer extends EventDispatcher {
     if (container) this.appendTo(container);
     this.sky = new Sky();
     this.sky.scale.setScalar(2e7);
+    this.sky.visible = !this.transparentBackground;
     this.scene.add(this.sky);
     const phi = MathUtils.degToRad(80);
     const theta = MathUtils.degToRad(180);
@@ -27496,6 +27553,10 @@ class Viewer extends EventDispatcher {
     this.sky.material.uniforms.sunPosition.value = sunPosition;
     this.pointerRaycaster = new Raycaster();
     this._onPointerMove = (event) => {
+      if (!this.globeManager.tiles) {
+        this.pointerCoords = {};
+        return;
+      }
       const pointer = {};
       pointer.x = event.clientX / window.innerWidth * 2 - 1;
       pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
@@ -27544,13 +27605,14 @@ class Viewer extends EventDispatcher {
     return coords;
   }
   setBackgroundColor(color) {
-    this.renderer.setClearColor(color, 0);
+    this.renderer.setClearColor(color, this.transparentBackground ? 0 : 1);
   }
   appendTo(container) {
     this.container = container;
     this.container.appendChild(this.renderer.domElement);
     this.container.appendChild(this.css2DRenderer.domElement);
     this.resizeView();
+    this.state.update({ added: true });
     this.dispatchEvent({ type: ViewerEvents.APPENDED });
   }
   updateCameraDirections() {
@@ -27822,11 +27884,13 @@ class Viewer extends EventDispatcher {
     let pivot = null;
     const raycaster = new Raycaster();
     raycaster.setFromCamera({ x: 0, y: 0 }, this.camera);
-    const intersects = raycaster.intersectObject(this.globeManager.tiles.group, true);
-    if (intersects.length > 0) {
-      const intersect = intersects[0];
-      if (intersect) {
-        pivot = intersect.point.clone();
+    if (this.globeManager.tiles) {
+      const intersects = raycaster.intersectObject(this.globeManager.tiles.group, true);
+      if (intersects.length > 0) {
+        const intersect = intersects[0];
+        if (intersect) {
+          pivot = intersect.point.clone();
+        }
       }
     }
     if (!pivot) {
@@ -27837,8 +27901,8 @@ class Viewer extends EventDispatcher {
   async alignCamera(lon, lat, alt, pitch = this.cameraCoords.pitch, yaw = this.cameraCoords.yaw, roll = this.cameraCoords.roll, duration = TweenSettings.DURATION) {
     const targetPosition = new Vector3().fromArray(geodeticToEcefPosition$1(lon, lat, alt));
     const targetQuaternion = geodeticToEcefRotation(lon, lat, pitch, yaw, roll);
-    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then(() => {
-      this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt, pitch, yaw, roll });
+    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then((completed) => {
+      if (completed) this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt, pitch, yaw, roll });
     });
   }
   async focusCamera(lon, lat, alt, distance = 2e3, pitch = this.cameraCoords.pitch, duration = TweenSettings.DURATION) {
@@ -27846,8 +27910,8 @@ class Viewer extends EventDispatcher {
     const targetQuaternion = geodeticToEcefRotation(lon, lat, pitch, 0, 0);
     const direction = new Vector3(0, 0, 1).applyQuaternion(targetQuaternion);
     targetPosition.addScaledVector(direction, distance);
-    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then(() => {
-      this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt });
+    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then((completed) => {
+      if (completed) this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt });
     });
   }
   async angleCamera(pitch = this.cameraCoords.pitch, yaw = this.cameraCoords.yaw, duration = TweenSettings.DURATION) {
@@ -27858,17 +27922,17 @@ class Viewer extends EventDispatcher {
     const targetQuaternion = geodeticToEcefRotation(lon, lat, pitch, yaw, 0);
     const direction = new Vector3(0, 0, 1).applyQuaternion(targetQuaternion);
     targetPosition.addScaledVector(direction, distance);
-    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then(() => {
-      this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt });
+    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then((completed) => {
+      if (completed) this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt });
     });
   }
   setViewMode(mode = "3d") {
     if (mode == "3d") {
       this.globeControls.rotationSpeed = 1;
-      this.angleCamera(-60, void 0, 500);
+      return this.angleCamera(-60, void 0, 500);
     } else {
       this.globeControls.rotationSpeed = 0;
-      this.angleCamera(-90, 0, 500);
+      return this.angleCamera(-90, 0, 500);
     }
   }
   exportScene() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@splnlss/3d-story-viewer",
-    "version": "0.5.4",
+    "version": "0.5.6",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
@@ -25,10 +25,15 @@
         }
     },
     "scripts": {
+        "patch:spark": "patch-package --error-on-fail && node scripts/check-spark-backport.mjs",
+        "predev": "yarn patch:spark",
         "dev": "vite",
+        "prebuild": "yarn patch:spark",
         "build": "vite build && tsc -p tsconfig.types.json",
         "preview": "vite preview",
+        "pretest": "yarn patch:spark",
         "test": "vitest run",
+        "pretest:browser": "yarn patch:spark",
         "test:browser": "playwright test",
         "test:all": "npm run test && npm run test:browser",
         "pack:check": "node scripts/check-package-assets.mjs",
@@ -40,6 +45,8 @@
         "@loaders.gl/gltf": "^4.3.4",
         "@loaders.gl/polyfills": "^4.3.4",
         "@playwright/test": "1.62.1",
+        "patch-package": "8.0.1",
+        "pngjs": "7.0.0",
         "typescript": "5.9.3",
         "vitest": "3.2.7"
     },
@@ -49,6 +56,7 @@
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tweenjs/tween.js": "^25.0.0",
         "@vitejs/plugin-basic-ssl": "^1.2.0",
+        "dotenv": "^17.2.2",
         "earcut": "^3.0.1",
         "sass": "^1.83.4",
         "stats.js": "^0.17.0",
@@ -57,7 +65,6 @@
         "terser": "^5.37.0",
         "three": "0.185.1",
         "vite": "^6.0.5",
-        "vite-plugin-glsl": "^1.3.1",
-        "dotenv": "^17.2.2"
+        "vite-plugin-glsl": "^1.3.1"
     }
 }