@joshtol/emotive-engine 3.2.2 → 3.2.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@joshtol/emotive-engine",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Open-source animation engine for AI-controlled emotional visualizations with musical time synchronization",
   "main": "dist/emotive-mascot.umd.js",
   "module": "dist/mascot.js",

package/src/3d/Core3DManager.js

@@ -33,12 +33,14 @@ import { Particle3DTranslator } from './particles/Particle3DTranslator.js';
 import { CrystalSoul } from './effects/CrystalSoul.js';
 import { Particle3DRenderer } from './particles/Particle3DRenderer.js';
 import { Particle3DOrchestrator } from './particles/Particle3DOrchestrator.js';
-import { SolarEclipse } from './effects/SolarEclipse.js';
-import { LunarEclipse } from './effects/LunarEclipse.js';
 import { updateMoonGlow, MOON_CALIBRATION_ROTATION, MOON_FACING_CONFIG } from './geometries/Moon.js';
 import { createCustomMaterial, disposeCustomMaterial } from './utils/MaterialFactory.js';
 import { resetGeometryState } from './GeometryStateManager.js';
 import * as GeometryCache from './utils/GeometryCache.js';
+import { AnimationManager } from './managers/AnimationManager.js';
+import { EffectManager } from './managers/EffectManager.js';
+import { BehaviorController } from './managers/BehaviorController.js';
+import { BreathingPhaseManager } from './managers/BreathingPhaseManager.js';
 
 // Crystal calibration rotation to show flat facet facing camera
 // Hexagonal crystal has vertices at 0°, 60°, 120°, etc.
