@chocozhang/three-model-render 1.0.3 → 1.0.5

package/dist/effect/index.mjs

@@ -1,41 +1,33 @@
 import * as THREE from 'three';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
+/**
+ * @file exploder.ts
+ * @description
+ * GroupExploder - Three.js based model explosion effect tool (Vue3 + TS Support)
+ * ----------------------------------------------------------------------
+ * This tool is used to perform "explode / restore" animations on a set of specified Meshes:
+ *  - Initialize only once (onMounted)
+ *  - Supports dynamic switching of models and automatically restores the explosion state of the previous model
+ *  - Supports multiple arrangement modes (ring / spiral / grid / radial)
+ *  - Supports automatic transparency for non-exploded objects (dimOthers)
+ *  - Supports automatic camera positioning to the best observation point
+ *  - All animations use native requestAnimationFrame
+ *
+ * @best-practice
+ * - Initialize in `onMounted`.
+ * - Use `setMeshes` to update the active set of meshes to explode.
+ * - Call `explode()` to trigger the effect and `restore()` to reset.
+ */
 function easeInOutQuad(t) {
     return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
 }
 class GroupExploder {
+    /**
+     * Constructor
+     * @param scene Three.js Scene instance
+     * @param camera Three.js Camera (usually PerspectiveCamera)
+     * @param controls OrbitControls instance (must be bound to camera)
+     */
     constructor(scene, camera, controls) {
         // sets and snapshots
         this.currentSet = null;
@@ -67,211 +59,210 @@ class GroupExploder {
         this.log('init() called');
     }
     /**
-     * setMeshes(newSet):
+     * Set the current set of meshes for explosion.
      * - Detects content-level changes even if same Set reference is used.
      * - Preserves prevSet/stateMap to allow async restore when needed.
      * - Ensures stateMap contains snapshots for *all meshes in the new set*.
+     * @param newSet The new set of meshes
+     * @param contextId Optional context ID to distinguish business scenarios
      */
-    setMeshes(newSet, options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            const autoRestorePrev = (_a = options === null || options === void 0 ? void 0 : options.autoRestorePrev) !== null && _a !== void 0 ? _a : true;
-            const restoreDuration = (_b = options === null || options === void 0 ? void 0 : options.restoreDuration) !== null && _b !== void 0 ? _b : 300;
-            this.log(`setMeshes called. newSetSize=${newSet ? newSet.size : 0}, autoRestorePrev=${autoRestorePrev}`);
-            // If the newSet is null and currentSet is null -> nothing
-            if (!newSet && !this.currentSet) {
-                this.log('setMeshes: both newSet and currentSet are null, nothing to do');
-                return;
-            }
-            // If both exist and are the same reference, we still must detect content changes.
-            const sameReference = this.currentSet === newSet;
-            // Prepare prevSet snapshot (we copy current to prev)
-            if (this.currentSet) {
-                this.prevSet = this.currentSet;
-                this.prevStateMap = new Map(this.stateMap);
-                this.log(`setMeshes: backed up current->prev prevSetSize=${this.prevSet.size}`);
-            }
-            else {
-                this.prevSet = null;
-                this.prevStateMap = new Map();
-            }
-            // If we used to be exploded and need to restore prevSet, do that first (await)
-            if (this.prevSet && autoRestorePrev && this.isExploded) {
-                this.log('setMeshes: need to restore prevSet before applying newSet');
-                yield this.restoreSet(this.prevSet, this.prevStateMap, restoreDuration, { debug: true });
-                this.log('setMeshes: prevSet restore done');
-                this.prevStateMap.clear();
-                this.prevSet = null;
-            }
-            // Now register newSet: we clear and rebuild stateMap carefully.
-            // But we must handle the case where caller reuses same Set object and just mutated elements.
-            // We will compute additions and removals.
-            const oldSet = this.currentSet;
-            this.currentSet = newSet;
-            // If newSet is null -> simply clear stateMap
-            if (!this.currentSet) {
-                this.stateMap.clear();
-                this.log('setMeshes: newSet is null -> cleared stateMap');
-                this.isExploded = false;
+    async setMeshes(newSet, options) {
+        const autoRestorePrev = options?.autoRestorePrev ?? true;
+        const restoreDuration = options?.restoreDuration ?? 300;
+        this.log(`setMeshes called. newSetSize=${newSet ? newSet.size : 0}, autoRestorePrev=${autoRestorePrev}`);
+        // If the newSet is null and currentSet is null -> nothing
+        if (!newSet && !this.currentSet) {
+            this.log('setMeshes: both newSet and currentSet are null, nothing to do');
+            return;
+        }
+        // If both exist and are the same reference, we still must detect content changes.
+        const sameReference = this.currentSet === newSet;
+        // Prepare prevSet snapshot (we copy current to prev)
+        if (this.currentSet) {
+            this.prevSet = this.currentSet;
+            this.prevStateMap = new Map(this.stateMap);
+            this.log(`setMeshes: backed up current->prev prevSetSize=${this.prevSet.size}`);
+        }
+        else {
+            this.prevSet = null;
+            this.prevStateMap = new Map();
+        }
+        // If we used to be exploded and need to restore prevSet, do that first (await)
+        if (this.prevSet && autoRestorePrev && this.isExploded) {
+            this.log('setMeshes: need to restore prevSet before applying newSet');
+            await this.restoreSet(this.prevSet, this.prevStateMap, restoreDuration, { debug: true });
+            this.log('setMeshes: prevSet restore done');
+            this.prevStateMap.clear();
+            this.prevSet = null;
+        }
+        // Now register newSet: we clear and rebuild stateMap carefully.
+        // But we must handle the case where caller reuses same Set object and just mutated elements.
+        // We will compute additions and removals.
+        const oldSet = this.currentSet;
+        this.currentSet = newSet;
+        // If newSet is null -> simply clear stateMap
+        if (!this.currentSet) {
+            this.stateMap.clear();
+            this.log('setMeshes: newSet is null -> cleared stateMap');
+            this.isExploded = false;
+            return;
+        }
+        // If we have oldSet (could be same reference) then compute diffs
+        if (oldSet) {
+            // If same reference but size or content differs -> handle diffs
+            const wasSameRef = sameReference;
+            let added = [];
+            let removed = [];
+            // Build maps of membership
+            const oldMembers = new Set(Array.from(oldSet));
+            const newMembers = new Set(Array.from(this.currentSet));
+            // find removals
+            oldMembers.forEach((m) => {
+                if (!newMembers.has(m))
+                    removed.push(m);
+            });
+            // find additions
+            newMembers.forEach((m) => {
+                if (!oldMembers.has(m))
+                    added.push(m);
+            });
+            if (wasSameRef && added.length === 0 && removed.length === 0) {
+                // truly identical (no content changes)
+                this.log('setMeshes: same reference and identical contents -> nothing to update');
                 return;
             }
-            // If we have oldSet (could be same reference) then compute diffs
-            if (oldSet) {
-                // If same reference but size or content differs -> handle diffs
-                const wasSameRef = sameReference;
-                let added = [];
-                let removed = [];
-                // Build maps of membership
-                const oldMembers = new Set(Array.from(oldSet));
-                const newMembers = new Set(Array.from(this.currentSet));
-                // find removals
-                oldMembers.forEach((m) => {
-                    if (!newMembers.has(m))
-                        removed.push(m);
-                });
-                // find additions
-                newMembers.forEach((m) => {
-                    if (!oldMembers.has(m))
-                        added.push(m);
-                });
-                if (wasSameRef && added.length === 0 && removed.length === 0) {
-                    // truly identical (no content changes)
-                    this.log('setMeshes: same reference and identical contents -> nothing to update');
-                    return;
+            this.log(`setMeshes: diff detected -> added=${added.length}, removed=${removed.length}`);
+            // Remove snapshots for removed meshes
+            removed.forEach((m) => {
+                if (this.stateMap.has(m)) {
+                    this.stateMap.delete(m);
                 }
-                this.log(`setMeshes: diff detected -> added=${added.length}, removed=${removed.length}`);
-                // Remove snapshots for removed meshes
-                removed.forEach((m) => {
-                    if (this.stateMap.has(m)) {
-                        this.stateMap.delete(m);
-                    }
-                });
-                // Ensure snapshots exist for current set members (create for newly added meshes)
-                yield this.ensureSnapshotsForSet(this.currentSet);
-                this.log(`setMeshes: after diff handling, stateMap size=${this.stateMap.size}`);
-                this.isExploded = false;
-                return;
-            }
-            else {
-                // no oldSet -> brand new registration
-                this.stateMap.clear();
-                yield this.ensureSnapshotsForSet(this.currentSet);
-                this.log(`setMeshes: recorded stateMap entries for newSet size=${this.stateMap.size}`);
-                this.isExploded = false;
-                return;
-            }
-        });
+            });
+            // Ensure snapshots exist for current set members (create for newly added meshes)
+            await this.ensureSnapshotsForSet(this.currentSet);
+            this.log(`setMeshes: after diff handling, stateMap size=${this.stateMap.size}`);
+            this.isExploded = false;
+            return;
+        }
+        else {
+            // no oldSet -> brand new registration
+            this.stateMap.clear();
+            await this.ensureSnapshotsForSet(this.currentSet);
+            this.log(`setMeshes: recorded stateMap entries for newSet size=${this.stateMap.size}`);
+            this.isExploded = false;
+            return;
+        }
     }
     /**
      * ensureSnapshotsForSet: for each mesh in set, ensure stateMap has an entry.
      * If missing, record current matrixWorld as originalMatrixWorld (best-effort).
      */
-    ensureSnapshotsForSet(set) {
-        return __awaiter(this, void 0, void 0, function* () {
-            set.forEach((m) => {
+    async ensureSnapshotsForSet(set) {
+        set.forEach((m) => {
+            try {
+                m.updateMatrixWorld(true);
+            }
+            catch { }
+            if (!this.stateMap.has(m)) {
                 try {
-                    m.updateMatrixWorld(true);
+                    this.stateMap.set(m, {
+                        originalParent: m.parent || null,
+                        originalMatrixWorld: (m.matrixWorld && m.matrixWorld.clone()) || new THREE.Matrix4().copy(m.matrix),
+                    });
+                    // Also store in userData for extra resilience
+                    m.userData.__originalMatrixWorld = this.stateMap.get(m).originalMatrixWorld.clone();
                 }
-                catch (_a) { }
-                if (!this.stateMap.has(m)) {
-                    try {
-                        this.stateMap.set(m, {
-                            originalParent: m.parent || null,
-                            originalMatrixWorld: (m.matrixWorld && m.matrixWorld.clone()) || new THREE.Matrix4().copy(m.matrix),
-                        });
-                        // Also store in userData for extra resilience
-                        m.userData.__originalMatrixWorld = this.stateMap.get(m).originalMatrixWorld.clone();
-                    }
-                    catch (e) {
-                        this.log(`ensureSnapshotsForSet: failed to snapshot mesh ${m.name || m.id}: ${e.message}`);
-                    }
+                catch (e) {
+                    this.log(`ensureSnapshotsForSet: failed to snapshot mesh ${m.name || m.id}: ${e.message}`);
                 }
-            });
+            }
         });
     }
     /**
      * explode: compute targets first, compute targetBound using targets + mesh radii,
      * animate camera to that targetBound, then animate meshes to targets.
      */
-    explode(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (!this.currentSet || this.currentSet.size === 0) {
-                this.log('explode: empty currentSet, nothing to do');
-                return;
+    async explode(opts) {
+        if (!this.currentSet || this.currentSet.size === 0) {
+            this.log('explode: empty currentSet, nothing to do');
+            return;
+        }
+        const { spacing = 2, duration = 1000, lift = 0.5, cameraPadding = 1.5, mode = 'spiral', dimOthers = { enabled: true, opacity: 0.25 }, debug = false, } = opts || {};
+        this.log(`explode called. setSize=${this.currentSet.size}, mode=${mode}, spacing=${spacing}, duration=${duration}, lift=${lift}, dim=${dimOthers.enabled}`);
+        this.cancelAnimations();
+        const meshes = Array.from(this.currentSet);
+        // ensure snapshots exist for any meshes that may have been added after initial registration
+        await this.ensureSnapshotsForSet(this.currentSet);
+        // compute center/radius from current meshes (fallback)
+        const initial = this.computeBoundingSphereForMeshes(meshes);
+        const center = initial.center;
+        const baseRadius = Math.max(1, initial.radius);
+        this.log(`explode: initial center=${center.toArray().map((n) => n.toFixed(3))}, baseRadius=${baseRadius.toFixed(3)}`);
+        // compute targets (pure calculation)
+        const targets = this.computeTargetsByMode(meshes, center, baseRadius + spacing, { lift, mode });
+        this.log(`explode: computed ${targets.length} target positions`);
+        // compute target-based bounding sphere (targets + per-mesh radius)
+        const targetBound = this.computeBoundingSphereForPositionsAndMeshes(targets, meshes);
+        this.log(`explode: targetBound center=${targetBound.center.toArray().map((n) => n.toFixed(3))}, radius=${targetBound.radius.toFixed(3)}`);
+        await this.animateCameraToFit(targetBound.center, targetBound.radius, { duration: Math.min(600, duration), padding: cameraPadding });
+        this.log('explode: camera animation to target bound completed');
+        // apply dim if needed with context id
+        const contextId = dimOthers?.enabled ? this.applyDimToOthers(meshes, dimOthers.opacity ?? 0.25, { debug }) : null;
+        if (contextId)
+            this.log(`explode: applied dim for context ${contextId}`);
+        // capture starts after camera move
+        const starts = meshes.map((m) => {
+            const v = new THREE.Vector3();
+            try {
+                m.getWorldPosition(v);
             }
-            const { spacing = 2, duration = 1000, lift = 0.5, cameraPadding = 1.5, mode = 'spiral', dimOthers = { enabled: true, opacity: 0.25 }, debug = false, } = opts || {};
-            this.log(`explode called. setSize=${this.currentSet.size}, mode=${mode}, spacing=${spacing}, duration=${duration}, lift=${lift}, dim=${dimOthers.enabled}`);
-            this.cancelAnimations();
-            const meshes = Array.from(this.currentSet);
-            // ensure snapshots exist for any meshes that may have been added after initial registration
-            yield this.ensureSnapshotsForSet(this.currentSet);
-            // compute center/radius from current meshes (fallback)
-            const initial = this.computeBoundingSphereForMeshes(meshes);
-            const center = initial.center;
-            const baseRadius = Math.max(1, initial.radius);
-            this.log(`explode: initial center=${center.toArray().map((n) => n.toFixed(3))}, baseRadius=${baseRadius.toFixed(3)}`);
-            // compute targets (pure calculation)
-            const targets = this.computeTargetsByMode(meshes, center, baseRadius + spacing, { lift, mode });
-            this.log(`explode: computed ${targets.length} target positions`);
-            // compute target-based bounding sphere (targets + per-mesh radius)
-            const targetBound = this.computeBoundingSphereForPositionsAndMeshes(targets, meshes);
-            this.log(`explode: targetBound center=${targetBound.center.toArray().map((n) => n.toFixed(3))}, radius=${targetBound.radius.toFixed(3)}`);
-            yield this.animateCameraToFit(targetBound.center, targetBound.radius, { duration: Math.min(600, duration), padding: cameraPadding });
-            this.log('explode: camera animation to target bound completed');
-            // apply dim if needed with context id
-            const contextId = (dimOthers === null || dimOthers === void 0 ? void 0 : dimOthers.enabled) ? this.applyDimToOthers(meshes, (_a = dimOthers.opacity) !== null && _a !== void 0 ? _a : 0.25, { debug }) : null;
-            if (contextId)
-                this.log(`explode: applied dim for context ${contextId}`);
-            // capture starts after camera move
-            const starts = meshes.map((m) => {
-                const v = new THREE.Vector3();
-                try {
-                    m.getWorldPosition(v);
-                }
-                catch (_a) {
-                    // fallback to originalMatrixWorld if available
-                    const st = this.stateMap.get(m);
-                    if (st)
-                        v.setFromMatrixPosition(st.originalMatrixWorld);
-                }
-                return v;
-            });
-            const startTime = performance.now();
-            const total = Math.max(1, duration);
-            const tick = (now) => {
-                const t = Math.min(1, (now - startTime) / total);
-                const eased = easeInOutQuad(t);
-                for (let i = 0; i < meshes.length; i++) {
-                    const m = meshes[i];
-                    const s = starts[i];
-                    const tar = targets[i];
-                    const cur = s.clone().lerp(tar, eased);
-                    if (m.parent) {
-                        const local = cur.clone();
-                        m.parent.worldToLocal(local);
-                        m.position.copy(local);
-                    }
-                    else {
-                        m.position.copy(cur);
-                    }
-                    m.updateMatrix();
-                }
-                if (this.controls && typeof this.controls.update === 'function')
-                    this.controls.update();
-                if (t < 1) {
-                    this.animId = requestAnimationFrame(tick);
+            catch {
+                // fallback to originalMatrixWorld if available
+                const st = this.stateMap.get(m);
+                if (st)
+                    v.setFromMatrixPosition(st.originalMatrixWorld);
+            }
+            return v;
+        });
+        const startTime = performance.now();
+        const total = Math.max(1, duration);
+        const tick = (now) => {
+            const t = Math.min(1, (now - startTime) / total);
+            const eased = easeInOutQuad(t);
+            for (let i = 0; i < meshes.length; i++) {
+                const m = meshes[i];
+                const s = starts[i];
+                const tar = targets[i];
+                const cur = s.clone().lerp(tar, eased);
+                if (m.parent) {
+                    const local = cur.clone();
+                    m.parent.worldToLocal(local);
+                    m.position.copy(local);
                 }
                 else {
-                    this.animId = null;
-                    this.isExploded = true;
-                    this.log(`explode: completed. contextId=${contextId !== null && contextId !== void 0 ? contextId : 'none'}`);
+                    m.position.copy(cur);
                 }
-            };
-            this.animId = requestAnimationFrame(tick);
-            return;
-        });
+                m.updateMatrix();
+            }
+            if (this.controls && typeof this.controls.update === 'function')
+                this.controls.update();
+            if (t < 1) {
+                this.animId = requestAnimationFrame(tick);
+            }
+            else {
+                this.animId = null;
+                this.isExploded = true;
+                this.log(`explode: completed. contextId=${contextId ?? 'none'}`);
+            }
+        };
+        this.animId = requestAnimationFrame(tick);
+        return;
     }
+    /**
+     * Restore all exploded meshes to their original transform:
+     * - Supports smooth animation
+     * - Automatically cancels transparency
+     */
     restore(duration = 400) {
         if (!this.currentSet || this.currentSet.size === 0) {
             this.log('restore: no currentSet to restore');
@@ -288,7 +279,7 @@ class GroupExploder {
      */
     restoreSet(set, stateMap, duration = 400, opts) {
         if (!set || set.size === 0) {
-            if (opts === null || opts === void 0 ? void 0 : opts.debug)
+            if (opts?.debug)
                 this.log('restoreSet: empty set, nothing to restore');
             return Promise.resolve();
         }
@@ -301,12 +292,12 @@ class GroupExploder {
             try {
                 m.updateMatrixWorld(true);
             }
-            catch (_a) { }
+            catch { }
             const s = new THREE.Vector3();
             try {
                 m.getWorldPosition(s);
             }
-            catch (_b) {
+            catch {
                 s.set(0, 0, 0);
             }
             starts.push(s);
@@ -404,7 +395,7 @@ class GroupExploder {
         });
     }
     // material dim with context id
-    applyDimToOthers(explodingMeshes, opacity = 0.25, opts) {
+    applyDimToOthers(explodingMeshes, opacity = 0.25, _opts) {
         const contextId = `ctx_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
         const explodingSet = new Set(explodingMeshes);
         const touched = new Set();
@@ -415,11 +406,10 @@ class GroupExploder {
             if (explodingSet.has(mesh))
                 return;
             const applyMat = (mat) => {
-                var _a;
                 if (!this.materialSnaps.has(mat)) {
                     this.materialSnaps.set(mat, {
                         transparent: !!mat.transparent,
-                        opacity: (_a = mat.opacity) !== null && _a !== void 0 ? _a : 1,
+                        opacity: mat.opacity ?? 1,
                         depthWrite: mat.depthWrite,
                     });
                 }
@@ -446,7 +436,7 @@ class GroupExploder {
         return contextId;
     }
     // clean contexts for meshes (restore materials whose contexts are removed)
-    cleanContextsForMeshes(meshes) {
+    cleanContextsForMeshes(_meshes) {
         // conservative strategy: for each context we created, delete it and restore materials accordingly
         for (const [contextId, mats] of Array.from(this.contextMaterials.entries())) {
             mats.forEach((mat) => {
@@ -560,7 +550,7 @@ class GroupExploder {
                     }
                 }
             }
-            catch (_a) {
+            catch {
                 radius = 0;
             }
             if (!isFinite(radius) || radius < 0 || radius > 1e8)
@@ -583,10 +573,9 @@ class GroupExploder {
     }
     // computeTargetsByMode (unchanged logic but pure function)
     computeTargetsByMode(meshes, center, baseRadius, opts) {
-        var _a, _b;
         const n = meshes.length;
-        const lift = (_a = opts.lift) !== null && _a !== void 0 ? _a : 0.5;
-        const mode = (_b = opts.mode) !== null && _b !== void 0 ? _b : 'ring';
+        const lift = opts.lift ?? 0.5;
+        const mode = opts.mode ?? 'ring';
         const targets = [];
         if (mode === 'ring') {
             for (let i = 0; i < n; i++) {
@@ -628,99 +617,109 @@ class GroupExploder {
         return targets;
     }
     animateCameraToFit(targetCenter, targetRadius, opts) {
-        var _a, _b, _c;
-        const duration = (_a = opts === null || opts === void 0 ? void 0 : opts.duration) !== null && _a !== void 0 ? _a : 600;
-        const padding = (_b = opts === null || opts === void 0 ? void 0 : opts.padding) !== null && _b !== void 0 ? _b : 1.5;
+        const duration = opts?.duration ?? 600;
+        const padding = opts?.padding ?? 1.5;
         if (!(this.camera instanceof THREE.PerspectiveCamera)) {
             if (this.controls && this.controls.target) {
-                this.controls.target.copy(targetCenter);
-                if (typeof this.controls.update === 'function')
-                    this.controls.update();
+                // Fallback for non-PerspectiveCamera
+                const startTarget = this.controls.target.clone();
+                const startPos = this.camera.position.clone();
+                const endTarget = targetCenter.clone();
+                const dir = startPos.clone().sub(startTarget).normalize();
+                const dist = startPos.distanceTo(startTarget);
+                const endPos = endTarget.clone().add(dir.multiplyScalar(dist));
+                const startTime = performance.now();
+                const tick = (now) => {
+                    const t = Math.min(1, (now - startTime) / duration);
+                    const k = easeInOutQuad(t);
+                    if (this.controls && this.controls.target) {
+                        this.controls.target.lerpVectors(startTarget, endTarget, k);
+                    }
+                    this.camera.position.lerpVectors(startPos, endPos, k);
+                    if (this.controls?.update)
+                        this.controls.update();
+                    if (t < 1) {
+                        this.cameraAnimId = requestAnimationFrame(tick);
+                    }
+                    else {
+                        this.cameraAnimId = null;
+                    }
+                };
+                this.cameraAnimId = requestAnimationFrame(tick);
             }
             return Promise.resolve();
         }
-        const cam = this.camera;
-        const fov = (cam.fov * Math.PI) / 180;
-        const safeRadius = isFinite(targetRadius) && targetRadius > 0 ? targetRadius : 1;
-        const desiredDistance = Math.min(1e6, (safeRadius * ((_c = opts === null || opts === void 0 ? void 0 : opts.padding) !== null && _c !== void 0 ? _c : padding)) / Math.sin(fov / 2));
-        const camPos = cam.position.clone();
-        const dir = camPos.clone().sub(targetCenter);
-        if (dir.length() === 0)
+        // PerspectiveCamera logic
+        const fov = THREE.MathUtils.degToRad(this.camera.fov);
+        const aspect = this.camera.aspect;
+        // Calculate distance needed to fit the sphere
+        // tan(fov/2) = radius / distance  => distance = radius / tan(fov/2)
+        // We also consider aspect ratio for horizontal fit
+        const distV = targetRadius / Math.sin(fov / 2);
+        const distH = targetRadius / Math.sin(Math.min(fov, fov * aspect) / 2); // approximate
+        const dist = Math.max(distV, distH) * padding;
+        const startPos = this.camera.position.clone();
+        const startTarget = this.controls?.target ? this.controls.target.clone() : new THREE.Vector3(); // assumption
+        if (!this.controls?.target) {
+            this.camera.getWorldDirection(startTarget);
+            startTarget.add(startPos);
+        }
+        // Determine end position: keep current viewing direction relative to center
+        const dir = startPos.clone().sub(startTarget).normalize();
+        if (dir.lengthSq() < 0.001)
             dir.set(0, 0, 1);
-        else
-            dir.normalize();
-        const newCamPos = targetCenter.clone().add(dir.multiplyScalar(desiredDistance));
-        const startPos = cam.position.clone();
-        const startTarget = (this.controls && this.controls.target) ? (this.controls.target.clone()) : this.getCameraLookAtPoint();
         const endTarget = targetCenter.clone();
-        const startTime = performance.now();
+        const endPos = endTarget.clone().add(dir.multiplyScalar(dist));
         return new Promise((resolve) => {
+            const startTime = performance.now();
             const tick = (now) => {
-                const t = Math.min(1, (now - startTime) / Math.max(1, duration));
-                const eased = easeInOutQuad(t);
-                cam.position.lerpVectors(startPos, newCamPos, eased);
-                if (this.controls && this.controls.target)
-                    this.controls.target.lerpVectors(startTarget, endTarget, eased);
-                cam.updateProjectionMatrix();
-                if (this.controls && typeof this.controls.update === 'function')
-                    this.controls.update();
-                if (t < 1)
+                const t = Math.min(1, (now - startTime) / duration);
+                const k = easeInOutQuad(t);
+                this.camera.position.lerpVectors(startPos, endPos, k);
+                if (this.controls && this.controls.target) {
+                    this.controls.target.lerpVectors(startTarget, endTarget, k);
+                    this.controls.update?.();
+                }
+                else {
+                    this.camera.lookAt(endTarget); // simple lookAt if no controls
+                }
+                if (t < 1) {
                     this.cameraAnimId = requestAnimationFrame(tick);
+                }
                 else {
                     this.cameraAnimId = null;
-                    this.log(`animateCameraToFit: done. center=${targetCenter.toArray().map((n) => n.toFixed(2))}, radius=${targetRadius.toFixed(2)}`);
                     resolve();
                 }
             };
             this.cameraAnimId = requestAnimationFrame(tick);
         });
     }
-    getCameraLookAtPoint() {
-        const dir = new THREE.Vector3();
-        this.camera.getWorldDirection(dir);
-        return this.camera.position.clone().add(dir.multiplyScalar(10));
-    }
+    /**
+     * Cancel all running animations
+     */
     cancelAnimations() {
-        if (this.animId) {
+        if (this.animId !== null) {
             cancelAnimationFrame(this.animId);
             this.animId = null;
         }
-        if (this.cameraAnimId) {
+        if (this.cameraAnimId !== null) {
             cancelAnimationFrame(this.cameraAnimId);
             this.cameraAnimId = null;
         }
     }
+    /**
+     * Dispose: remove listener, cancel animation, clear references
+     */
     dispose() {
-        return __awaiter(this, arguments, void 0, function* (restoreBefore = true) {
-            this.cancelAnimations();
-            if (restoreBefore && this.isExploded) {
-                try {
-                    yield this.restore(200);
-                }
-                catch (_a) { }
-            }
-            // force restore of materials
-            for (const [mat, ctxs] of Array.from(this.materialContexts.entries())) {
-                const snap = this.materialSnaps.get(mat);
-                if (snap) {
-                    mat.transparent = snap.transparent;
-                    mat.opacity = snap.opacity;
-                    if (typeof snap.depthWrite !== 'undefined')
-                        mat.depthWrite = snap.depthWrite;
-                    mat.needsUpdate = true;
-                }
-                this.materialContexts.delete(mat);
-                this.materialSnaps.delete(mat);
-            }
-            this.contextMaterials.clear();
-            this.stateMap.clear();
-            this.prevStateMap.clear();
-            this.currentSet = null;
-            this.prevSet = null;
-            this.isInitialized = false;
-            this.isExploded = false;
-            this.log('dispose: cleaned up');
-        });
+        this.cancelAnimations();
+        this.currentSet = null;
+        this.prevSet = null;
+        this.stateMap.clear();
+        this.prevStateMap.clear();
+        this.materialContexts.clear();
+        this.materialSnaps.clear();
+        this.contextMaterials.clear();
+        this.log('dispose() called, resources cleaned up');
     }
 }