mage-engine 3.23.36 → 3.23.38

package/dist/mage.js

@@ -56083,6 +56083,11 @@ const extractBoundingSphere = body => {
   return body.geometry.boundingSphere;
 };
 const extractBiggestBoundingSphere = body => {
+  if (!body || typeof body.traverse !== 'function') {
+    console.warn('[Mage] extractBiggestBoundingSphere received invalid body');
+    return null;
+  }
+
   const spheres = [];
   body.traverse(child => {
     if (child.geometry) {
@@ -58130,7 +58135,7 @@ function applyMiddleware() {
 
 var thunk = createThunkMiddleware();
 thunk.withExtraArgument = createThunkMiddleware;var name = "mage-engine";
-var version$1 = "3.23.36";
+var version$1 = "3.23.38";
 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 = {
@@ -60610,6 +60615,11 @@ const disposeGeometry = mesh => {
   }
 };
 const prepareModel = model => {
+  if (!model || typeof model.traverse !== 'function') {
+    console.warn('[Mage] prepareModel received invalid model object:', model);
+    return null; // Return null for invalid models
+  }
+
   setUpLightsAndShadows(model);
   model.traverse(mesh => {
     setUpLightsAndShadows(mesh);
@@ -60766,8 +60776,13 @@ const tweenTo = function (origin, target) {
         z,
         w
       } = _ref;
+      // Ensure values are numbers (not strings) to prevent rendering issues
+      const qx = Number(x) || 0;
+      const qy = Number(y) || 0;
+      const qz = Number(z) || 0;
+      const qw = Number(w) || 1;
 
-      _this.getBody().quaternion.set(x, y, z, w);
+      _this.getBody().quaternion.set(qx, qy, qz, qw);
     });
 
     _defineProperty$1(_assertThisInitialized(_this), "setUuid", uuid => {
@@ -61308,8 +61323,12 @@ const tweenTo = function (origin, target) {
       if (this.hasBody()) {
         const scale = { ...this.getScale(),
           ...howbig
-        };
-        this.body.scale.set(scale.x, scale.y, scale.z);
+        }; // Ensure values are numbers (not strings) to prevent rendering issues
+
+        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);
       }
     }
   }, {
@@ -61338,8 +61357,12 @@ const tweenTo = function (origin, target) {
           y,
           z,
           ...where
-        };
-        this.getBody().position.set(position.x, position.y, position.z);
+        }; // Ensure values are numbers (not strings) to prevent rendering issues
+
+        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);
       }
     }
   }, {
@@ -61361,8 +61384,12 @@ const tweenTo = function (origin, target) {
           y,
           z,
           ...how
-        };
-        this.getBody().rotation.set(rotation.x, rotation.y, rotation.z);
+        }; // Ensure values are numbers (not strings) to prevent rendering issues
+
+        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);
       }
     }
   }, {
@@ -62273,8 +62300,13 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
   }, {
     key: "setAngularVelocity",
     value: function setAngularVelocity(velocity) {
-      this.angularVelocity = velocity;
-      Physics$1.updateAngularVelocity(this.uuid(), velocity);
+      const numericVelocity = {
+        x: Number(velocity === null || velocity === void 0 ? void 0 : velocity.x) || 0,
+        y: Number(velocity === null || velocity === void 0 ? void 0 : velocity.y) || 0,
+        z: Number(velocity === null || velocity === void 0 ? void 0 : velocity.z) || 0
+      };
+      this.angularVelocity = numericVelocity;
+      Physics$1.updateAngularVelocity(this.uuid(), numericVelocity);
     }
   }, {
     key: "getLinearVelocity",
@@ -62284,8 +62316,13 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
   }, {
     key: "setLinearVelocity",
     value: function setLinearVelocity(velocity) {
-      this.linearVelocity = velocity;
-      Physics$1.updateLinearVelocity(this.uuid(), velocity);
+      const numericVelocity = {
+        x: Number(velocity === null || velocity === void 0 ? void 0 : velocity.x) || 0,
+        y: Number(velocity === null || velocity === void 0 ? void 0 : velocity.y) || 0,
+        z: Number(velocity === null || velocity === void 0 ? void 0 : velocity.z) || 0
+      };
+      this.linearVelocity = numericVelocity;
+      Physics$1.updateLinearVelocity(this.uuid(), numericVelocity);
     }
   }, {
     key: "isCollidingOnDirection",
@@ -62306,11 +62343,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setGeometryRotation",
     value: function setGeometryRotation() {
       let rotation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      const {
-        x = 0,
-        y = 0,
-        z = 0
-      } = rotation;
+      const x = Number(rotation === null || rotation === void 0 ? void 0 : rotation.x) || 0;
+      const y = Number(rotation === null || rotation === void 0 ? void 0 : rotation.y) || 0;
+      const z = Number(rotation === null || rotation === void 0 ? void 0 : rotation.z) || 0;
 
       if (x !== 0) {
         this.getBody().geometry.rotateX(x);
@@ -62366,8 +62401,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setReflectivity",
     value: function setReflectivity() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.REFLECTIVITY];
+      const numericValue = Number(value) || 0;
 
-      const _setReflectivity = material => material[PROPERTIES.REFLECTIVITY] = value;
+      const _setReflectivity = material => material[PROPERTIES.REFLECTIVITY] = numericValue;
 
       if (value != undefined) {
         applyMaterialChange(this.getBody(), _setReflectivity);
@@ -62384,8 +62420,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setRefractionRatio",
     value: function setRefractionRatio() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.REFRACTION_RATIO];
+      const numericValue = Number(value) || 0;
 
-      const _setRefractionRatio = material => material[PROPERTIES.REFRACTION_RATIO] = value;
+      const _setRefractionRatio = material => material[PROPERTIES.REFRACTION_RATIO] = numericValue;
 
       if (value != undefined) {
         applyMaterialChange(this.getBody(), _setRefractionRatio);
@@ -62458,8 +62495,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setShininess",
     value: function setShininess() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.SHININESS];
+      const numericValue = Number(value) || 0;
 
-      const _setShininess = material => material[PROPERTIES.SHININESS] = value;
+      const _setShininess = material => material[PROPERTIES.SHININESS] = numericValue;
 
       applyMaterialChange(this.getBody(), _setShininess);
     }
@@ -62510,8 +62548,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setMetalness",
     value: function setMetalness() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.METALNESS];
