mage-engine 3.22.2 → 3.22.4

package/dist/mage.js

@@ -56408,7 +56408,7 @@ var Physics$1 = new Physics();var Scene = /*#__PURE__*/function () {
       return [{
         element: this.toJSON(),
         children: [this.getCamera().getHierarchy()].concat(_toConsumableArray(this.elements.filter(function (e) {
-          return !e.hasParent() && !e.isHelper();
+          return !e.hasParent() && !e.isHelper() && e.isSerializable();
         }).map(function (e) {
           return e.getHierarchy();
         })))
@@ -57763,7 +57763,7 @@ function applyMiddleware() {
 
 var thunk = createThunkMiddleware();
 thunk.withExtraArgument = createThunkMiddleware;var name = "mage-engine";
-var version$1 = "3.22.2";
+var version$1 = "3.22.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 = {
@@ -60945,7 +60945,11 @@ var tweenTo = function tweenTo(origin, target) {
           tags: this.getTags(),
           name: this.getName(),
           uuid: this.uuid(),
-          data: this.getData()
+          data: this.getData(),
+          shadow: {
+            cast: this.getBody().castShadow,
+            receive: this.getBody().receiveShadow
+          }
         };
       }
     }
@@ -61082,8 +61086,7 @@ var tweenTo = function tweenTo(origin, target) {
 
   return AnimationHandler;
 }(EventDispatcher);var _MATERIAL_TEXTURE_MAP;
-var MATERIAL_TEXTURE_MAP = (_MATERIAL_TEXTURE_MAP = {}, _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.BASIC, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.ENV, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.SPECULAR]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.LAMBERT, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.ENV, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.SPECULAR, TEXTURES.EMISSIVE]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.PHONG, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.ENV, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.SPECULAR, TEXTURES.EMISSIVE, TEXTURES.BUMP, TEXTURES.DISPLACEMENT, TEXTURES.NORMAL]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.DEPTH, [TEXTURES.ALPHA, TEXTURES.MAP, TEXTURES.DISPLACEMENT]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.STANDARD, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.ENV, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.EMISSIVE, TEXTURES.BUMP, TEXTURES.DISPLACEMENT, TEXTURES.NORMAL, TEXTURES.METALNESS, TEXTURES.ROUGHNESS]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.THREE_TOON, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.BUMP, TEXTURES.DISPLACEMENT, TEXTURES.EMISSIVE, TEXTURES.GRADIENT, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.NORMAL]), _MATERIAL_TEXTURE_MAP);
-var isTextureMapAllowedForMaterial = function isTextureMapAllowedForMaterial(materialType, textureType) {
+var MATERIAL_TEXTURE_MAP = (_MATERIAL_TEXTURE_MAP = {}, _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.BASIC, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.ENV, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.SPECULAR]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.LAMBERT, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.ENV, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.SPECULAR, TEXTURES.EMISSIVE]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.PHONG, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.ENV, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.SPECULAR, TEXTURES.EMISSIVE, TEXTURES.BUMP, TEXTURES.DISPLACEMENT, TEXTURES.NORMAL]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.DEPTH, [TEXTURES.ALPHA, TEXTURES.MAP, TEXTURES.DISPLACEMENT]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.STANDARD, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.ENV, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.EMISSIVE, TEXTURES.BUMP, TEXTURES.DISPLACEMENT, TEXTURES.NORMAL, TEXTURES.METALNESS, TEXTURES.ROUGHNESS]), _defineProperty$1(_MATERIAL_TEXTURE_MAP, MATERIALS.THREE_TOON, [TEXTURES.ALPHA, TEXTURES.AO, TEXTURES.BUMP, TEXTURES.DISPLACEMENT, TEXTURES.EMISSIVE, TEXTURES.GRADIENT, TEXTURES.LIGHT, TEXTURES.MAP, TEXTURES.NORMAL]), _MATERIAL_TEXTURE_MAP);var material_constants=/*#__PURE__*/Object.freeze({__proto__:null,MATERIAL_TEXTURE_MAP:MATERIAL_TEXTURE_MAP});var isTextureMapAllowedForMaterial = function isTextureMapAllowedForMaterial(materialType, textureType) {
   return MATERIAL_TEXTURE_MAP[materialType] && MATERIAL_TEXTURE_MAP[materialType].includes(textureType);
 };var _excluded$8 = ["position", "quaternion"],
     _excluded2 = ["applyPhysicsUpdate"],
@@ -62492,7 +62495,39 @@ var Sprite = /*#__PURE__*/function (_Element) {
   }]);
 
   return Sprite;
