mage-engine 3.24.3 → 3.24.4

package/dist/mage.js

@@ -58250,7 +58250,7 @@ function applyMiddleware() {
 
 var thunk = createThunkMiddleware();
 thunk.withExtraArgument = createThunkMiddleware;var name = "mage-engine";
-var version$1 = "3.24.3";
+var version$1 = "3.24.4";
 var description = "A WebGL Javascript Game Engine, built on top of THREE.js and many other libraries.";
 var main = "dist/mage.js";
 var author$1 = {
@@ -60666,7 +60666,6 @@ const extractMaterialProperty = (elementBody, property) => {
     return found;
   }
 };
-const serialiseMaterial = material => omit(UNDESIRED_SERIALISED_MATERIAL_PROPERTIES, material === null || material === void 0 ? void 0 : material.toJSON());
 const processMaterial = (material, callback) => Array.isArray(material) ? material.map(callback) : callback(material);
 const replaceMaterialByName = (name, mesh, materialOptions) => {
   if (!hasMaterial(mesh)) return;
@@ -60906,7 +60905,16 @@ const tweenTo = function (origin, target) {
       const qz = Number(z) || 0;
       const qw = Number(w) || 1;
 
-      _this.getBody().quaternion.set(qx, qy, qz, qw);
+      _this.getBody().quaternion.set(qx, qy, qz, qw); // Update matrix world and skeleton for skinned meshes
+
+
+      _this.getBody().updateMatrixWorld(true);
+
+      _this.getBody().traverse(child => {
+        if (child.isSkinnedMesh && child.skeleton) {
+          child.skeleton.update();
+        }
+      });
     });
 
     _defineProperty$1(_assertThisInitialized(_this), "setUuid", uuid => {
@@ -61525,7 +61533,9 @@ const tweenTo = function (origin, target) {
         const sx = Number(scale.x) || 1;
         const sy = Number(scale.y) || 1;
         const sz = Number(scale.z) || 1;
-        this.body.scale.set(sx, sy, sz);
+        this.body.scale.set(sx, sy, sz); // Update matrix world for all children including skinned meshes
+
+        this.getBody().updateMatrixWorld(true);
       }
     }
   }, {
@@ -61559,7 +61569,17 @@ const tweenTo = function (origin, target) {
         const px = Number(position.x) || 0;
         const py = Number(position.y) || 0;
         const pz = Number(position.z) || 0;
-        this.getBody().position.set(px, py, pz);
+        this.getBody().position.set(px, py, pz); // Update matrix world to ensure skinned mesh skeletons follow the parent transform
+
+        this.getBody().updateMatrixWorld(true); // For skinned meshes, we need to rebind the skeleton after position change
+        // The bindMatrix captures where the mesh was when bound, so we need to update it
+
+        this.getBody().traverse(child => {
+          if (child.isSkinnedMesh && child.skeleton) {
+            // Rebind with current matrix to update the bind pose
+            child.bind(child.skeleton, child.matrixWorld);
+          }
+        });
       }
     }
   }, {
@@ -61586,7 +61606,9 @@ const tweenTo = function (origin, target) {
         const rx = Number(rotation.x) || 0;
         const ry = Number(rotation.y) || 0;
         const rz = Number(rotation.z) || 0;
-        this.getBody().rotation.set(rx, ry, rz);
+        this.getBody().rotation.set(rx, ry, rz); // Update matrix world for all children including skinned meshes
+
+        this.getBody().updateMatrixWorld(true);
       }
     }
   }, {
@@ -61609,7 +61631,14 @@ const tweenTo = function (origin, target) {
         quaternion
       } = worldTransform;
       this.getBody().setWorldPosition(position);
-      this.getBody().setWorldQuaternion(quaternion);
+      this.getBody().setWorldQuaternion(quaternion); // Update matrix world and skeleton for skinned meshes
+
+      this.getBody().updateMatrixWorld(true);
+      this.getBody().traverse(child => {
+        if (child.isSkinnedMesh && child.skeleton) {
+          child.skeleton.update();
+        }
+      });
     }
   }, {
     key: "translate",
@@ -61623,7 +61652,9 @@ const tweenTo = function (origin, target) {
       if (this.hasBody()) {
         this.body.translateX(x);
         this.body.translateY(y);
-        this.body.translateZ(z);
+        this.body.translateZ(z); // Update matrix world for all children including skinned meshes
+
+        this.getBody().updateMatrixWorld(true);
       }
     }
   }, {
@@ -61850,7 +61881,9 @@ const tweenTo = function (origin, target) {
   }]);
 
   return Entity;