+      const numericValue = Number(value) || 0;
 
-      const _setMetalness = material => material[PROPERTIES.METALNESS] = value;
+      const _setMetalness = material => material[PROPERTIES.METALNESS] = numericValue;
 
       applyMaterialChange(this.getBody(), _setMetalness);
     }
@@ -62524,8 +62563,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setRoughness",
     value: function setRoughness() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.ROUGHNESS];
+      const numericValue = Number(value) || 0;
 
-      const _setRoughness = material => material[PROPERTIES.ROUGHNESS] = value;
+      const _setRoughness = material => material[PROPERTIES.ROUGHNESS] = numericValue;
 
       applyMaterialChange(this.getBody(), _setRoughness);
     }
@@ -62562,8 +62602,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setEmissiveIntensity",
     value: function setEmissiveIntensity() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.EMISSIVE_INTENSITY];
+      const numericValue = Number(value) || 0;
 
-      const _setEmissiveIntensity = material => material[PROPERTIES.EMISSIVE_INTENSITY] = value;
+      const _setEmissiveIntensity = material => material[PROPERTIES.EMISSIVE_INTENSITY] = numericValue;
 
       applyMaterialChange(this.getBody(), _setEmissiveIntensity);
     }
@@ -62576,8 +62617,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setLightMapIntensity",
     value: function setLightMapIntensity() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.LIGHT_MAP_INTENSITY];
+      const numericValue = Number(value) || 0;
 
-      const _setLightMapIntensity = material => material[PROPERTIES.LIGHT_MAP_INTENSITY] = value;
+      const _setLightMapIntensity = material => material[PROPERTIES.LIGHT_MAP_INTENSITY] = numericValue;
 
       applyMaterialChange(this.getBody(), _setLightMapIntensity);
     }
@@ -62590,8 +62632,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setAOMapIntensity",
     value: function setAOMapIntensity() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.AO_MAP_INTENSITY];
+      const numericValue = Number(value) || 0;
 
-      const _setAOMapIntensity = material => material[PROPERTIES.AO_MAP_INTENSITY] = value;
+      const _setAOMapIntensity = material => material[PROPERTIES.AO_MAP_INTENSITY] = numericValue;
 
       applyMaterialChange(this.getBody(), _setAOMapIntensity);
     }
@@ -62604,8 +62647,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setAoMapIntensity",
     value: function setAoMapIntensity() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.AO_MAP_INTENSITY];