@@ -200,21 +202,30 @@ export class Core3DManager {
         // Animation controller
         this.animator = new ProceduralAnimator();
 
+        // Gesture blender
+        this.gestureBlender = new GestureBlender();
+
+        // Animation manager (orchestrates gesture playback and blending)
+        this.animationManager = new AnimationManager(this.animator, this.gestureBlender);
+
+        // Effect manager (manages SolarEclipse, LunarEclipse, CrystalSoul effects)
+        this.effectManager = new EffectManager(this.renderer, this.assetBasePath);
+
+        // Behavior controller (manages rotation, righting, and facing behaviors)
+        this.behaviorController = new BehaviorController({
+            rotationDisabled: options.autoRotate === false,
+            wobbleEnabled: true
+        });
+
+        // Breathing phase manager (imperative meditation-style breathing control)
+        this.breathingPhaseManager = new BreathingPhaseManager();
+
         // Breathing animator
         this.breathingAnimator = new BreathingAnimator();
         this.breathingEnabled = options.enableBreathing !== false; // Enabled by default
 
-        // Imperative breathing phase animation (for meditation)
-        // Allows explicit control: breathePhase('inhale', 4) to animate scale over 4 seconds
-        this._breathPhase = null;        // 'inhale' | 'hold' | 'exhale' | null
-        this._breathPhaseStartTime = 0;
-        this._breathPhaseDuration = 0;
-        this._breathPhaseStartScale = 1.0;
-        this._breathPhaseTargetScale = 1.0;
-        this._breathPhaseScale = 1.0;     // Current animated scale (1.0 = normal)
-
-        // Gesture blender
-        this.gestureBlender = new GestureBlender();
+        // Note: Imperative breathing phase animation state is now managed by BreathingPhaseManager
+        // See: breathePhase(), stopBreathingPhase(), _updateBreathingPhase()
 
         // Geometry morpher for smooth shape transitions
         this.geometryMorpher = new GeometryMorpher();
@@ -346,20 +357,15 @@ export class Core3DManager {
             particleRenderer.geometry.setDrawRange(0, 0);
         }
 
-        // Initialize solar eclipse system for sun geometry
-        if (this.geometryType === 'sun') {
-            const sunRadius = this.geometry.parameters?.radius || 0.5; // Sun geometry radius is 0.5
-            this.solarEclipse = new SolarEclipse(this.renderer.scene, sunRadius, this.coreMesh);
-        }
-
-        // Initialize lunar eclipse system for moon geometry
-        if (this.geometryType === 'moon' && this.customMaterial) {
-            this.lunarEclipse = new LunarEclipse(this.customMaterial);
-        }
+        // Initialize geometry-specific effects via EffectManager
+        const sunRadius = this.geometry?.parameters?.radius || 0.5;
+        this.effectManager.initializeForGeometry(this.geometryType, {
+            coreMesh: this.coreMesh,
+            customMaterial: this.customMaterial,
+            sunRadius
+        });
 
-        // Virtual particle object pool for gesture animations (prevent closure memory leaks)
-        this.virtualParticlePool = this.createVirtualParticlePool(5); // Pool of 5 reusable particles
-        this.nextPoolIndex = 0;
+        // Note: Virtual particle pool is now managed by AnimationManager
 
         // Apply default glass mode for initial geometry (if specified)
         // Crystal and diamond geometries have defaultGlassMode: true
@@ -372,50 +378,8 @@ export class Core3DManager {
         this.setEmotion(this.emotion);
     }
 
-    /**
-     * Create reusable virtual particle object pool
-     * @param {number} size - Pool size
-     * @returns {Array} Array of reusable particle objects
-     */
-    createVirtualParticlePool(size) {
-        const pool = [];
-        for (let i = 0; i < size; i++) {
-            pool.push({
-                x: 0,
-                y: 0,
-                vx: 0,
-                vy: 0,
-                size: 1,
-                baseSize: 1,
-                opacity: 1,
-                scaleFactor: 1,
-                gestureData: null
-            });
-        }
-        return pool;
-    }
-
-    /**
-     * Get next virtual particle from pool (round-robin)
-     * @returns {Object} Reusable virtual particle object
-     */
-    getVirtualParticleFromPool() {
-        const particle = this.virtualParticlePool[this.nextPoolIndex];
-        this.nextPoolIndex = (this.nextPoolIndex + 1) % this.virtualParticlePool.length;
-
-        // Reset particle to default state
-        particle.x = 0;
-        particle.y = 0;
-        particle.vx = 0;
-        particle.vy = 0;
-        particle.size = 1;
-        particle.baseSize = 1;
-        particle.opacity = 1;
-        particle.scaleFactor = 1;
-        particle.gestureData = null;
-
-        return particle;
-    }
+    // Note: createVirtualParticlePool and getVirtualParticleFromPool
+    // have been moved to AnimationManager
 
     /**
      * Set emotional state
@@ -671,115 +635,29 @@ export class Core3DManager {
 
     /**
      * Play gesture animation using 2D gesture data translated to 3D
+     * Delegates to AnimationManager for gesture orchestration
      */
     playGesture(gestureName) {
-        // Get the 2D gesture definition
-        const gesture2D = getGesture(gestureName);
-
-        if (!gesture2D) {
-            console.warn(`Unknown gesture: ${gestureName}`);
-            return;
-        }
-
-        // Get reusable virtual particle from pool (prevent closure memory leaks)
-        const virtualParticle = this.getVirtualParticleFromPool();
-
-        // Get gesture config for duration
-        const config = gesture2D.config || {};
-        const duration = config.musicalDuration?.musical
-            ? (config.musicalDuration.beats || 2) * 500  // Assume 120 BPM (500ms per beat)
-            : (config.duration || 800);
-
-        // Start time-based animation
-        const startTime = this.animator.time;
-
-        const gestureState = {
-            virtualParticle,
-            gesture: gesture2D,
-            duration,
-            startTime,
-            startPosition: [...this.position],
-            startRotation: [...this.rotation],
-            startScale: this.scale
-        };
-
-        // Enforce animation array size limit (prevent unbounded growth memory leak)
-        const MAX_ACTIVE_ANIMATIONS = 10;
-        if (this.animator.animations.length >= MAX_ACTIVE_ANIMATIONS) {
-            // Remove oldest animation (FIFO cleanup)
-            const removed = this.animator.animations.shift();
-            console.warn(`⚠️ Animation limit reached (${MAX_ACTIVE_ANIMATIONS}), removed oldest: ${removed.gestureName || 'unknown'}`);
-        }
-
-        // Add to animator's active animations
-        // Create persistent gesture data object for this gesture instance
-        const gestureData = { initialized: false };
-
-        this.animator.animations.push({
-            gestureName, // Store gesture name for particle system
-            duration,
-            startTime,
-            config, // Store config for particle system
-            evaluate: t => {
-                // Reset virtual particle to center each frame
-                virtualParticle.x = 0;
-                virtualParticle.y = 0;
-                virtualParticle.vx = 0;
-                virtualParticle.vy = 0;
-                virtualParticle.size = 1;
-                virtualParticle.opacity = 1;
-
-                // All gestures now have native 3D implementations
-                // Apply gesture to virtual particle if needed
-                if (gesture2D.apply) {
-                    gesture2D.apply(virtualParticle, gestureData, config, t, 1.0, 0, 0);
+        this.animationManager.playGesture(gestureName, {
+            onUpdate: (props, _progress) => {
+                if (props.position) this.position = props.position;
+                if (props.rotation) {
+                    // Convert gesture Euler rotation to quaternion
+                    this.tempEuler.set(props.rotation[0], props.rotation[1], props.rotation[2], 'XYZ');
+                    this.gestureQuaternion.setFromEuler(this.tempEuler);
                 }
-
-                // Call gesture's 3D evaluate function with particle data
-                const motion = {
-                    ...config,
-                    particle: virtualParticle,
-                    config,
-                    strength: config.strength || 1.0
-                };
-
-                // Safety check: if gesture doesn't have 3D implementation, return neutral transform
-                if (!gesture2D['3d'] || !gesture2D['3d'].evaluate) {
-                    return {
-                        position: [0, 0, 0],
-                        rotation: [0, 0, 0],
-                        scale: 1.0
-                    };
+                if (props.scale !== undefined) this.scale = this.baseScale * props.scale;
+                // Apply glow intensity as multiplier on base intensity (not absolute override)
+                if (props.glowIntensity !== undefined) {
+                    this.glowIntensity = this.baseGlowIntensity * props.glowIntensity;
                 }
-
-                // Call with gesture2D as context so 'this.config' works
-                return gesture2D['3d'].evaluate.call(gesture2D, t, motion);
             },
-            callbacks: {
-                onUpdate: (props, _progress) => {
-                    if (props.position) this.position = props.position;
-                    if (props.rotation) {
-                        // Convert gesture Euler rotation to quaternion
-                        this.tempEuler.set(props.rotation[0], props.rotation[1], props.rotation[2], 'XYZ');
-                        this.gestureQuaternion.setFromEuler(this.tempEuler);
-                    }
-                    if (props.scale !== undefined) this.scale = this.baseScale * props.scale;
-                    // Apply glow intensity as multiplier on base intensity (not absolute override)
-                    if (props.glowIntensity !== undefined) {
-                        this.glowIntensity = this.baseGlowIntensity * props.glowIntensity;
-                    }
-                },
-                onComplete: () => {
-                    // Clean up gesture
-                    if (gesture2D.cleanup) {
-                        gesture2D.cleanup(virtualParticle);
-                    }
-                    // Reset to base state
-                    this.position = [0, 0, 0];
-                    // NOTE: Don't reset rotation - it's computed from quaternions in render()
-                    // gestureQuaternion will be reset to identity in render() when no gestures active
-                    this.scale = this.baseScale;
-                }
+            onComplete: () => {
+                // Reset to base state
+                this.position = [0, 0, 0];
+                // NOTE: Don't reset rotation - it's computed from quaternions in render()
+                // gestureQuaternion will be reset to identity in render() when no gestures active
+                this.scale = this.baseScale;
             }
         });
     }
@@ -789,13 +667,13 @@ export class Core3DManager {
      * @param {string} eclipseType - Eclipse type: 'off', 'annular', or 'total'
      */
     setSunShadow(eclipseType = 'off') {
-        if (this.geometryType !== 'sun' || !this.solarEclipse) {
+        if (this.geometryType !== 'sun' || !this.effectManager.hasSolarEclipse()) {
             console.warn('⚠️ Eclipse only available for sun geometry');
             return;
         }
 
-        // Set eclipse type on the solar eclipse manager
-        this.solarEclipse.setEclipseType(eclipseType);
+        // Set eclipse type via EffectManager
+        this.effectManager.setSolarEclipse(eclipseType);
     }
 
     /**
@@ -808,8 +686,8 @@ export class Core3DManager {
         const eclipseType = options.type || 'total';
 
         // If already on sun, just trigger eclipse
-        if (this.geometryType === 'sun' && this.solarEclipse) {
-            this.solarEclipse.setEclipseType(eclipseType);
+        if (this.geometryType === 'sun' && this.effectManager.hasSolarEclipse()) {
+            this.effectManager.setSolarEclipse(eclipseType);
             return;
         }
 
@@ -819,8 +697,8 @@ export class Core3DManager {
         // Wait for morph to complete (shrink + grow phases)
         // Default morph duration is 500ms, so wait a bit longer
         setTimeout(() => {
-            if (this.solarEclipse) {
-                this.solarEclipse.setEclipseType(eclipseType);
+            if (this.effectManager.hasSolarEclipse()) {
+                this.effectManager.setSolarEclipse(eclipseType);
             }
         }, 600);
     }
@@ -835,8 +713,8 @@ export class Core3DManager {
         const eclipseType = options.type || 'total';
 
         // If already on moon, just trigger eclipse
-        if (this.geometryType === 'moon' && this.lunarEclipse) {
-            this.lunarEclipse.setEclipseType(eclipseType);
+        if (this.geometryType === 'moon' && this.effectManager.hasLunarEclipse()) {
+            this.effectManager.setLunarEclipse(eclipseType);
             return;
         }
 
@@ -845,8 +723,8 @@ export class Core3DManager {
 
         // Wait for morph to complete (shrink + grow phases)
         setTimeout(() => {
-            if (this.lunarEclipse) {
-                this.lunarEclipse.setEclipseType(eclipseType);
+            if (this.effectManager.hasLunarEclipse()) {
+                this.effectManager.setLunarEclipse(eclipseType);
             }
         }, 600);
     }
@@ -855,12 +733,7 @@ export class Core3DManager {
      * Stop any active eclipse animation
      */
     stopEclipse() {
-        if (this.solarEclipse) {
-            this.solarEclipse.setEclipseType('off');
-        }
-        if (this.lunarEclipse) {
-            this.lunarEclipse.setEclipseType('off');
-        }
+        this.effectManager.stopAllEclipses();
     }
 
     /**
@@ -868,13 +741,13 @@ export class Core3DManager {
      * @param {string} eclipseType - 'off', 'penumbral', 'partial', 'total'
      */
     setMoonEclipse(eclipseType = 'off') {
-        if (this.geometryType !== 'moon' || !this.lunarEclipse) {
+        if (this.geometryType !== 'moon' || !this.effectManager.hasLunarEclipse()) {
             console.warn('⚠️ Lunar eclipse only available for moon geometry');
             return;
         }
 
-        // Set eclipse type on the lunar eclipse manager
-        this.lunarEclipse.setEclipseType(eclipseType);
+        // Set eclipse type via EffectManager
+        this.effectManager.setLunarEclipse(eclipseType);
     }
 
     /**
@@ -1273,41 +1146,17 @@ export class Core3DManager {
      * @param {number} durationSec - Duration in seconds for the animation
      */
     breathePhase(phase, durationSec) {
-        // Clamp duration to reasonable values (0.5s to 30s)
-        const duration = Math.max(0.5, Math.min(30, durationSec));
-
-        // Store current scale as starting point
-        this._breathPhaseStartScale = this._breathPhaseScale;
-        this._breathPhaseStartTime = performance.now();
-        this._breathPhaseDuration = duration * 1000; // Convert to ms
-        this._breathPhase = phase;
-
-        // Set target scale based on phase
-        switch (phase) {
-        case 'inhale':
-            this._breathPhaseTargetScale = 1.3; // Max inhale size
-            break;
-        case 'exhale':
-            this._breathPhaseTargetScale = 0.85; // Min exhale size
-            break;
-        case 'hold':
-        default:
-            // Hold at current scale - no animation needed
-            this._breathPhaseTargetScale = this._breathPhaseStartScale;
-            break;
-        }
-
-        console.log(`[Core3D] breathePhase: ${phase} for ${duration}s (${this._breathPhaseStartScale.toFixed(2)} → ${this._breathPhaseTargetScale.toFixed(2)})`);
+        // Delegate to BreathingPhaseManager
+        this.breathingPhaseManager.startPhase(phase, durationSec);
+        const state = this.breathingPhaseManager.getState();
+        console.log(`[Core3D] breathePhase: ${phase} for ${durationSec}s (${state.startScale.toFixed(2)} → ${state.targetScale.toFixed(2)})`);
     }
 
     /**
      * Stop any active breathing phase animation and reset to neutral scale
      */
     stopBreathingPhase() {
-        this._breathPhase = null;
-        this._breathPhaseScale = 1.0;
-        this._breathPhaseStartScale = 1.0;
-        this._breathPhaseTargetScale = 1.0;
+        this.breathingPhaseManager.stop();
         console.log('[Core3D] breathePhase stopped, scale reset to 1.0');
     }
 
@@ -1315,38 +1164,12 @@ export class Core3DManager {
      * Update imperative breathing phase animation
      * Called from render loop
      * @private
-     * @param {number} _deltaTime - Time since last frame in ms (unused, we use elapsed time)
+     * @param {number} deltaTime - Time since last frame in ms
      * @returns {number} Current breathing phase scale multiplier (1.0 if inactive)
      */
-    _updateBreathingPhase(_deltaTime) {
-        // If no active phase, return neutral scale
-        if (!this._breathPhase) {
-            return this._breathPhaseScale;
-        }
-
-        const now = performance.now();
-        const elapsed = now - this._breathPhaseStartTime;
-        const duration = this._breathPhaseDuration;
-
-        // Calculate progress (0 to 1)
-        const progress = Math.min(1.0, elapsed / duration);
-
-        // Use sine easing for natural breathing rhythm
-        // sin(0 to π/2) maps 0→1 smoothly, reaches target exactly at end
-        // This feels more like natural breathing than cubic easing
-        const eased = Math.sin(progress * Math.PI / 2);
-
-        // Interpolate between start and target scale
-        this._breathPhaseScale = this._breathPhaseStartScale +
-            (this._breathPhaseTargetScale - this._breathPhaseStartScale) * eased;
-
-        // Clear phase when complete
-        if (progress >= 1.0) {
-            this._breathPhaseScale = this._breathPhaseTargetScale;
-            this._breathPhase = null;
-        }
-
-        return this._breathPhaseScale;
+    _updateBreathingPhase(deltaTime) {
+        // Delegate to BreathingPhaseManager
+        return this.breathingPhaseManager.update(deltaTime);
     }
 
     /**
@@ -1553,36 +1376,16 @@ export class Core3DManager {
             // Reset Euler angles to upright [pitch=0, yaw=0, roll=0]
             this.rotation = [0, 0, 0];
 
-            // Dispose or create solar eclipse for sun geometry
-            if (this._targetGeometryType === 'sun') {
-                // Create solar eclipse if morphing to sun
-                if (!this.solarEclipse) {
-                    const sunRadius = this.geometry.parameters?.radius || 0.5; // Sun geometry radius is 0.5
-                    this.solarEclipse = new SolarEclipse(this.renderer.scene, sunRadius, this.renderer.coreMesh);
-                }
-            } else {
-                // Dispose solar eclipse if morphing away from sun
-                if (this.solarEclipse) {
-                    this.solarEclipse.dispose();
-                    this.solarEclipse = null;
-                }
-            }
-
-            // Dispose or create lunar eclipse for moon geometry
-            if (this._targetGeometryType === 'moon') {
-                // Create lunar eclipse if morphing to moon and custom material exists
-                if (!this.lunarEclipse && this.customMaterial) {
-                    this.lunarEclipse = new LunarEclipse(this.customMaterial);
-                }
-            } else {
-                // Dispose lunar eclipse if morphing away from moon
-                if (this.lunarEclipse) {
-                    this.lunarEclipse.dispose();
-                    this.lunarEclipse = null;
-                }
-            }
+            // Initialize effects for target geometry via EffectManager
+            // This automatically disposes effects not needed for the target geometry
+            const sunRadius = this.geometry.parameters?.radius || 0.5;
+            this.effectManager.initializeForGeometry(this._targetGeometryType, {
+                coreMesh: this.renderer.coreMesh,
+                customMaterial: this.customMaterial,
+                sunRadius
+            });
 
-            // Create or dispose crystal inner core
+            // Create or dispose crystal inner core (still uses createCrystalInnerCore for now)
             if (this._targetGeometryType === 'crystal' || this._targetGeometryType === 'rough' || this._targetGeometryType === 'heart' || this._targetGeometryType === 'star') {
                 // Create inner core if morphing to crystal/rough/heart/star
                 if (this.customMaterialType === 'crystal') {
@@ -1770,9 +1573,7 @@ export class Core3DManager {
         // ═══════════════════════════════════════════════════════════════════════════
         // GESTURE BLENDING SYSTEM - Blend multiple simultaneous gestures
         // ═══════════════════════════════════════════════════════════════════════════
-        const blended = this.gestureBlender.blend(
-            this.animator.animations,
-            this.animator.time,
+        const blended = this.animationManager.blend(
             this.baseQuaternion,
             this.baseScale,
             this.baseGlowIntensity
@@ -1786,7 +1587,7 @@ export class Core3DManager {
 
         // Apply blended results with rhythm modulation
         // Position: add groove offset when no active gestures
-        const hasActiveGestures = this.animator.animations.length > 0;
+        const hasActiveGestures = this.animationManager.hasActiveAnimations();
         if (rhythmMod && !hasActiveGestures) {
             // Apply ambient groove when idle
             this.position = [
@@ -1872,8 +1673,8 @@ export class Core3DManager {
                 deltaTime,
                 this.emotion,
                 this.undertone,
-                this.animator.animations, // Active gestures
-                this.animator.time,       // Current animation time
+                this.animationManager.getActiveAnimations(), // Active gestures
+                this.animationManager.getTime(),             // Current animation time
                 { x: this.position[0], y: this.position[1], z: this.position[2] }, // Core position
                 { width: this.canvas.width, height: this.canvas.height }, // Canvas size
                 // Rotation state for orbital physics
@@ -1974,17 +1775,15 @@ export class Core3DManager {
             glowColor: this.glowColor,
             glowColorHex: this.glowColorHex,  // For bloom luminance normalization
             glowIntensity: effectiveGlowIntensity,
-            hasActiveGesture: this.animator.animations.length > 0,  // Faster lerp during gestures
+            hasActiveGesture: this.animationManager.hasActiveAnimations(),  // Faster lerp during gestures
             calibrationRotation: this.calibrationRotation,  // Applied on top of animated rotation
-            solarEclipse: this.solarEclipse,  // Pass eclipse manager for synchronized updates
+            solarEclipse: this.effectManager.getSolarEclipse(),  // Pass eclipse manager for synchronized updates
             deltaTime,  // Pass deltaTime for eclipse animation
             morphProgress: morphState.isTransitioning ? morphState.visualProgress : null  // For corona fade-in
         });
 
         // Update lunar eclipse animation (Blood Moon)
-        if (this.lunarEclipse) {
-            this.lunarEclipse.update(deltaTime);
-        }
+        this.effectManager.updateLunarEclipse(deltaTime);
     }
 
     /**
@@ -2230,17 +2029,23 @@ export class Core3DManager {
             this.particleOrchestrator = null;
         }
 
-        // Clean up solar eclipse system (remove from scene before disposing)
-        if (this.solarEclipse) {
-            // Eclipse cleanup will remove all meshes from scene internally
-            this.solarEclipse.dispose();
-            this.solarEclipse = null;
+        // Clean up effect manager (handles eclipse and crystal soul disposal)
+        // Note: EffectManager.dispose() removes eclipse meshes from scene internally
+        if (this.effectManager) {
+            this.effectManager.dispose();
+            this.effectManager = null;
         }
 
-        // Clean up lunar eclipse system
-        if (this.lunarEclipse) {
-            this.lunarEclipse.dispose();
-            this.lunarEclipse = null;
+        // Clean up behavior controller
+        if (this.behaviorController) {
+            this.behaviorController.dispose();
+            this.behaviorController = null;
+        }
+
+        // Clean up breathing phase manager
+        if (this.breathingPhaseManager) {
+            this.breathingPhaseManager.dispose();
+            this.breathingPhaseManager = null;
         }
 
         // Dispose custom material textures if they exist
@@ -2257,16 +2062,14 @@ export class Core3DManager {
         }
 
         // Stop animations before destroying renderer
-        this.animator.stopAll();
+        this.animationManager.stopAll();
 
         // Destroy renderer LAST (after all scene children are cleaned up)
         this.renderer.destroy();
 
-        // Clean up virtual particle pool
-        if (this.virtualParticlePool) {
-            this.virtualParticlePool.length = 0;
-            this.virtualParticlePool = null;
-        }
+        // Clean up animation manager (includes virtual particle pool)
+        this.animationManager.dispose();
+        this.animationManager = null;
 
         // Clean up animator sub-components
         this.animator.destroy?.();