-}(EventDispatcher);let AnimationHandler = /*#__PURE__*/function (_EventDispatcher) {
+}(EventDispatcher);const DEFAULT_BLEND_DURATION = 0.3;
+
+let AnimationHandler = /*#__PURE__*/function (_EventDispatcher) {
   _inherits(AnimationHandler, _EventDispatcher);
 
   var _super = _createSuper(AnimationHandler);
@@ -61880,6 +61913,8 @@ const tweenTo = function (origin, target) {
     _this.mixer = new AnimationMixer(mesh);
     _this.animations = animations;
     _this.isPlaying = false;
+    _this.currentAction = null;
+    _this.activeActions = new Map(); // Track multiple active actions for layered blending
 
     _this.addEventsListeners();
 
@@ -61930,39 +61965,260 @@ const tweenTo = function (origin, target) {
 
       this.isPlaying = false;
     }
+    /**
+     * Stop a specific animation by name/index with optional fade out
+     * @param {string|number} id - Animation name or index
+     * @param {number} fadeOutDuration - Duration to fade out (0 for immediate stop)
+     */
+
+  }, {
+    key: "stopAnimation",
+    value: function stopAnimation(id) {
+      let fadeOutDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      const clip = this.getAction(id);
+      if (!clip) return;
+      const action = this.mixer.clipAction(clip);
+
+      if (fadeOutDuration > 0) {
+        action.fadeOut(fadeOutDuration);
+      } else {
+        action.stop();
+      }
+
+      this.activeActions.delete(id);
+
+      if (this.currentAction === action) {
+        this.currentAction = null;
+        this.isPlaying = false;
+      }
+    }
+    /**
+     * Play an animation with optional blending from current animation
+     * @param {string|number} id - Animation name or index
+     * @param {Object} options - Playback options
+     * @param {number} options.loop - Loop mode (LoopRepeat, LoopOnce, etc.)
+     * @param {number} options.blendDuration - Duration to blend from previous animation
+     * @param {number} options.timeScale - Playback speed (1 = normal, 2 = double speed)
+     * @param {number} options.weight - Animation weight for layered blending (0-1)
+     * @param {boolean} options.clampWhenFinished - Keep last frame when finished (for LoopOnce)
+     */
+
   }, {
     key: "playAnimation",
-    value: function playAnimation(id, options) {
-      const action = this.getAction(id);
+    value: function playAnimation(id) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const clip = this.getAction(id);
+
+      if (!clip) {
+        console.warn(ANIMATION_NOT_FOUND);
+        return null;
+      }
+
       const {
-        loop = LoopRepeat
+        loop = LoopRepeat,
+        blendDuration = DEFAULT_BLEND_DURATION,
+        timeScale = 1,
+        weight = 1,
+        clampWhenFinished = true
       } = options;
       this.isPlaying = true;
 
       if (this.currentAction) {
-        this.fadeToAnimation(action, options);
-      } else if (action) {
-        this.currentAction = this.mixer.clipAction(action).setLoop(loop).play();
+        return this.crossFadeTo(id, { ...options,
+          blendDuration
+        });
       } else {
+        const action = this.mixer.clipAction(clip);
+        this.currentAction = action;
+        this.activeActions.set(id, action);
+        action.reset().setLoop(loop).setEffectiveTimeScale(timeScale).setEffectiveWeight(weight);
+
+        if (loop === LoopOnce) {
+          action.clampWhenFinished = clampWhenFinished;
+        }
+
+        action.play();
+        return action;
+      }
+    }
+    /**
+     * Crossfade from current animation to a new animation
+     * @param {string|number} id - Target animation name or index
+     * @param {Object} options - Blend options
+     * @param {number} options.blendDuration - Duration of the crossfade
+     * @param {number} options.loop - Loop mode for the new animation
+     * @param {number} options.timeScale - Playback speed
+     * @param {boolean} options.warp - Whether to warp time scales during blend
+     */
+
+  }, {
+    key: "crossFadeTo",
+    value: function crossFadeTo(id) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const clip = this.getAction(id);
+
+      if (!clip) {
         console.warn(ANIMATION_NOT_FOUND);
+        return null;
+      }
+
+      const {
+        blendDuration = DEFAULT_BLEND_DURATION,
+        loop = LoopRepeat,
+        timeScale = 1,
+        warp = false,
+        clampWhenFinished = true
+      } = options;
+      const previousAction = this.currentAction;
+      const newAction = this.mixer.clipAction(clip);
+
+      if (previousAction === newAction) {
+        return newAction; // Already playing this animation
+      }
+
+      this.currentAction = newAction;
+      this.activeActions.set(id, newAction);
+      newAction.reset().setLoop(loop).setEffectiveTimeScale(timeScale).setEffectiveWeight(1);
+
+      if (loop === LoopOnce) {
+        newAction.clampWhenFinished = clampWhenFinished;
+      }
+
+      newAction.play();
+
+      if (previousAction) {
+        if (warp) {
+          // Synchronize time scales during crossfade
+          previousAction.crossFadeTo(newAction, blendDuration, true);
+        } else {
+          // Standard crossfade
+          previousAction.fadeOut(blendDuration);
+          newAction.fadeIn(blendDuration);
+        }
       }
+
+      return newAction;
     }
+    /**
+     * Legacy method - kept for backwards compatibility
+     */
+
   }, {
     key: "fadeToAnimation",
     value: function fadeToAnimation(action) {
       let {
-        duration = 0.2,
+        duration = DEFAULT_BLEND_DURATION,
         loop = LoopRepeat
       } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       const previousAction = this.currentAction;
       this.currentAction = this.mixer.clipAction(action);
 
-      if (previousAction !== this.currentAction) {
+      if (previousAction && previousAction !== this.currentAction) {
         previousAction.fadeOut(duration);
       }
 
       this.currentAction.reset().setEffectiveTimeScale(1).setEffectiveWeight(1).fadeIn(duration).setLoop(loop).play();
     }
+    /**
+     * Set the weight of an animation for layered blending
+     * @param {string|number} id - Animation name or index
+     * @param {number} weight - Weight value (0-1)
+     * @param {number} fadeDuration - Optional fade duration to reach target weight
+     */
+
+  }, {
+    key: "setAnimationWeight",
+    value: function setAnimationWeight(id, weight) {
+      let fadeDuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      const clip = this.getAction(id);
+      if (!clip) return;
+      const action = this.mixer.clipAction(clip);
+
+      if (fadeDuration > 0) {
+        // Gradually change weight
+        const startWeight = action.getEffectiveWeight();
+        const startTime = this.mixer.time;
+
+        const updateWeight = () => {
+          const elapsed = this.mixer.time - startTime;
+          const t = Math.min(elapsed / fadeDuration, 1);
+          action.setEffectiveWeight(startWeight + (weight - startWeight) * t);
+        }; // This will be called in the update loop
+
+
+        action._weightUpdateFn = updateWeight;
+      } else {
+        action.setEffectiveWeight(weight);
+      }
+    }
+    /**
+     * Set the time scale (speed) of an animation
+     * @param {string|number} id - Animation name or index
+     * @param {number} timeScale - Speed multiplier (1 = normal)
+     */
+
+  }, {
+    key: "setAnimationTimeScale",
+    value: function setAnimationTimeScale(id, timeScale) {
+      const clip = this.getAction(id);
+      if (!clip) return;
+      const action = this.mixer.clipAction(clip);
+      action.setEffectiveTimeScale(timeScale);
+    }
+    /**
+     * Get the current time of an animation
+     * @param {string|number} id - Animation name or index
+     * @returns {number} Current time in seconds
+     */
+
+  }, {
+    key: "getAnimationTime",
+    value: function getAnimationTime(id) {
+      const clip = this.getAction(id);
+      if (!clip) return 0;
+      const action = this.mixer.clipAction(clip);
+      return action.time;
+    }
+    /**
+     * Set the current time of an animation
+     * @param {string|number} id - Animation name or index
+     * @param {number} time - Time in seconds
+     */
+
+  }, {
+    key: "setAnimationTime",
+    value: function setAnimationTime(id, time) {
+      const clip = this.getAction(id);
+      if (!clip) return;
+      const action = this.mixer.clipAction(clip);
+      action.time = time;
+    }
+    /**
+     * Check if a specific animation is currently playing
+     * @param {string|number} id - Animation name or index
+     * @returns {boolean}
+     */
+
+  }, {
+    key: "isAnimationPlaying",
+    value: function isAnimationPlaying(id) {
+      const clip = this.getAction(id);
+      if (!clip) return false;
+      const action = this.mixer.clipAction(clip);
+      return action.isRunning();
+    }
+    /**
+     * Get the duration of an animation clip
+     * @param {string|number} id - Animation name or index
+     * @returns {number} Duration in seconds
+     */
+
+  }, {
+    key: "getAnimationDuration",
+    value: function getAnimationDuration(id) {
+      const clip = this.getAction(id);
+      return clip ? clip.duration : 0;
+    }
   }, {
     key: "update",
     value: function update(dt) {
@@ -62407,8 +62663,8 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
       }
     }
   }, {
-    key: "stopAnimation",
-    value: function stopAnimation() {
+    key: "stopCurrentAnimation",
+    value: function stopCurrentAnimation() {
       if (!this.hasAnimations()) return;
 
       if (this.hasAnimationHandler()) {
@@ -62430,6 +62686,123 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
 
       return [];
     }
+    /**
+     * Crossfade from current animation to a new animation
+     * @param {string|number} id - Target animation name or index
+     * @param {Object} options - Blend options
+     * @param {number} options.blendDuration - Duration of the crossfade (default: 0.3)
+     * @param {number} options.loop - Loop mode (LoopRepeat, LoopOnce)
+     * @param {number} options.timeScale - Playback speed (1 = normal)
+     * @param {boolean} options.warp - Whether to warp time scales during blend
+     */
+
+  }, {
+    key: "crossFadeTo",
+    value: function crossFadeTo(id) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (!this.hasAnimations()) return;
+
+      if (this.hasAnimationHandler()) {
+        return this.animationHandler.crossFadeTo(id, options);
+      } else {
+        console.warn(ANIMATION_HANDLER_NOT_FOUND);
+      }
+    }
+    /**
+     * Stop an animation. If no id is provided, stops the current animation.
+     * @param {string|number} [id] - Animation name or index (optional)
+     * @param {number} fadeOutDuration - Duration to fade out (0 for immediate)
+     */
+
+  }, {
+    key: "stopAnimation",
+    value: function stopAnimation(id) {
+      let fadeOutDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      if (!this.hasAnimations()) return;
+
+      if (this.hasAnimationHandler()) {
+        // If no id provided, stop the current animation
+        if (id === undefined || id === null) {
+          this.animationHandler.stopCurrentAnimation();
+        } else {
+          this.animationHandler.stopAnimation(id, fadeOutDuration);
+        }
+      } else {
+        console.warn(ANIMATION_HANDLER_NOT_FOUND);
+      }
+    }
+    /**
+     * Set the weight of an animation for layered blending
+     * @param {string|number} id - Animation name or index
+     * @param {number} weight - Weight value (0-1)
+     * @param {number} fadeDuration - Optional fade duration
+     */
+
+  }, {
+    key: "setAnimationWeight",
+    value: function setAnimationWeight(id, weight) {
+      let fadeDuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      if (!this.hasAnimations()) return;
+
+      if (this.hasAnimationHandler()) {
+        this.animationHandler.setAnimationWeight(id, weight, fadeDuration);
+      } else {
+        console.warn(ANIMATION_HANDLER_NOT_FOUND);
+      }
+    }
+    /**
+     * Set the playback speed of an animation
+     * @param {string|number} id - Animation name or index
+     * @param {number} timeScale - Speed multiplier (1 = normal, 2 = double speed)
+     */
+
+  }, {
+    key: "setAnimationTimeScale",
+    value: function setAnimationTimeScale(id, timeScale) {
+      if (!this.hasAnimations()) return;
+
+      if (this.hasAnimationHandler()) {
+        this.animationHandler.setAnimationTimeScale(id, timeScale);
+      } else {
+        console.warn(ANIMATION_HANDLER_NOT_FOUND);
+      }
+    }
+    /**
+     * Get the duration of an animation clip
+     * @param {string|number} id - Animation name or index
+     * @returns {number} Duration in seconds
+     */
+
+  }, {
+    key: "getAnimationDuration",
+    value: function getAnimationDuration(id) {
+      if (!this.hasAnimations()) return 0;
+
+      if (this.hasAnimationHandler()) {
+        return this.animationHandler.getAnimationDuration(id);
+      } else {
+        console.warn(ANIMATION_HANDLER_NOT_FOUND);
+        return 0;
+      }
+    }
+    /**
+     * Check if a specific animation is currently playing
+     * @param {string|number} id - Animation name or index
+     * @returns {boolean}
+     */
+
+  }, {
+    key: "isAnimationPlaying",
+    value: function isAnimationPlaying(id) {
+      if (!this.hasAnimations()) return false;
+
+      if (this.hasAnimationHandler()) {
+        return this.animationHandler.isAnimationPlaying(id);
+      } else {
+        console.warn(ANIMATION_HANDLER_NOT_FOUND);
+        return false;
+      }
+    }
     /**
      * TODO: the entire physics system needs to be a component
      * e.g.
@@ -63161,6 +63534,50 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
 
       Physics$1.disposeElement(this);
     }
+    /**
+     * Serialize only the material properties that the Importer actually uses.
+     * This avoids bloating the JSON with full Three.js material data.
+     */
+
+  }, {
+    key: "serializeMaterialProperties",
+    value: function serializeMaterialProperties() {
+      const materialType = this.getMaterialType(); // Use allowed properties for known material types, or fallback to STANDARD properties
+      // which has the most comprehensive set
+
+      const allowedProperties = MATERIAL_PROPERTIES_MAP[materialType] || MATERIAL_PROPERTIES_MAP[MATERIALS.STANDARD] || [];
+      const materials = this.getMaterials();
+      if (!materials.length) return [];
+      return materials.map(material => {
+        const serialized = {
+          // Always include the material type for the inspector
+          type: material.type
+        };
+
+        for (const prop of allowedProperties) {
+          if (material[prop] !== undefined) {
+            const value = material[prop]; // Serialize Color objects to plain objects
+
+            if (value && value.isColor) {
+              serialized[prop] = {
+                r: value.r,
+                g: value.g,
+                b: value.b
+              };
+            } else if (value && value.isVector2) {
+              serialized[prop] = {
+                x: value.x,
+                y: value.y
+              };
+            } else {
+              serialized[prop] = value;
+            }
+          }
+        }
+
+        return serialized;
+      });
+    }
   }, {
     key: "toJSON",
     value: function toJSON() {
@@ -63169,18 +63586,26 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
       if (this.isSerializable()) {
         const color = this.getColor();
         return { ..._get(_getPrototypeOf(Element.prototype), "toJSON", this).call(this, parseJSON),
+          // Physics options (state is not used by Importer, only options)
           physics: {
-            state: serializeMap(this.getPhysicsState()),
             options: this.getPhysicsOptions()
           },
-          // body: this.body.toJSON(),
+          // Textures with serialized map
           textures: serializeMap(this.textures),
+          // Material type name (e.g., "STANDARD", "BASIC")
           materialType: this.getMaterialType(),
-          materials: this.getMaterials().map(serialiseMaterial),
-          // no need to have geometry, for basic entities we can build from the type
-          // models have a reference to the model itself
+          // Lightweight material properties (type + allowed properties only)
+          materials: this.serializeMaterialProperties(),
+          // Opacity
           opacity: this.opacity,
-          color: parseJSON ? serializeColor(color) : color
+          // Color (for inspector display)
+          color: parseJSON ? {
+            r: color === null || color === void 0 ? void 0 : color.r,
+            g: color === null || color === void 0 ? void 0 : color.g,
+            b: color === null || color === void 0 ? void 0 : color.b
+          } : color,
+          // Animation names (for inspector display - actual animations loaded from model file)
+          animations: this.getAvailableAnimations()
         };
       }
     }
@@ -81237,6 +81662,10 @@ const glbParser = gltf => {
     if (object.isMesh) {
       object.castShadow = true;
     }
+
+    if (object.isSkinnedMesh) {
+      object.frustumCulled = false;
+    }
   });
   return {
     animations,
@@ -81256,6 +81685,11 @@ const gltfParser = gltf => {
     return null;
   }
 
+  gltf.scene.traverse(node => {
+    if (node.isSkinnedMesh) {
+      node.frustumCulled = false;
+    }
+  });
   return {
     scene: gltf.scene,
     animations: gltf.animations
@@ -81326,6 +81760,7 @@ const fbxParser = scene => {
 
   scene.traverse(node => {
     if (node.isSkinnedMesh) {
+      node.frustumCulled = false;
       processMaterial(node.material, material => material.skinning = true);
     }
   });
@@ -81383,6 +81818,8 @@ let Models = /*#__PURE__*/function (_EventDispatcher) {
     });
 
     _defineProperty$1(_assertThisInitialized(_this), "create", function (name) {
+      var _scene$children, _scene$traverse, _element$getBody;
+
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       const builtAssetId = buildAssetId(name, _this.currentLevel);
       const modelData = _this.map[name] || _this.map[builtAssetId];
@@ -81396,7 +81833,23 @@ let Models = /*#__PURE__*/function (_EventDispatcher) {
         scene,
         animations,
         extension
-      } = modelData; // Validate that scene is a valid THREE.js object with required methods
+      } = modelData; // Debug: Log model structure
+
+      console.log(`[Mage] Creating model "${name}":`, {
+        hasScene: !!scene,
+        sceneType: scene === null || scene === void 0 ? void 0 : scene.type,
+        childrenCount: scene === null || scene === void 0 ? void 0 : (_scene$children = scene.children) === null || _scene$children === void 0 ? void 0 : _scene$children.length,
+        animations: (animations === null || animations === void 0 ? void 0 : animations.length) || 0,
+        extension
+      }); // Debug: Check for meshes in the scene
+
+      let meshCount = 0;
+      let skinnedMeshCount = 0;
+      scene === null || scene === void 0 ? void 0 : (_scene$traverse = scene.traverse) === null || _scene$traverse === void 0 ? void 0 : _scene$traverse.call(scene, node => {
+        if (node.isMesh) meshCount++;
+        if (node.isSkinnedMesh) skinnedMeshCount++;
+      });
+      console.log(`[Mage] Model "${name}" contains: ${meshCount} meshes, ${skinnedMeshCount} skinned meshes`); // Validate that scene is a valid THREE.js object with required methods
 
       if (!scene || typeof scene.clone !== 'function' || typeof scene.traverse !== 'function') {
         console.warn(`[Mage] Model "${name}" has invalid scene object. Got:`, Object.keys(modelData));
@@ -81408,8 +81861,17 @@ let Models = /*#__PURE__*/function (_EventDispatcher) {
         builtAssetId,
         ...options
       };
-      let model;
-      const useSkeletonClone = extension !== EXTENSIONS.COLLADA && hasAnimations(animations);
+      let model; // Check if the scene contains any skinned meshes
+
+      let hasSkinnedMeshes = false;
+      scene.traverse(node => {
+        if (node.isSkinnedMesh) {
+          hasSkinnedMeshes = true;
+        }
+      }); // Use SkeletonUtils.clone for models with skinned meshes OR animations
+      // Regular clone() doesn't properly handle skeleton binding
+
+      const useSkeletonClone = extension !== EXTENSIONS.COLLADA && (hasAnimations(animations) || hasSkinnedMeshes);
 
       try {
         if (useSkeletonClone) {
@@ -81440,6 +81902,21 @@ let Models = /*#__PURE__*/function (_EventDispatcher) {
 
       if (hasAnimations(animations)) {
         element.addAnimationHandler(animations);
+      } // Debug: Log element body info
+
+
+      const body = (_element$getBody = element.getBody) === null || _element$getBody === void 0 ? void 0 : _element$getBody.call(element);
+
+      if (body) {
+        var _body$position, _body$position$toArra, _body$scale, _body$scale$toArray, _body$children;
+
+        console.log(`[Mage] Element "${name}" body:`, {
+          type: body.type,
+          visible: body.visible,
+          position: (_body$position = body.position) === null || _body$position === void 0 ? void 0 : (_body$position$toArra = _body$position.toArray) === null || _body$position$toArra === void 0 ? void 0 : _body$position$toArra.call(_body$position),
+          scale: (_body$scale = body.scale) === null || _body$scale === void 0 ? void 0 : (_body$scale$toArray = _body$scale.toArray) === null || _body$scale$toArray === void 0 ? void 0 : _body$scale$toArray.call(_body$scale),
+          childrenCount: (_body$children = body.children) === null || _body$children === void 0 ? void 0 : _body$children.length
+        });
       }
 
       return element;
@@ -90964,7 +91441,10 @@ var Particles$1 = new Particles();let Orbit = /*#__PURE__*/function (_EventDispa
           object.quaternion.copy(_this._tempQuaternion.setFromAxisAngle(_this.rotationAxis, _this.rotationAngle));
           object.quaternion.multiply(_this._quaternionStart);
         }
-      }
+      } // Update skinned mesh skeletons after transform
+
+
+      _this.updateSkinnedMeshSkeletons();
 
       _this.dispatchEvent(_this.changeEvent);
 
@@ -91247,7 +91727,19 @@ var Particles$1 = new Particles();let Orbit = /*#__PURE__*/function (_EventDispa
     value: function attach(element) {
       if (!element) return;
       this.object = element.getBody();
-      this.visible = true;
+      this.visible = true; // Force immediate matrix world update to ensure gizmo position is correct
+      // This is especially important for skinned meshes where the matrix may not be current
+
+      if (this.object) {
+        this.object.updateMatrixWorld(true);
+      }
+    } // Update matrix world for skinned meshes after transform changes
+
+  }, {
+    key: "updateSkinnedMeshSkeletons",
+    value: function updateSkinnedMeshSkeletons() {
+      if (!this.object) return;
+      this.object.updateMatrixWorld(true);
     }
   }, {
     key: "detach",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mage-engine",
-    "version": "3.24.3",
+    "version": "3.24.4",
     "description": "A WebGL Javascript Game Engine, built on top of THREE.js and many other libraries.",
     "main": "dist/mage.js",
     "author": {