+      const numericValue = Number(value) || 0;
 
-      const _setAoMapIntensity = material => material[PROPERTIES.AO_MAP_INTENSITY] = value;
+      const _setAoMapIntensity = material => material[PROPERTIES.AO_MAP_INTENSITY] = numericValue;
 
       applyMaterialChange(this.getBody(), _setAoMapIntensity);
     }
@@ -62613,8 +62657,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setEnvMapIntensity",
     value: function setEnvMapIntensity() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.ENV_MAP_INTENSITY];
+      const numericValue = Number(value) || 0;
 
-      const _setEnvMapIntensity = material => material[PROPERTIES.ENV_MAP_INTENSITY] = value;
+      const _setEnvMapIntensity = material => material[PROPERTIES.ENV_MAP_INTENSITY] = numericValue;
 
       applyMaterialChange(this.getBody(), _setEnvMapIntensity);
     }
@@ -62627,8 +62672,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setDisplacementScale",
     value: function setDisplacementScale() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.DISPLACEMENT_SCALE];
+      const numericValue = Number(value) || 0;
 
-      const _setDisplacementScale = material => material[PROPERTIES.DISPLACEMENT_SCALE] = value;
+      const _setDisplacementScale = material => material[PROPERTIES.DISPLACEMENT_SCALE] = numericValue;
 
       applyMaterialChange(this.getBody(), _setDisplacementScale);
     }
@@ -62641,8 +62687,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setDisplacementBias",
     value: function setDisplacementBias() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.DISPLACEMENT_BIAS];
+      const numericValue = Number(value) || 0;
 
-      const _setDisplacementBias = material => material[PROPERTIES.DISPLACEMENT_BIAS] = value;
+      const _setDisplacementBias = material => material[PROPERTIES.DISPLACEMENT_BIAS] = numericValue;
 
       applyMaterialChange(this.getBody(), _setDisplacementBias);
     }
@@ -62655,8 +62702,9 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setBumpScale",
     value: function setBumpScale() {
       let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MATERIAL_PROPERTIES_DEFAULT_VALUES[PROPERTIES.BUMP_SCALE];
+      const numericValue = Number(value) || 0;
 
-      const _setBumpScale = material => material[PROPERTIES.BUMP_SCALE] = value;
+      const _setBumpScale = material => material[PROPERTIES.BUMP_SCALE] = numericValue;
 
       applyMaterialChange(this.getBody(), _setBumpScale);
     }
@@ -62725,7 +62773,13 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
 
           texture.wrapS = textureOptions.wrap;
           texture.wrapT = textureOptions.wrap;
-          texture.repeat.set(textureOptions.repeat.x, textureOptions.repeat.y);
+          texture.repeat.set(textureOptions.repeat.x, textureOptions.repeat.y); // Set sRGB encoding for color textures (map, emissiveMap, specularMap)
+          // This is required for textures to display with correct colors
+
+          if (textureType === TEXTURES.MAP || textureType === TEXTURES.EMISSIVE || textureType === TEXTURES.SPECULAR) {
+            texture.encoding = sRGBEncoding;
+          }
+
           material[textureType] = texture;
           material.needsUpdate = true;
         };