-}(Element$1);var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+}(Element$1);var HelperSprite = /*#__PURE__*/function (_Sprite) {
+  _inherits(HelperSprite, _Sprite);
+
+  var _super = _createSuper(HelperSprite);
+
+  function HelperSprite() {
+    var _this;
+
+    _classCallCheck(this, HelperSprite);
+
+    for (var _len = arguments.length, options = new Array(_len), _key = 0; _key < _len; _key++) {
+      options[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(options));
+    _this.helperTarget = undefined;
+    return _this;
+  }
+
+  _createClass(HelperSprite, [{
+    key: "setHelperTarget",
+    value: function setHelperTarget(element) {
+      this.helperTarget = element;
+    }
+  }, {
+    key: "getHelperTarget",
+    value: function getHelperTarget() {
+      return this.helperTarget;
+    }
+  }]);
+
+  return HelperSprite;
+}(Sprite);var __awaiter$5 = (undefined && undefined.__awaiter) || function (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); } }
@@ -82931,7 +82966,7 @@ var MeshLoader$1 = new MeshLoader();var Light = /*#__PURE__*/function (_Entity)
     _defineProperty$1(_assertThisInitialized(_this), "addHolder", function () {
       var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "lightholder";
       var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.05;
-      var holderSprite = new Sprite(size, size, name, {
+      var holderSprite = new HelperSprite(size, size, name, {
         name: name
       });
 
@@ -82942,6 +82977,7 @@ var MeshLoader$1 = new MeshLoader();var Light = /*#__PURE__*/function (_Entity)
         holderSprite.setSerializable(false);
         holderSprite.setPosition(_this.getPosition());
         holderSprite.addTags([TAGS.LIGHTS.HELPER, TAGS.LIGHTS.HOLDER, name]);
+        holderSprite.setHelperTarget(_assertThisInitialized(_this));
         _this.holder = holderSprite;
         return true;
       } else {
@@ -82953,7 +82989,7 @@ var MeshLoader$1 = new MeshLoader();var Light = /*#__PURE__*/function (_Entity)
     _defineProperty$1(_assertThisInitialized(_this), "addTargetHolder", function () {
       var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "targetholder";
       var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.05;
-      var targetSprite = new Sprite(size, size, name, {
+      var targetSprite = new HelperSprite(size, size, name, {
         name: name
       });
 
@@ -82962,8 +82998,9 @@ var MeshLoader$1 = new MeshLoader();var Light = /*#__PURE__*/function (_Entity)
         targetSprite.setDepthTest(false);
         targetSprite.setDepthWrite(false);
         targetSprite.setSerializable(false);
-        targetSprite.setPosition(_this.getTargetPosition());
+        targetSprite.setPosition(_this.getTarget().getPosition());
         targetSprite.addTags([TAGS.LIGHTS.HELPER, TAGS.LIGHTS.TARGET, name]);
+        targetSprite.setHelperTarget(_assertThisInitialized(_this));
         targetSprite.getBody().add(_this.getBody().target);
         _this.targetHolder = targetSprite;
       }
@@ -83078,6 +83115,17 @@ var MeshLoader$1 = new MeshLoader();var Light = /*#__PURE__*/function (_Entity)
     value: function getColor() {
       return this.body.color;
     }
+  }, {
+    key: "setCastShadow",
+    value: function setCastShadow(castShadow) {
+      this.castShadow = castShadow;
+      this.getBody().castShadow = castShadow;
+    }
+  }, {
+    key: "getCastShadow",
+    value: function getCastShadow() {
+      return this.castShadow;
+    }
   }, {
     key: "dim",
     value: function dim() {
@@ -83133,7 +83181,8 @@ var MeshLoader$1 = new MeshLoader();var Light = /*#__PURE__*/function (_Entity)
         type: this.getEntityType(),
         color: this.getColor(),
         intensity: this.getIntensity(),
-        name: this.getName()
+        name: this.getName(),
+        castShadow: this.getCastShadow()
       });
     }
   }]);
@@ -83175,7 +83224,29 @@ var SunLight = /*#__PURE__*/function (_Light) {
       intensity: intensity,
       name: name
     });
+
+    _defineProperty$1(_assertThisInitialized(_this), "setShadowCameraNearFar", function () {
+      var near = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_NEAR$2;
+      var far = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_FAR$2;
+      _this.near = near;
+      _this.far = far;
+      var d = _this.far / 2;
+      _this.getBody().shadow.camera.left = -d;
+      _this.getBody().shadow.camera.right = d;
+      _this.getBody().shadow.camera.top = d;
+      _this.getBody().shadow.camera.bottom = -d;
+      _this.getBody().shadow.camera.near = near;
+      _this.getBody().shadow.camera.far = far;
+    });
+
+    _defineProperty$1(_assertThisInitialized(_this), "setBias", function () {
+      var bias = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_BIAS$2;
+      _this.bias = bias;
+      _this.getBody().shadow.bias = bias;
+    });
+
     _this.options = options;
+    _this.target = ORIGIN;
 
     _this.setLight({
       color: color,
@@ -83215,51 +83286,77 @@ var SunLight = /*#__PURE__*/function (_Light) {
   }, {
     key: "postLightCreation",
     value: function postLightCreation() {
-      var _this$options = this.options,
-          _this$options$positio = _this$options.position,
-          position = _this$options$positio === void 0 ? DEFAULT_POSITION$3 : _this$options$positio,
-          target = _this$options.target;
+      var _this$options$positio = this.options.position,
+          position = _this$options$positio === void 0 ? DEFAULT_POSITION$3 : _this$options$positio;
+      var emptyTarget = new Element$1({
+        body: new Object3D()
+      });
       this.setPosition(position);
-
-      if (target) {
-        this.setTarget(target);
-      }
-
+      this.setTarget(emptyTarget);
       this.setLightShadows();
       this.addToScene();
     }
   }, {
     key: "setLightShadows",
     value: function setLightShadows() {
-      var _this$options2 = this.options,
-          _this$options2$near = _this$options2.near,
-          near = _this$options2$near === void 0 ? DEFAULT_NEAR$2 : _this$options2$near,
-          _this$options2$far = _this$options2.far,
-          far = _this$options2$far === void 0 ? DEFAULT_FAR$2 : _this$options2$far,
-          _this$options2$mapSiz = _this$options2.mapSize,
-          mapSize = _this$options2$mapSiz === void 0 ? DEFAULT_MAP_SIZE$2 : _this$options2$mapSiz,
-          _this$options2$bias = _this$options2.bias,
-          bias = _this$options2$bias === void 0 ? DEFAULT_BIAS$2 : _this$options2$bias,
-          _this$options2$fov = _this$options2.fov,
-          fov = _this$options2$fov === void 0 ? DEFAULT_FOV : _this$options2$fov,
-          _this$options2$castSh = _this$options2.castShadow,
-          castShadow = _this$options2$castSh === void 0 ? true : _this$options2$castSh;
-
-      if (Config$1.lights().shadows && castShadow) {
-        this.body.castShadow = true;
-        var d = far / 1.5;
-        this.body.shadow.mapSize.height = mapSize;
-        this.body.shadow.mapSize.width = mapSize;
-        this.body.shadow.camera.left = -d;
-        this.body.shadow.camera.right = d;
-        this.body.shadow.camera.top = d;
-        this.body.shadow.camera.bottom = -d;
-        this.body.shadow.camera.near = near;
-        this.body.shadow.camera.far = far;
-        this.body.shadow.camera.fov = fov;
-        this.body.shadow.bias = bias;
+      var _this$options = this.options,
+          _this$options$near = _this$options.near,
+          near = _this$options$near === void 0 ? DEFAULT_NEAR$2 : _this$options$near,
+          _this$options$far = _this$options.far,
+          far = _this$options$far === void 0 ? DEFAULT_FAR$2 : _this$options$far,
+          _this$options$mapSize = _this$options.mapSize,
+          mapSize = _this$options$mapSize === void 0 ? DEFAULT_MAP_SIZE$2 : _this$options$mapSize,
+          _this$options$bias = _this$options.bias,
+          bias = _this$options$bias === void 0 ? DEFAULT_BIAS$2 : _this$options$bias,
+          _this$options$fov = _this$options.fov,
+          fov = _this$options$fov === void 0 ? DEFAULT_FOV : _this$options$fov;
+
+      if (Config$1.lights().shadows) {
+        this.setCastShadow(true);
+        this.setMapSize(mapSize);
+        this.setShadowCameraNearFar(near, far);
+        this.setBias(bias);
+        this.setShadowCameraFov(fov);
       }
     }
+  }, {
+    key: "getShadowCameraNearFar",
+    value: function getShadowCameraNearFar() {
+      return {
+        near: this.near,
+        far: this.far
+      };
+    }
+  }, {
+    key: "setShadowCameraFov",
+    value: function setShadowCameraFov() {
+      var fov = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_FOV;
+      this.fov = fov;
+      this.getBody().shadow.camera.fov = fov;
+    }
+  }, {
+    key: "getShadowCameraFov",
+    value: function getShadowCameraFov() {
+      return this.fov;
+    }
+  }, {
+    key: "setMapSize",
+    value: function setMapSize() {
+      var mapSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_MAP_SIZE$2;
+      this.mapSize = mapSize;
+      this.getBody().shadow.mapSize.height = mapSize;
+      this.getBody().shadow.mapSize.width = mapSize;
+    }
+  }, {
+    key: "getMapSize",
+    value: function getMapSize() {
+      return this.mapSize;
+    }
+  }, {
+    key: "getBias",
+    value: function getBias() {
+      return this.bias;
+    }
   }, {
     key: "hasTarget",
     value: function hasTarget() {
@@ -83268,14 +83365,13 @@ var SunLight = /*#__PURE__*/function (_Light) {
   }, {
     key: "setTarget",
     value: function setTarget(target) {
-      if (target.position) {
-        this.body.target = target;
-        Scene$1.add(this.body.target, null, false);
-      }
+      this.target = target;
+      this.getBody().target = target.getBody();
+      Scene$1.add(this.getBody().target, null, false);
     }
   }, {
-    key: "getTargetPosition",
-    value: function getTargetPosition() {
+    key: "getTarget",
+    value: function getTarget() {
       return this.target;
     }
   }, {
@@ -83283,7 +83379,7 @@ var SunLight = /*#__PURE__*/function (_Light) {
     value: function addHelpers() {
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref2$holderName = _ref2.holderName,
-          holderName = _ref2$holderName === void 0 ? "sunlightHelper" : _ref2$holderName,
+          holderName = _ref2$holderName === void 0 ? "sunlightholder" : _ref2$holderName,
           _ref2$holderSize = _ref2.holderSize,
           holderSize = _ref2$holderSize === void 0 ? 0.05 : _ref2$holderSize,
           _ref2$targetHolderNam = _ref2.targetHolderName,
@@ -83319,7 +83415,16 @@ var SunLight = /*#__PURE__*/function (_Light) {
     key: "toJSON",
     value: function toJSON() {
       return _objectSpread2$1(_objectSpread2$1({}, _get(_getPrototypeOf(SunLight.prototype), "toJSON", this).call(this)), {}, {
-        target: this.getTargetPosition()
+        target: this.getTarget(),
+        distance: this.getDistance(),
+        decay: this.getDecay(),
+        bias: this.getBias(),
+        mapSize: this.getMapSize(),
+        shadowCamera: _objectSpread2$1(_objectSpread2$1({}, this.getShadowCameraNearFar()), {}, {
+          fov: this.setShadowCameraFov()
+        }),
+        penumbra: this.getPenumbra(),
+        angle: this.getAngle()
       });
     }
   }]);
@@ -83467,6 +83572,27 @@ var PointLight = /*#__PURE__*/function (_Light) {
       intensity: intensity,
       name: name
     });
+
+    _defineProperty$1(_assertThisInitialized(_this), "setShadowCameraNearFar", function () {
+      var near = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_NEAR$1;
+      var far = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_FAR$1;
+      _this.near = near;
+      _this.far = far;
+      var d = _this.far / 2;
+      _this.getBody().shadow.camera.left = -d;
+      _this.getBody().shadow.camera.right = d;
+      _this.getBody().shadow.camera.top = d;
+      _this.getBody().shadow.camera.bottom = -d;
+      _this.getBody().shadow.camera.near = near;
+      _this.getBody().shadow.camera.far = far;
+    });
+
+    _defineProperty$1(_assertThisInitialized(_this), "setBias", function () {
+      var bias = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_BIAS$1;
+      _this.bias = bias;
+      _this.getBody().shadow.bias = bias;
+    });
+
     _this.options = options;
 
     _this.setLight({
@@ -83502,8 +83628,10 @@ var PointLight = /*#__PURE__*/function (_Light) {
         });
       } else {
         this.setBody({
-          body: new PointLight$1(color, intensity, distance, decay)
+          body: new PointLight$1(color, intensity)
         });
+        this.setDistance(distance);
+        this.setDecay(decay);
       }
 
       if (this.hasBody()) {
@@ -83533,19 +83661,62 @@ var PointLight = /*#__PURE__*/function (_Light) {
           bias = _this$options$bias === void 0 ? DEFAULT_BIAS$1 : _this$options$bias;
 
       if (Config$1.lights().shadows) {
-        this.body.castShadow = true;
-        var d = far / 2;
-        this.body.shadow.mapSize.height = mapSize;
-        this.body.shadow.mapSize.width = mapSize;
-        this.body.shadow.camera.left = -d;
-        this.body.shadow.camera.right = d;
-        this.body.shadow.camera.top = d;
-        this.body.shadow.camera.bottom = -d;
-        this.body.shadow.camera.near = near;
-        this.body.shadow.camera.far = far;
-        this.body.shadow.bias = bias;
+        this.setCastShadow(true);
+        this.setMapSize(mapSize);
+        this.setShadowCameraNearFar(near, far);
+        this.setBias(bias);
       }
     }
+  }, {
+    key: "setDistance",
+    value: function setDistance() {
+      var distance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_DISTANCE;
+      this.distance = distance;
+      this.getBody().distance = distance;
+    }
+  }, {
+    key: "getDistance",
+    value: function getDistance() {
+      return this.distance;
+    }
+  }, {
+    key: "setDecay",
+    value: function setDecay() {
+      var decay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_DECAY;
+      this.decay = decay;
+      this.getBody().decay = decay;
+    }
+  }, {
+    key: "getDecay",
+    value: function getDecay() {
+      return this.decay;
+    }
+  }, {
+    key: "getShadowCameraNearFar",
+    value: function getShadowCameraNearFar() {
+      return {
+        near: this.near,
+        far: this.far
+      };
+    }
+  }, {
+    key: "setMapSize",
+    value: function setMapSize() {
+      var mapSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_MAP_SIZE$1;
+      this.mapSize = mapSize;
+      this.getBody().shadow.mapSize.height = mapSize;
+      this.getBody().shadow.mapSize.width = mapSize;
+    }
+  }, {
+    key: "getMapSize",
+    value: function getMapSize() {
+      return this.mapSize;
+    }
+  }, {
+    key: "getBias",
+    value: function getBias() {
+      return this.bias;
+    }
   }, {
     key: "addHelpers",
     value: function addHelpers() {
@@ -83582,7 +83753,11 @@ var PointLight = /*#__PURE__*/function (_Light) {
     key: "toJSON",
     value: function toJSON() {
       return _objectSpread2$1(_objectSpread2$1({}, _get(_getPrototypeOf(PointLight.prototype), "toJSON", this).call(this)), {}, {
-        distance: this.distance
+        distance: this.getDistance(),
+        decay: this.getDecay(),
+        bias: this.getBias(),
+        mapSize: this.getMapSize(),
+        shadowCamera: this.getShadowCameraNearFar()
       });
     }
   }]);
@@ -91397,11 +91572,6 @@ var DEFAULT_POSITION = {
   y: 0,
   z: 0
 };
-var DEFAULT_TARGET_POSITION = {
-  x: 0,
-  y: 0,
-  z: 0
-};
 var DEFAULT_INTENSITY$1 = 0.5;
 var DEFAULT_MAP_SIZE = 2048;
 var DEFAULT_BIAS = -0.0001;
@@ -91442,6 +91612,27 @@ var SpotLight = /*#__PURE__*/function (_Light) {
       intensity: intensity,
       name: name
     });
+
+    _defineProperty$1(_assertThisInitialized(_this), "setShadowCameraNearFar", function () {
+      var near = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_NEAR;
+      var far = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_FAR;
+      _this.near = near;
+      _this.far = far;
+      var d = _this.far / 2;
+      _this.getBody().shadow.camera.left = -d;
+      _this.getBody().shadow.camera.right = d;
+      _this.getBody().shadow.camera.top = d;
+      _this.getBody().shadow.camera.bottom = -d;
+      _this.getBody().shadow.camera.near = near;
+      _this.getBody().shadow.camera.far = far;
+    });
+
+    _defineProperty$1(_assertThisInitialized(_this), "setBias", function () {
+      var bias = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_BIAS;
+      _this.bias = bias;
+      _this.getBody().shadow.bias = bias;
+    });
+
     _this.options = options;
 
     _this.setLight({
@@ -91484,8 +91675,12 @@ var SpotLight = /*#__PURE__*/function (_Light) {
         });
       } else {
         this.setBody({
-          body: new SpotLight$1(color, intensity, distance, angle, penumbra, decay)
+          body: new SpotLight$1(color, intensity)
         });
+        this.setDistance(distance);
+        this.setAngle(angle);
+        this.setPenumbra(penumbra);
+        this.setDecay(decay);
       }
 
       if (this.hasBody()) {
@@ -91495,60 +91690,120 @@ var SpotLight = /*#__PURE__*/function (_Light) {
   }, {
     key: "postLightCreation",
     value: function postLightCreation() {
-      var _this$options = this.options,
-          _this$options$positio = _this$options.position,
-          position = _this$options$positio === void 0 ? DEFAULT_POSITION : _this$options$positio,
-          _this$options$target = _this$options.target,
-          target = _this$options$target === void 0 ? DEFAULT_TARGET_POSITION : _this$options$target;
+      var _this$options$positio = this.options.position,
+          position = _this$options$positio === void 0 ? DEFAULT_POSITION : _this$options$positio;
+      var emptyTarget = new Element$1({
+        body: new Object3D()
+      });
       this.setPosition(position);
-      this.setTargetPosition(target);
+      this.setTarget(emptyTarget);
       this.setLightShadows();
       this.addToScene();
     }
   }, {
     key: "setLightShadows",
     value: function setLightShadows() {
-      var _this$options2 = this.options,
-          _this$options2$near = _this$options2.near,
-          near = _this$options2$near === void 0 ? DEFAULT_NEAR : _this$options2$near,
-          _this$options2$far = _this$options2.far,
-          far = _this$options2$far === void 0 ? DEFAULT_FAR : _this$options2$far,
-          _this$options2$mapSiz = _this$options2.mapSize,
-          mapSize = _this$options2$mapSiz === void 0 ? DEFAULT_MAP_SIZE : _this$options2$mapSiz,
-          _this$options2$bias = _this$options2.bias,
-          bias = _this$options2$bias === void 0 ? DEFAULT_BIAS : _this$options2$bias;
+      var _this$options = this.options,
+          _this$options$near = _this$options.near,
+          near = _this$options$near === void 0 ? DEFAULT_NEAR : _this$options$near,
+          _this$options$far = _this$options.far,
+          far = _this$options$far === void 0 ? DEFAULT_FAR : _this$options$far,
+          _this$options$mapSize = _this$options.mapSize,
+          mapSize = _this$options$mapSize === void 0 ? DEFAULT_MAP_SIZE : _this$options$mapSize,
+          _this$options$bias = _this$options.bias,
+          bias = _this$options$bias === void 0 ? DEFAULT_BIAS : _this$options$bias;
 
       if (Config$1.lights().shadows) {
-        this.body.castShadow = true;
-        var d = far / 2;
-        this.body.shadow.mapSize.height = mapSize;
-        this.body.shadow.mapSize.width = mapSize;
-        this.body.shadow.camera.left = -d;
-        this.body.shadow.camera.right = d;
-        this.body.shadow.camera.top = d;
-        this.body.shadow.camera.bottom = -d;
-        this.body.shadow.camera.near = near;
-        this.body.shadow.camera.far = far;
-        this.body.shadow.bias = bias;
-      }
-    }
-  }, {
-    key: "setTargetPosition",
-    value: function setTargetPosition() {
-      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      this.target = _objectSpread2$1(_objectSpread2$1({}, this.target), position);
-      var _this$target = this.target,
-          _this$target$x = _this$target.x,
-          x = _this$target$x === void 0 ? 0 : _this$target$x,
-          _this$target$y = _this$target.y,
-          y = _this$target$y === void 0 ? 0 : _this$target$y,
-          _this$target$z = _this$target.z,
-          z = _this$target$z === void 0 ? 0 : _this$target$z;
-      this.body.target.position.set(x, y, z);
-    }
-  }, {
-    key: "getTargetPosition",
-    value: function getTargetPosition() {
+        this.setCastShadow(true);
+        this.setMapSize(mapSize);
+        this.setShadowCameraNearFar(near, far);
+        this.setBias(bias);
+      }
+    }
+  }, {
+    key: "setDistance",
+    value: function setDistance() {
+      var distance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_FAR;
+      this.distance = distance;
+      this.getBody().distance = distance;
+    }
+  }, {
+    key: "getDistance",
+    value: function getDistance() {
+      return this.distance;
+    }
+  }, {
+    key: "setAngle",
+    value: function setAngle() {
+      var angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_SPOTLIGHT_ANGLE;
+      this.angle = angle;
+      this.getBody().angle = angle;
+    }
+  }, {
+    key: "getAngle",
+    value: function getAngle() {
+      return this.angle;
+    }
+  }, {
+    key: "setPenumbra",
+    value: function setPenumbra() {
+      var penumbra = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_SPOTLIGHT_PENUMBRA;
+      this.penumbra = penumbra;
+      this.getBody().penumbra = penumbra;
+    }
+  }, {
+    key: "getPenumbra",
+    value: function getPenumbra() {
+      return this.penumbra;
+    }
+  }, {
+    key: "setDecay",
+    value: function setDecay() {
+      var decay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_SPOTLIGHT_DECAY;
+      this.decay = decay;
+      this.getBody().decay = decay;
+    }
+  }, {
+    key: "getDecay",
+    value: function getDecay() {
+      return this.decay;
+    }
+  }, {
+    key: "getShadowCameraNearFar",
+    value: function getShadowCameraNearFar() {
+      return {
+        near: this.near,
+        far: this.far
+      };
+    }
+  }, {
+    key: "setMapSize",
+    value: function setMapSize() {
+      var mapSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_MAP_SIZE;
+      this.mapSize = mapSize;
+      this.getBody().shadow.mapSize.height = mapSize;
+      this.getBody().shadow.mapSize.width = mapSize;
+    }
+  }, {
+    key: "getMapSize",
+    value: function getMapSize() {
+      return this.mapSize;
+    }
+  }, {
+    key: "getBias",
+    value: function getBias() {
+      return this.bias;
+    }
+  }, {
+    key: "setTarget",
+    value: function setTarget(target) {
+      this.target = target;
+      this.getBody().target = target.getBody();
+      Scene$1.add(this.getBody().target, null, false);
+    }
+  }, {
+    key: "getTarget",
+    value: function getTarget() {
       return this.target;
     }
   }, {
@@ -91597,7 +91852,14 @@ var SpotLight = /*#__PURE__*/function (_Light) {
     key: "toJSON",
     value: function toJSON() {
       return _objectSpread2$1(_objectSpread2$1({}, _get(_getPrototypeOf(SpotLight.prototype), "toJSON", this).call(this)), {}, {
-        target: this.getTargetPosition()
+        target: this.getTarget(),
+        distance: this.getDistance(),
+        decay: this.getDecay(),
+        bias: this.getBias(),
+        mapSize: this.getMapSize(),
+        shadowCamera: this.getShadowCameraNearFar(),
+        penumbra: this.getPenumbra(),
+        angle: this.getAngle()
       });
     }
   }]);
@@ -91634,6 +91896,23 @@ var HemisphereLight = /*#__PURE__*/function (_Light) {
       intensity: intensity,
       name: name
     });
+
+    _defineProperty$1(_assertThisInitialized(_this), "setColor", function () {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          sky = _ref.sky,
+          ground = _ref.ground;
+
+      _this.getBody().color = sky;
+      _this.getBody().groundColor = ground;
+    });
+
+    _defineProperty$1(_assertThisInitialized(_this), "getColor", function () {
+      return {
+        sky: _this.getBody().color,
+        ground: _this.getBody().groundColor
+      };
+    });
+
     _this.options = options;
 
     _this.setLight({
@@ -91650,15 +91929,15 @@ var HemisphereLight = /*#__PURE__*/function (_Light) {
 
   _createClass(HemisphereLight, [{
     key: "setLight",
-    value: function setLight(_ref) {
-      var light = _ref.light,
-          _ref$color = _ref.color,
-          color = _ref$color === void 0 ? {
+    value: function setLight(_ref2) {
+      var light = _ref2.light,
+          _ref2$color = _ref2.color,
+          color = _ref2$color === void 0 ? {
         sky: DEFAULT_SKY_COLOR,
         ground: DEFAULT_GROUND_COLOR
-      } : _ref$color,
-          _ref$intensity = _ref.intensity,
-          intensity = _ref$intensity === void 0 ? DEFAULT_INTENSITY : _ref$intensity;
+      } : _ref2$color,
+          _ref2$intensity = _ref2.intensity,
+          intensity = _ref2$intensity === void 0 ? DEFAULT_INTENSITY : _ref2$intensity;
 
       if (light) {
         this.setBody({
@@ -91681,11 +91960,11 @@ var HemisphereLight = /*#__PURE__*/function (_Light) {
   }, {
     key: "addHelpers",
     value: function addHelpers() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref2$holderName = _ref2.holderName,
-          holderName = _ref2$holderName === void 0 ? "hemispherelightholder" : _ref2$holderName,
-          _ref2$holderSize = _ref2.holderSize,
-          holderSize = _ref2$holderSize === void 0 ? 0.05 : _ref2$holderSize;
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref3$holderName = _ref3.holderName,
+          holderName = _ref3$holderName === void 0 ? "hemispherelightholder" : _ref3$holderName,
+          _ref3$holderSize = _ref3.holderSize,
+          holderSize = _ref3$holderSize === void 0 ? 0.05 : _ref3$holderSize;
 
       this.helper = new HemisphereLightHelper(this.getBody(), 2, GREEN);
       this.addHolder(holderName, holderSize);
@@ -91703,6 +91982,13 @@ var HemisphereLight = /*#__PURE__*/function (_Light) {
         });
       }
     }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return _objectSpread2$1(_objectSpread2$1({}, _get(_getPrototypeOf(HemisphereLight.prototype), "toJSON", this).call(this)), {}, {
+        color: this.getColor()
+      });
+    }
   }]);
 
   return HemisphereLight;
@@ -93282,4 +93568,4 @@ var Shaders$1 = new Shaders();var Shader = function Shader(name, attributes, uni
   } else {
     this.instance = this.shader.instance;
   }
-};var constants = _objectSpread2$1(_objectSpread2$1({}, lib_constants), light_contants);export{AUDIO_RAMPS,AmbientLight,AmbientSound,Atmosphere,Audio$1 as Audio,Axes,BUILTIN,BaseScript,Box,Camera,Color,Cone,Config$1 as Config,Controls$1 as Controls,Cube,CurveLine,Cylinder,DirectionalSound,ENTITY_EVENTS,ENTITY_TYPES,Element$1 as Element,Entity,EventDispatcher,FEATURES,Features$1 as Features,GameRunner$1 as GameRunner,Grid,HemisphereLight,INPUT_EVENTS,Images$1 as Images,Input$1 as Input,Label,LabelComponent,Level,LightLoader$1 as LightLoader,Lights$1 as Lights,Line,MeshLoader$1 as MeshLoader,Mirror,Models$1 as Models,Ocean,PALETTES,PARTICLES,constants$1 as PHYSICS_CONSTANTS,PHYSICS_EVENTS,ParticleEmitter,ParticleEmitterGroup,Particles$1 as Particles,index$1 as Partykals,Physics$1 as Physics,Plane,PointLight,PostProcessing$1 as PostProcessing,Proton,ProtonParticleEmitter,Provider,Router$1 as Router,Scene$1 as Scene,Scripts$1 as Scripts,Shader,Sky,Skybox,Sound,Sphere,SpotLight,Sprite,Stats$1 as Stats,SunLight,three_module as THREE,Universe$1 as Universe,Vector3$1 as Vector3,Water,author,connect,constants,createElement,easing,functions,hitbox as hitboxUtils,index_esm as inferno,math,utils as physicsUtils,index$2 as rxjs,index as store,strings,uuid$1 as uuid,workers,index$3 as xstate};
+};var constants = _objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, lib_constants), light_contants), material_constants);export{AUDIO_RAMPS,AmbientLight,AmbientSound,Atmosphere,Audio$1 as Audio,Axes,BUILTIN,BaseScript,Box,Camera,Color,Cone,Config$1 as Config,Controls$1 as Controls,Cube,CurveLine,Cylinder,DirectionalSound,ENTITY_EVENTS,ENTITY_TYPES,Element$1 as Element,Entity,EventDispatcher,FEATURES,Features$1 as Features,GameRunner$1 as GameRunner,Grid,HelperSprite,HemisphereLight,INPUT_EVENTS,Images$1 as Images,Input$1 as Input,Label,LabelComponent,Level,LightLoader$1 as LightLoader,Lights$1 as Lights,Line,MeshLoader$1 as MeshLoader,Mirror,Models$1 as Models,Ocean,PALETTES,PARTICLES,constants$1 as PHYSICS_CONSTANTS,PHYSICS_EVENTS,ParticleEmitter,ParticleEmitterGroup,Particles$1 as Particles,index$1 as Partykals,Physics$1 as Physics,Plane,PointLight,PostProcessing$1 as PostProcessing,Proton,ProtonParticleEmitter,Provider,Router$1 as Router,Scene$1 as Scene,Scripts$1 as Scripts,Shader,Sky,Skybox,Sound,Sphere,SpotLight,Sprite,Stats$1 as Stats,SunLight,three_module as THREE,Universe$1 as Universe,Vector3$1 as Vector3,Water,author,connect,constants,createElement,easing,functions,hitbox as hitboxUtils,index_esm as inferno,math,utils as physicsUtils,index$2 as rxjs,index as store,strings,uuid$1 as uuid,workers,index$3 as xstate};

package/package.json

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