@@ -62857,9 +62911,10 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
     key: "setWireframeLineWidth",
     value: function setWireframeLineWidth() {
       let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      const numericWidth = Number(width) || 1;
 
       const _setWireframeLineWidth = material => {
-        material.wireframeLinewidth = width;
+        material.wireframeLinewidth = numericWidth;
       };
 
       applyMaterialChange(this.getBody(), _setWireframeLineWidth);
@@ -63489,7 +63544,8 @@ let Line = /*#__PURE__*/function (_Element) {
     key: "setThickness",
     value: function setThickness() {
       let thickness = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_LINE_THICKNESS;
-      this.body.material.linewidth = thickness;
+      const numericThickness = Number(thickness) || DEFAULT_LINE_THICKNESS;
+      this.body.material.linewidth = numericThickness;
     }
   }, {
     key: "toJSON",
@@ -63800,29 +63856,33 @@ let Sprite = /*#__PURE__*/function (_Element) {
     key: "setRotation",
     value: function setRotation() {
       let rotation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getRotation();
-      this.setData("rotation", rotation);
-      this.getBody().material.rotation = rotation;
+      const numericRotation = Number(rotation) || 0;
+      this.setData("rotation", numericRotation);
+      this.getBody().material.rotation = numericRotation;
     }
   }, {
     key: "setWidth",
     value: function setWidth() {
       let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.width;
-      this.setData("width", width);
-      this.getBody().scale.x = width;
+      const numericWidth = Number(width) || 1;
+      this.setData("width", numericWidth);
+      this.getBody().scale.x = numericWidth;
     }
   }, {
     key: "setHeight",
     value: function setHeight() {
       let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.height;
-      this.setData("height", height);
-      this.getBody().scale.y = height;
+      const numericHeight = Number(height) || 1;
+      this.setData("height", numericHeight);
+      this.getBody().scale.y = numericHeight;
     }
   }, {
     key: "setAnisotropy",
     value: function setAnisotropy() {
       let anisotropy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-      this.setData("anisotropy", anisotropy);
-      this.getTexture(TEXTURES.MAP).anisotropy = validateAnisotropy(anisotropy);
+      const numericAnisotropy = Number(anisotropy) || 1;
+      this.setData("anisotropy", numericAnisotropy);
+      this.getTexture(TEXTURES.MAP).anisotropy = validateAnisotropy(numericAnisotropy);
     }
   }, {
     key: "setSizeAttenuation",
@@ -76132,7 +76192,11 @@ const buildFBXLoader = () => {
         const textureLoader = new TextureLoader(this.manager).setCrossOrigin(this.crossOrigin);
 
         if (!isAbsoluteURL$1(texture)) {
-          textureLoader.setPath(this.resourcePath || texturePath || path);
+          // Use MAGE_ASSETS_BASE_URL + textures/ as fallback when no texture path is specified
+          // This allows FBX models to find textures in the textures directory of deployed builds
+          const baseUrl = env.MAGE_ASSETS_BASE_URL;
+          const defaultTexturePath = baseUrl ? `${baseUrl}/textures/` : null;
+          textureLoader.setPath(this.resourcePath || texturePath || defaultTexturePath || path);
         }
 
         return new FBXTreeParser(textureLoader, this.manager, this.options).parse(fbxTree);
@@ -80631,10 +80695,16 @@ function parallelTraverse(a, b, callback) {
 };
 const FULL_STOP = ".";
 
-const DEFAULTbuildObjectLoader = () => ({
-  tracer: new RequirementsTracer(),
-  loader: new ObjectLoader()
-});
+const DEFAULTbuildObjectLoader = () => {
+  const loader = new ObjectLoader(); // Add setOptions for compatibility with the loader interface
+
+  loader.setOptions = () => {};
+
+  return {
+    tracer: new RequirementsTracer(),
+    loader
+  };
+};
 
 const loaders = {
   [EXTENSIONS.JSON]: DEFAULTbuildObjectLoader,
@@ -80733,11 +80803,22 @@ const getLoaderFromExtension = (extension, options) => {
   };
 };
 
-const glbParser = _ref => {
-  let {
+const glbParser = gltf => {
+  // GLTF/GLB loader returns { scene, animations, ... }
+  if (!gltf || !gltf.scene) {
+    var _gltf$constructor;
+
+    console.error('[Mage] GLB parser received invalid GLTF object:', {
+      type: gltf === null || gltf === void 0 ? void 0 : (_gltf$constructor = gltf.constructor) === null || _gltf$constructor === void 0 ? void 0 : _gltf$constructor.name,
+      keys: gltf ? Object.keys(gltf) : []
+    });
+    return null;
+  }
+
+  const {
     scene,
     animations
-  } = _ref;
+  } = gltf;
   scene.traverse(object => {
     if (object.isMesh) {
       object.castShadow = true;
@@ -80749,28 +80830,60 @@ const glbParser = _ref => {
   };
 };
 
-const gltfParser = _ref2 => {
-  let {
-    scene,
-    animations
-  } = _ref2;
+const gltfParser = gltf => {
+  // GLTF loader returns { scene, animations, ... }
+  if (!gltf || !gltf.scene) {
+    var _gltf$constructor2;
+
+    console.error('[Mage] GLTF parser received invalid GLTF object:', {
+      type: gltf === null || gltf === void 0 ? void 0 : (_gltf$constructor2 = gltf.constructor) === null || _gltf$constructor2 === void 0 ? void 0 : _gltf$constructor2.name,
+      keys: gltf ? Object.keys(gltf) : []
+    });
+    return null;
+  }
+
   return {
-    scene,
-    animations
+    scene: gltf.scene,
+    animations: gltf.animations
   };
 };
 
-const defaultParser = scene => ({
-  scene
-});
+const defaultParser = scene => {
+  // Validate the scene is a proper THREE.js object
+  if (!scene || typeof scene.traverse !== 'function') {
+    var _scene$constructor;
 
-const colladaParser = _ref3 => {
-  let {
+    console.error('[Mage] Default parser received invalid scene object:', {
+      type: scene === null || scene === void 0 ? void 0 : (_scene$constructor = scene.constructor) === null || _scene$constructor === void 0 ? void 0 : _scene$constructor.name,
+      isObject3D: scene === null || scene === void 0 ? void 0 : scene.isObject3D,
+      keys: scene ? Object.keys(scene) : []
+    });
+    return null;
+  }
+
+  return {
+    scene
+  };
+};
+
+const colladaParser = collada => {
+  // Collada loader returns { animations, scene, ... }
+  if (!collada || !collada.scene) {
+    var _collada$constructor;
+
+    console.error('[Mage] Collada parser received invalid object:', {
+      type: collada === null || collada === void 0 ? void 0 : (_collada$constructor = collada.constructor) === null || _collada$constructor === void 0 ? void 0 : _collada$constructor.name,
+      keys: collada ? Object.keys(collada) : []
+    });
+    return null;
+  }
+
+  const {
     animations,
     scene,
     rawSceneData,
     buildVisualScene
-  } = _ref3;
+  } = collada;
   scene.traverse(node => {
     if (node.isSkinnedMesh) {
       node.frustumCulled = false;
@@ -80785,6 +80898,18 @@ const colladaParser = _ref3 => {
 };
 
 const fbxParser = scene => {
+  // Validate the FBX loader returned a proper THREE.js object
+  if (!scene || typeof scene.traverse !== 'function') {
+    var _scene$constructor2;
+
+    console.error('[Mage] FBX parser received invalid scene object:', {
+      type: scene === null || scene === void 0 ? void 0 : (_scene$constructor2 = scene.constructor) === null || _scene$constructor2 === void 0 ? void 0 : _scene$constructor2.name,
+      isObject3D: scene === null || scene === void 0 ? void 0 : scene.isObject3D,
+      keys: scene ? Object.keys(scene) : []
+    });
+    return null;
+  }
+
   scene.traverse(node => {
     if (node.isSkinnedMesh) {
       processMaterial(node.material, material => material.skinning = true);
@@ -80846,40 +80971,64 @@ let Models = /*#__PURE__*/function (_EventDispatcher) {
     _defineProperty$1(_assertThisInitialized(_this), "create", function (name) {
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       const builtAssetId = buildAssetId(name, _this.currentLevel);
+      const modelData = _this.map[name] || _this.map[builtAssetId];
+
+      if (!modelData) {
+        console.warn(`[Mage] Model "${name}" not found in map. Available: ${Object.keys(_this.map).join(', ')}`);
+        return false;
+      }
+
       const {
         scene,
         animations,
         extension
-      } = _this.map[name] || _this.map[builtAssetId] || {};
+      } = modelData; // Validate that scene is a valid THREE.js object with required methods
 
-      if (scene) {
-        const elementOptions = {
-          name,
-          builtAssetId,
-          ...options
-        };
-        let model = scene.clone();
+      if (!scene || typeof scene.clone !== 'function' || typeof scene.traverse !== 'function') {
+        console.warn(`[Mage] Model "${name}" has invalid scene object. Got:`, Object.keys(modelData));
+        return false;
+      }
 
-        if (extension !== EXTENSIONS.COLLADA && hasAnimations(animations)) {
-          // we have no idea how to clone collada for the time being
+      const elementOptions = {
+        name,
+        builtAssetId,
+        ...options
+      };
+      let model;
+      const useSkeletonClone = extension !== EXTENSIONS.COLLADA && hasAnimations(animations);
+
+      try {
+        if (useSkeletonClone) {
           model = SkeletonUtils.clone(scene);
+        } else {
+          model = scene.clone();
         }
+      } catch (cloneError) {
+        console.error(`[Mage] Error cloning model "${name}":`, cloneError);
+        return false;
+      } // Validate the cloned model
 
-        const element = new Element$1({
-          body: prepareModel(model),
-          ...elementOptions
-        });
-        element.setEntityType(ENTITY_TYPES.MODEL.TYPE);
-        element.setEntitySubtype(ENTITY_TYPES.MODEL.SUBTYPES.DEFAULT);
 
-        if (hasAnimations(animations)) {
-          element.addAnimationHandler(animations);
-        }
+      const preparedBody = prepareModel(model);
+
+      if (!preparedBody) {
+        console.warn(`[Mage] Model "${name}" failed to prepare after cloning`);
+        return false;
+      } // IMPORTANT: body must come AFTER elementOptions spread to ensure
+      // our preparedBody is used, not any 'body' property from saved options
+
+
+      const element = new Element$1({ ...elementOptions,
+        body: preparedBody
+      });
+      element.setEntityType(ENTITY_TYPES.MODEL.TYPE);
+      element.setEntitySubtype(ENTITY_TYPES.MODEL.SUBTYPES.DEFAULT);
 
-        return element;
+      if (hasAnimations(animations)) {
+        element.addAnimationHandler(animations);
       }
 
-      return false;
+      return element;
     });
 
     _defineProperty$1(_assertThisInitialized(_this), "storeModel", (name, model, extension) => {
@@ -80910,8 +81059,23 @@ let Models = /*#__PURE__*/function (_EventDispatcher) {
         return Promise.resolve();
       }
 
-      const path = _this.models[name];
-      return _this.loadAssetByPath(path, name, options);
+      const modelConfig = _this.models[name]; // Support both string paths and objects with path + dependencies
+      // String format: "models/mymodel.fbx"
+      // Object format: { path: "models/mymodel.fbx", dependencies: { texture: "textures/tex.png" } }
+
+      if (typeof modelConfig === "string") {
+        return _this.loadAssetByPath(modelConfig, name, options);
+      } else if (modelConfig && typeof modelConfig === "object") {
+        const {
+          path,
+          dependencies = {}
+        } = modelConfig;
+        return _this.loadAssetByPath(path, name, { ...options,
+          ...dependencies
+        });
+      }
+
+      return Promise.resolve();
     });
 
     _defineProperty$1(_assertThisInitialized(_this), "loadAssetByPath", function (path, name) {
@@ -80928,10 +81092,10 @@ let Models = /*#__PURE__*/function (_EventDispatcher) {
         tracer
       } = getLoaderFromExtension(extension, options);
       const parser = getModelParserFromExtension(extension);
-      tracer.addEventListener(REQUIREMENTS_EVENTS.MISSING, _ref4 => {
+      tracer.addEventListener(REQUIREMENTS_EVENTS.MISSING, _ref => {
         let {
           requirements
-        } = _ref4;
+        } = _ref;
 
         _this.dispatchEvent({
           type: `${REQUIREMENTS_EVENTS.MISSING}:${name}`,
@@ -93974,15 +94138,44 @@ let Sky = /*#__PURE__*/function (_Element) {
 
       for (const elementData of elements) {
         try {
-          if (elementData.entitySubType === ENTITY_TYPES.MODEL.TYPE) {
+          // Check entityType for models (entitySubType would be MODEL.SUBTYPE.DEFAULT)
+          if (elementData.entityType === ENTITY_TYPES.MODEL.TYPE) {
             const {
-              options: modelOptions
+              options: modelOptions = {}
             } = elementData;
             const {
               name,
+              assetPath,
+              dependencies = {},
               ...rest
             } = modelOptions;
-            await Importer.completeElementCreation(Models$1.create(name, rest), elementData, options);
+
+            if (!name) {
+              console.warn(`[Mage] Model element missing name in options:`, elementData);
+              continue;
+            } // Load the model first if it's not already loaded
+            // This handles page refresh in the editor where models need to be reloaded
+
+
+            if (assetPath) {
+              const loadResult = await Models$1.loadAssetByPath(assetPath, name, dependencies);
+
+              if (!loadResult) {
+                console.warn(`[Mage] Failed to load model "${name}" from ${assetPath}`);
+              }
+            }
+
+            const model = Models$1.create(name, {
+              assetPath,
+              dependencies,
+              ...rest
+            });
+
+            if (model) {
+              await Importer.completeElementCreation(model, elementData, options);
+            } else {
+              console.warn(`[Mage] Could not create model "${name}" - check assetPath: ${assetPath}`);
+            }
           } else {
             switch (elementData.entitySubType) {
               case ENTITY_TYPES.MESH.SUBTYPES.CUBE:

package/package.json

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