mage-engine 3.24.2 → 3.24.4

package/dist/mage.js

@@ -54722,7 +54722,9 @@ let Keyboard = /*#__PURE__*/function (_EventDispatcher) {
     SUBTYPES: {
       DEFAULT: "SCENERY.SUBTYPE.DEFAULT",
       SKY: "SCENERY.SUBTYPE.SKY",
-      SKYBOX: "SCENERY.SUBTYPE.SKYBOX"
+      SKYBOX: "SCENERY.SUBTYPE.SKYBOX",
+      WATER: "SCENERY.SUBTYPE.WATER",
+      MIRROR: "SCENERY.SUBTYPE.MIRROR"
     }
   },
   HELPER: {
@@ -54738,7 +54740,7 @@ let Keyboard = /*#__PURE__*/function (_EventDispatcher) {
   UNKNOWN: "UNKNOWN"
 };
 const FLAT_ENTITY_TYPES = [ENTITY_TYPES.SCENE.TYPE, ENTITY_TYPES.CAMERA.TYPE, ENTITY_TYPES.MESH.TYPE, ENTITY_TYPES.LABEL.TYPE, ENTITY_TYPES.LIGHT.TYPE, ENTITY_TYPES.AUDIO.TYPE, ENTITY_TYPES.MODEL.TYPE, ENTITY_TYPES.SPRITE.TYPE, ENTITY_TYPES.PARTICLE.TYPE, ENTITY_TYPES.SCENERY.TYPE, ENTITY_TYPES.HELPER.TYPE, ENTITY_TYPES.UNKNOWN];
-const FLAT_ENTITY_SUBTYPES = [ENTITY_TYPES.SCENE.SUBTYPES.DEFAULT, ENTITY_TYPES.CAMERA.SUBTYPES.DEFAULT, ENTITY_TYPES.CAMERA.SUBTYPES.MAIN, ENTITY_TYPES.CAMERA.SUBTYPES.GAME, ENTITY_TYPES.MESH.SUBTYPES.DEFAULT, ENTITY_TYPES.MESH.SUBTYPES.BOX, ENTITY_TYPES.MESH.SUBTYPES.SPHERE, ENTITY_TYPES.MESH.SUBTYPES.PLANE, ENTITY_TYPES.MESH.SUBTYPES.CYLINDER, ENTITY_TYPES.MESH.SUBTYPES.CONE, ENTITY_TYPES.MESH.SUBTYPES.CUBE, ENTITY_TYPES.MESH.SUBTYPES.LINE, ENTITY_TYPES.MESH.SUBTYPES.CURVE_LINE, ENTITY_TYPES.MESH.SUBTYPES.AXES, ENTITY_TYPES.MESH.SUBTYPES.GRID, ENTITY_TYPES.MESH.SUBTYPES.TARGET, ENTITY_TYPES.LABEL.SUBTYPES.DEFAULT, ENTITY_TYPES.LIGHT.SUBTYPES.DEFAULT, ENTITY_TYPES.LIGHT.SUBTYPES.AMBIENT, ENTITY_TYPES.LIGHT.SUBTYPES.SUN, ENTITY_TYPES.LIGHT.SUBTYPES.HEMISPHERE, ENTITY_TYPES.LIGHT.SUBTYPES.POINT, ENTITY_TYPES.LIGHT.SUBTYPES.SPOT, ENTITY_TYPES.AUDIO.SUBTYPES.DEFAULT, ENTITY_TYPES.AUDIO.SUBTYPES.DIRECTIONAL, ENTITY_TYPES.AUDIO.SUBTYPES.AMBIENT, ENTITY_TYPES.MODEL.SUBTYPES.DEFAULT, ENTITY_TYPES.SPRITE.SUBTYPES.DEFAULT, ENTITY_TYPES.SPRITE.SUBTYPES.ANIMATED_SPRITE, ENTITY_TYPES.PARTICLE.SUBTYPES.DEFAULT, ENTITY_TYPES.PARTICLE.SUBTYPES.EMITTER, ENTITY_TYPES.PARTICLE.SUBTYPES.SYSTEM, ENTITY_TYPES.PARTICLE.SUBTYPES.EMITTER_GROUP, ENTITY_TYPES.PARTICLE.SUBTYPES.PROTON_EMITTER, ENTITY_TYPES.PARTICLE.SUBTYPES.FIRE, ENTITY_TYPES.PARTICLE.SUBTYPES.EXPLOSION, ENTITY_TYPES.PARTICLE.SUBTYPES.TRAIL, ENTITY_TYPES.PARTICLE.SUBTYPES.RAIN, ENTITY_TYPES.PARTICLE.SUBTYPES.SNOW, ENTITY_TYPES.PARTICLE.SUBTYPES.FOUNTAIN, ENTITY_TYPES.SCENERY.SUBTYPES.DEFAULT, ENTITY_TYPES.SCENERY.SUBTYPES.SKY, ENTITY_TYPES.SCENERY.SUBTYPES.SKYBOX, ENTITY_TYPES.HELPER.SUBTYPES.GRID, ENTITY_TYPES.HELPER.SUBTYPES.AXES, ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE];
+const FLAT_ENTITY_SUBTYPES = [ENTITY_TYPES.SCENE.SUBTYPES.DEFAULT, ENTITY_TYPES.CAMERA.SUBTYPES.DEFAULT, ENTITY_TYPES.CAMERA.SUBTYPES.MAIN, ENTITY_TYPES.CAMERA.SUBTYPES.GAME, ENTITY_TYPES.MESH.SUBTYPES.DEFAULT, ENTITY_TYPES.MESH.SUBTYPES.BOX, ENTITY_TYPES.MESH.SUBTYPES.SPHERE, ENTITY_TYPES.MESH.SUBTYPES.PLANE, ENTITY_TYPES.MESH.SUBTYPES.CYLINDER, ENTITY_TYPES.MESH.SUBTYPES.CONE, ENTITY_TYPES.MESH.SUBTYPES.CUBE, ENTITY_TYPES.MESH.SUBTYPES.LINE, ENTITY_TYPES.MESH.SUBTYPES.CURVE_LINE, ENTITY_TYPES.MESH.SUBTYPES.AXES, ENTITY_TYPES.MESH.SUBTYPES.GRID, ENTITY_TYPES.MESH.SUBTYPES.TARGET, ENTITY_TYPES.LABEL.SUBTYPES.DEFAULT, ENTITY_TYPES.LIGHT.SUBTYPES.DEFAULT, ENTITY_TYPES.LIGHT.SUBTYPES.AMBIENT, ENTITY_TYPES.LIGHT.SUBTYPES.SUN, ENTITY_TYPES.LIGHT.SUBTYPES.HEMISPHERE, ENTITY_TYPES.LIGHT.SUBTYPES.POINT, ENTITY_TYPES.LIGHT.SUBTYPES.SPOT, ENTITY_TYPES.AUDIO.SUBTYPES.DEFAULT, ENTITY_TYPES.AUDIO.SUBTYPES.DIRECTIONAL, ENTITY_TYPES.AUDIO.SUBTYPES.AMBIENT, ENTITY_TYPES.MODEL.SUBTYPES.DEFAULT, ENTITY_TYPES.SPRITE.SUBTYPES.DEFAULT, ENTITY_TYPES.SPRITE.SUBTYPES.ANIMATED_SPRITE, ENTITY_TYPES.PARTICLE.SUBTYPES.DEFAULT, ENTITY_TYPES.PARTICLE.SUBTYPES.EMITTER, ENTITY_TYPES.PARTICLE.SUBTYPES.SYSTEM, ENTITY_TYPES.PARTICLE.SUBTYPES.EMITTER_GROUP, ENTITY_TYPES.PARTICLE.SUBTYPES.PROTON_EMITTER, ENTITY_TYPES.PARTICLE.SUBTYPES.FIRE, ENTITY_TYPES.PARTICLE.SUBTYPES.EXPLOSION, ENTITY_TYPES.PARTICLE.SUBTYPES.TRAIL, ENTITY_TYPES.PARTICLE.SUBTYPES.RAIN, ENTITY_TYPES.PARTICLE.SUBTYPES.SNOW, ENTITY_TYPES.PARTICLE.SUBTYPES.FOUNTAIN, ENTITY_TYPES.SCENERY.SUBTYPES.DEFAULT, ENTITY_TYPES.SCENERY.SUBTYPES.SKY, ENTITY_TYPES.SCENERY.SUBTYPES.SKYBOX, ENTITY_TYPES.SCENERY.SUBTYPES.WATER, ENTITY_TYPES.SCENERY.SUBTYPES.MIRROR, ENTITY_TYPES.HELPER.SUBTYPES.GRID, ENTITY_TYPES.HELPER.SUBTYPES.AXES, ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE];
 const ENTITY_EVENTS = {
   DISPOSE: "DISPOSE",
   STATE_MACHINE: {
@@ -54788,9 +54790,9 @@ const createElementFromSelector = function (selector) {
   } catch (e) {
     return null;
   }
-};const DEFAULT_HEIGHT$2 = 600;
-const DEFAULT_WIDTH = 800;
-const DEFAULT_RATIO = DEFAULT_WIDTH / DEFAULT_HEIGHT$2;
+};const DEFAULT_HEIGHT$3 = 600;
+const DEFAULT_WIDTH$1 = 800;
+const DEFAULT_RATIO = DEFAULT_WIDTH$1 / DEFAULT_HEIGHT$3;
 const DEFAULT_CONFIG = {
   tests: [],
   scripts: {// [scriptId]: Script
@@ -54825,7 +54827,7 @@ const DEFAULT_CONFIG = {
     //handling useful informations about our camera.
     fov: 75,
     near: 0.1,
-    far: 100
+    far: 10000
   },
   ui: {
     enabled: true
@@ -54918,8 +54920,8 @@ let Config = /*#__PURE__*/function () {
     key: "getScreenDefaults",
     value: function getScreenDefaults() {
       return {
-        h: DEFAULT_HEIGHT$2,
-        w: DEFAULT_WIDTH,
+        h: DEFAULT_HEIGHT$3,
+        w: DEFAULT_WIDTH$1,
         ratio: DEFAULT_RATIO
       };
     }
@@ -56981,7 +56983,12 @@ var Physics$1 = new Physics();let Scene = /*#__PURE__*/function () {
   }, {
     key: "createCamera",
     value: function createCamera(camera) {
-      this.camera = camera;
+      this.camera = camera; // Enable layer 1 so camera can see editor-only objects (helpers, grid, gizmos)
+      // Mirror cameras only use layer 0, so they won't render these
+
+      if (this.camera && this.camera.getBody()) {
+        this.camera.getBody().layers.enable(1);
+      }
     }
   }, {
     key: "getDOMElement",
@@ -57270,7 +57277,9 @@ let Mouse = /*#__PURE__*/function (_EventDispatcher) {
     key: "createRayCaster",
     value: function createRayCaster() {
       if (!this.hasRaycaster()) {
-        this.raycaster = new Raycaster();
+        this.raycaster = new Raycaster(); // Enable layer 1 so raycaster can pick editor-only objects (mirrors, etc.)
+
+        this.raycaster.layers.enable(1);
         this.raycaster.setFromCamera(this.mouse, Scene$1.getCameraBody());
       }
     }
@@ -58241,7 +58250,7 @@ function applyMiddleware() {
 
 var thunk = createThunkMiddleware();
 thunk.withExtraArgument = createThunkMiddleware;var name = "mage-engine";
-var version$1 = "3.24.2";
+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 = {
@@ -59580,7 +59589,7 @@ if (!self.fetch) {
 
   return BaseCar;
 }(BaseScript);const DEFAULT_DISTANCE$2 = 5.0;
-const DEFAULT_HEIGHT$1 = 3.0;
+const DEFAULT_HEIGHT$2 = 3.0;
 const DEFAULT_HEIGHT_DAMPING = 2.0;
 const DEFAULT_LOOK_AT_HEIGHT = 1;
 const DEFAULT_ROTATION_SNAP_TIME = 0.3;
@@ -59603,7 +59612,7 @@ let SmoothCarFollow = /*#__PURE__*/function (_BaseScript) {
     value: function start(camera, options) {
       const {
         target,
-        height = DEFAULT_HEIGHT$1,
+        height = DEFAULT_HEIGHT$2,
         heightDamping = DEFAULT_HEIGHT_DAMPING,
         lookAtHeight = DEFAULT_LOOK_AT_HEIGHT,
         distance = DEFAULT_DISTANCE$2,
@@ -60657,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;
@@ -60897,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 => {
@@ -61516,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);
       }
     }
   }, {
@@ -61550,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);
+          }
+        });
       }
     }
   }, {
@@ -61577,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);
       }
     }
   }, {
@@ -61600,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",
@@ -61614,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);
       }
     }
   }, {
@@ -61841,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);
@@ -61871,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();
 
@@ -61921,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) {
@@ -62398,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()) {
@@ -62421,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.
@@ -63152,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() {
@@ -63160,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()
         };
       }
     }
@@ -63356,7 +63790,13 @@ let Sprite = /*#__PURE__*/function (_Element) {
 
     _this.setEntityType(ENTITY_TYPES.HELPER.TYPE);
 
-    _this.setEntitySubtype(ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE);
+    _this.setEntitySubtype(ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE); // Set to layer 1 ONLY so mirrors don't render helper sprites
+    // Main camera must enable layer 1 to see these
+
+
+    if (_this.hasBody()) {
+      _this.getBody().layers.set(1);
+    }
 
     return _this;
   }
@@ -63464,7 +63904,30 @@ let Sprite = /*#__PURE__*/function (_Element) {
         holderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       // Add THREE.js CameraHelper for visual feedback
-      this.helper = new CameraHelper(this.getBody());
+      this.helper = new CameraHelper(this.getBody()); // Set to layer 1 ONLY so mirrors don't render camera helper
+
+      this.helper.layers.set(1); // Disable depth test so helper always renders on top of sky/water
+
+      this.helper.renderOrder = 999; // Helper function to set depth properties on materials
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      setMaterialDepth(this.helper.material); // Also apply to all children
+
+      this.helper.traverse(child => {
+        child.layers.set(1);
+        child.renderOrder = 999;
+        setMaterialDepth(child.material);
+      });
       Scene$1.add(this.helper, null, false); // Add holder sprite for selection
 
       this.addHolder(holderName, holderSize);
@@ -63688,7 +64151,10 @@ let Sprite = /*#__PURE__*/function (_Element) {
       name: generateRandomName("GridHelper")
     };
     _this = _super.call(this, options);
-    const body = new GridHelper(size, division, color1, color2);
+    const body = new GridHelper(size, division, color1, color2); // Set to layer 1 ONLY so mirrors don't render the grid
+    // Main camera must enable layer 1 to see the grid
+
+    body.layers.set(1);
 
     _this.setBody({
       body
@@ -81196,6 +81662,10 @@ const glbParser = gltf => {
     if (object.isMesh) {
       object.castShadow = true;
     }
+
+    if (object.isSkinnedMesh) {
+      object.frustumCulled = false;
+    }
   });
   return {
     animations,
@@ -81215,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
@@ -81285,6 +81760,7 @@ const fbxParser = scene => {
 
   scene.traverse(node => {
     if (node.isSkinnedMesh) {
+      node.frustumCulled = false;
       processMaterial(node.material, material => material.skinning = true);
     }
   });
@@ -81342,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];
@@ -81355,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));
@@ -81367,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) {
@@ -81399,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;
@@ -86800,7 +87318,7 @@ let PixelEffect = /*#__PURE__*/function (_ShaderPass) {
  */
 
 const DEFAULT_THICKNESS = 0.003;
-const DEFAULT_COLOR = 0x000000;
+const DEFAULT_COLOR$1 = 0x000000;
 const DEFAULT_ALPHA = 1.0;
 const DEFAULT_KEEPALIVE = false;
 
@@ -86808,7 +87326,7 @@ let OutlineEffect = /*#__PURE__*/function () {
   function OutlineEffect(_ref) {
     let {
       defaultThickness = DEFAULT_THICKNESS,
-      defaultColor = DEFAULT_COLOR,
+      defaultColor = DEFAULT_COLOR$1,
       defaultAlpha = DEFAULT_ALPHA,
       defaultKeepAlive = DEFAULT_KEEPALIVE
     } = _ref;
@@ -90923,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);
 
@@ -90994,7 +91515,38 @@ var Particles$1 = new Particles();let Orbit = /*#__PURE__*/function (_EventDispa
     _this.domElement = domElement !== undefined ? domElement : document;
     _this.visible = false;
     _this.gizmo = new Gizmo();
-    _this.plane = new TransformControlsPlane();
+    _this.plane = new TransformControlsPlane(); // Set gizmo and plane to layer 1 ONLY so mirrors don't render them
+    // Main camera must enable layer 1 to see these
+
+    _this.gizmo.layers.set(1);
+
+    _this.plane.layers.set(1); // Helper function to set depth properties on materials
+
+
+    const setMaterialDepth = material => {
+      if (!material) return;
+      const mats = Array.isArray(material) ? material : [material];
+      mats.forEach(mat => {
+        mat.depthTest = false;
+        mat.depthWrite = false;
+        mat.transparent = true;
+        mat.needsUpdate = true;
+      });
+    }; // Also set layer 1 on all children recursively
+    // Set high renderOrder and disable depthTest so gizmos render on top of sky/water
+
+
+    _this.gizmo.traverse(child => {
+      child.layers.set(1);
+      child.renderOrder = 999;
+      setMaterialDepth(child.material);
+    });
+
+    _this.plane.traverse(child => {
+      child.layers.set(1);
+      child.renderOrder = 999;
+      setMaterialDepth(child.material);
+    });
 
     _this.add(_this.gizmo);
 
@@ -91048,7 +91600,10 @@ var Particles$1 = new Particles();let Orbit = /*#__PURE__*/function (_EventDispa
 
     _this.setAndDispatch("showZ", true);
 
-    _this.ray = new Raycaster();
+    _this.ray = new Raycaster(); // Enable layer 1 so raycaster can pick gizmo objects (which are on layer 1)
+
+    _this.ray.layers.enable(1);
+
     _this._tempVector = new Vector3$1();
     _this._tempVector2 = new Vector3$1();
     _this._tempQuaternion = new Quaternion();
@@ -91172,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",
@@ -93015,7 +93582,30 @@ let PointLight$1 = /*#__PURE__*/function (_Light) {
         holderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       this.helper = new PointLightHelper(this.getBody(), 2, GREEN$5);
-      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera);
+      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera); // Set to layer 1 ONLY so mirrors don't render light helpers
+      // Disable depth test so helpers always render on top of sky/water
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      [this.helper, this.shadowHelper].forEach(helper => {
+        helper.layers.set(1);
+        helper.renderOrder = 999;
+        setMaterialDepth(helper.material);
+        helper.traverse(child => {
+          child.layers.set(1);
+          child.renderOrder = 999;
+          setMaterialDepth(child.material);
+        });
+      });
       Scene$1.add(this.helper, null, false);
       Scene$1.add(this.shadowHelper, null, false);
       this.addHolder(holderName, holderSize);
@@ -93451,7 +94041,30 @@ let SpotLight$1 = /*#__PURE__*/function (_Light) {
         targetHolderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       this.helper = new SpotLightHelper(this.getBody(), GREEN$4);
-      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera);
+      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera); // Set to layer 1 ONLY so mirrors don't render light helpers
+      // Disable depth test so helpers always render on top of sky/water
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      [this.helper, this.shadowHelper].forEach(helper => {
+        helper.layers.set(1);
+        helper.renderOrder = 999;
+        setMaterialDepth(helper.material);
+        helper.traverse(child => {
+          child.layers.set(1);
+          child.renderOrder = 999;
+          setMaterialDepth(child.material);
+        });
+      });
       Scene$1.add(this.helper, null, false);
       Scene$1.add(this.shadowHelper, null, false);
       this.addHolder(holderName, holderSize);
@@ -93899,7 +94512,28 @@ let HemisphereLight$1 = /*#__PURE__*/function (_Light) {
         holderName = "hemispherelightholder",
         holderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      this.helper = new HemisphereLightHelper(this.getBody(), 2, GREEN$3);
+      this.helper = new HemisphereLightHelper(this.getBody(), 2, GREEN$3); // Set to layer 1 ONLY so mirrors don't render light helpers
+      // Disable depth test so helpers always render on top of sky/water
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      this.helper.layers.set(1);
+      this.helper.renderOrder = 999;
+      setMaterialDepth(this.helper.material);
+      this.helper.traverse(child => {
+        child.layers.set(1);
+        child.renderOrder = 999;
+        setMaterialDepth(child.material);
+      });
       this.addHolder(holderName, holderSize);
       this.isUsingHelper = true;
       Scene$1.add(this.helper, null, false);
@@ -94145,7 +94779,30 @@ let SunLight$1 = /*#__PURE__*/function (_Light) {
         targetHolderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       this.helper = new DirectionalLightHelper(this.getBody(), 5);
-      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera);
+      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera); // Set to layer 1 ONLY so mirrors don't render light helpers
+      // Disable depth test so helpers always render on top of sky/water
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      [this.helper, this.shadowHelper].forEach(helper => {
+        helper.layers.set(1);
+        helper.renderOrder = 999;
+        setMaterialDepth(helper.material);
+        helper.traverse(child => {
+          child.layers.set(1);
+          child.renderOrder = 999;
+          setMaterialDepth(child.material);
+        });
+      });
       Scene$1.add(this.helper, null, false);
       Scene$1.add(this.shadowHelper, null, false);
       this.addHolder(holderName, holderSize);
@@ -94965,9 +95622,11 @@ let Sky = /*#__PURE__*/function (_Element) {
       fragmentShader: SkyShader.fragmentShader(),
       vertexShader: SkyShader.vertexShader(),
       uniforms: UniformsUtils.clone(SkyShader.uniforms()),
-      side: BackSide
+      side: BackSide,
+      depthWrite: false
     });
     const body = new Mesh(new BoxGeometry(1, 1, 1), material);
+    body.renderOrder = -1000;
 
     _this.setBody({
       body
@@ -95026,6 +95685,20 @@ let Sky = /*#__PURE__*/function (_Element) {
       this.setData("mieDirectionalG", value);
       this.getBody().material.uniforms.mieDirectionalG.value = value;
     }
+  }, {
+    key: "setSunInclination",
+    value: function setSunInclination(value) {
+      const azimuth = this.getData("sunAzimuth") || 0.1;
+      const distance = this.getData("sunDistance") || 100;
+      this.setSun(value, azimuth, distance);
+    }
+  }, {
+    key: "setSunAzimuth",
+    value: function setSunAzimuth(value) {
+      const inclination = this.getData("sunInclination") || 0.21;
+      const distance = this.getData("sunDistance") || 100;
+      this.setSun(inclination, value, distance);
+    }
   }, {
     key: "setSun",
     value: function setSun(inclination, azimuth, distance) {
@@ -95049,6 +95722,731 @@ let Sky = /*#__PURE__*/function (_Element) {
   }]);
 
   return Sky;
+}(Element$1);let Skybox = /*#__PURE__*/function (_Element) {
+  _inherits(Skybox, _Element);
+
+  var _super = _createSuper(Skybox);
+
+  function Skybox(options) {
+    var _this;
+
+    _classCallCheck(this, Skybox);
+
+    const {
+      name = generateRandomName("Skybox"),
+      texture = "skybox",
+      ...rest
+    } = options;
+    _this = _super.call(this, {
+      name,
+      texture,
+      ...rest
+    });
+    _this.cubeMap = typeof texture === "string" ? Images$1.get(texture) : texture;
+    const material = new MeshBasicMaterial({
+      envMap: _this.cubeMap,
+      side: BackSide
+    });
+    const geometry = new BoxGeometry(1000000, 1000000, 1000000);
+
+    _this.setBody({
+      material,
+      geometry
+    });
+
+    _this.setEntityType(ENTITY_TYPES.SCENERY.TYPE);
+
+    _this.setEntitySubtype(ENTITY_TYPES.SCENERY.SUBTYPES.SKYBOX);
+
+    return _this;
+  }
+
+  _createClass(Skybox, null, [{
+    key: "create",
+    value: function create(data) {
+      return new Skybox(data.options || data);
+    }
+  }]);
+
+  return Skybox;
+}(Element$1);var WaterMesh = function (geometry, options) {
+  Mesh.call(this, geometry);
+  var scope = this;
+  options = options || {};
+  var textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
+  var textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
+  var clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
+  var alpha = options.alpha !== undefined ? options.alpha : 1.0;
+  var time = options.time !== undefined ? options.time : 0.0;
+  var normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
+  var sunDirection = options.sunDirection !== undefined ? options.sunDirection : new Vector3$1(0.70707, 0.70707, 0.0);
+  var sunColor = new Color$1(options.sunColor !== undefined ? options.sunColor : 0xffffff);
+  var waterColor = new Color$1(options.waterColor !== undefined ? options.waterColor : 0x7F7F7F);
+  var eye = options.eye !== undefined ? options.eye : new Vector3$1(0, 0, 0);
+  var distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
+  var side = options.side !== undefined ? options.side : FrontSide;
+  var fog = options.fog !== undefined ? options.fog : false; //
+
+  var mirrorPlane = new Plane$1();
+  var normal = new Vector3$1();
+  var mirrorWorldPosition = new Vector3$1();
+  var cameraWorldPosition = new Vector3$1();
+  var rotationMatrix = new Matrix4();
+  var lookAtPosition = new Vector3$1(0, 0, -1);
+  var clipPlane = new Vector4();
+  var view = new Vector3$1();
+  var target = new Vector3$1();
+  var q = new Vector4();
+  var textureMatrix = new Matrix4();
+  var mirrorCamera = new PerspectiveCamera();
+  var parameters = {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBFormat
+  };
+  var renderTarget = new WebGLRenderTarget(textureWidth, textureHeight, parameters);
+
+  if (!MathUtils.isPowerOfTwo(textureWidth) || !MathUtils.isPowerOfTwo(textureHeight)) {
+    renderTarget.texture.generateMipmaps = false;
+  }
+
+  var mirrorShader = {
+    uniforms: UniformsUtils.merge([UniformsLib['fog'], UniformsLib['lights'], {
+      'normalSampler': {
+        value: null
+      },
+      'mirrorSampler': {
+        value: null
+      },
+      'alpha': {
+        value: 1.0
+      },
+      'time': {
+        value: 0.0
+      },
+      'size': {
+        value: 1.0
+      },
+      'distortionScale': {
+        value: 20.0
+      },
+      'textureMatrix': {
+        value: new Matrix4()
+      },
+      'sunColor': {
+        value: new Color$1(0x7F7F7F)
+      },
+      'sunDirection': {
+        value: new Vector3$1(0.70707, 0.70707, 0)
+      },
+      'eye': {
+        value: new Vector3$1()
+      },
+      'waterColor': {
+        value: new Color$1(0x555555)
+      }
+    }]),
+    vertexShader: ['uniform mat4 textureMatrix;', 'uniform float time;', 'varying vec4 mirrorCoord;', 'varying vec4 worldPosition;', '#include <common>', '#include <fog_pars_vertex>', '#include <shadowmap_pars_vertex>', '#include <logdepthbuf_pars_vertex>', 'void main() {', '	mirrorCoord = modelMatrix * vec4( position, 1.0 );', '	worldPosition = mirrorCoord.xyzw;', '	mirrorCoord = textureMatrix * mirrorCoord;', '	vec4 mvPosition =  modelViewMatrix * vec4( position, 1.0 );', '	gl_Position = projectionMatrix * mvPosition;', '#include <beginnormal_vertex>', '#include <defaultnormal_vertex>', '#include <logdepthbuf_vertex>', '#include <fog_vertex>', '#include <shadowmap_vertex>', '}'].join('\n'),
+    fragmentShader: ['uniform sampler2D mirrorSampler;', 'uniform float alpha;', 'uniform float time;', 'uniform float size;', 'uniform float distortionScale;', 'uniform sampler2D normalSampler;', 'uniform vec3 sunColor;', 'uniform vec3 sunDirection;', 'uniform vec3 eye;', 'uniform vec3 waterColor;', 'varying vec4 mirrorCoord;', 'varying vec4 worldPosition;', 'vec4 getNoise( vec2 uv ) {', '	vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);', '	vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );', '	vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );', '	vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );', '	vec4 noise = texture2D( normalSampler, uv0 ) +', '		texture2D( normalSampler, uv1 ) +', '		texture2D( normalSampler, uv2 ) +', '		texture2D( normalSampler, uv3 );', '	return noise * 0.5 - 1.0;', '}', 'void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor ) {', '	vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );', '	float direction = max( 0.0, dot( eyeDirection, reflection ) );', '	specularColor += pow( direction, shiny ) * sunColor * spec;', '	diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;', '}', '#include <common>', '#include <packing>', '#include <bsdfs>', '#include <fog_pars_fragment>', '#include <logdepthbuf_pars_fragment>', '#include <lights_pars_begin>', '#include <shadowmap_pars_fragment>', '#include <shadowmask_pars_fragment>', 'void main() {', '#include <logdepthbuf_fragment>', '	vec4 noise = getNoise( worldPosition.xz * size );', '	vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );', '	vec3 diffuseLight = vec3(0.0);', '	vec3 specularLight = vec3(0.0);', '	vec3 worldToEye = eye-worldPosition.xyz;', '	vec3 eyeDirection = normalize( worldToEye );', '	sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );', '	float distance = length(worldToEye);', '	vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;', '	vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );', '	float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );', '	float rf0 = 0.3;', '	float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );', '	vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;', '	vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);', '	vec3 outgoingLight = albedo;', '	gl_FragColor = vec4( outgoingLight, alpha );', '#include <tonemapping_fragment>', '#include <fog_fragment>', '}'].join('\n')
+  };
+  var material = new ShaderMaterial({
+    fragmentShader: mirrorShader.fragmentShader,
+    vertexShader: mirrorShader.vertexShader,
+    uniforms: UniformsUtils.clone(mirrorShader.uniforms),
+    lights: true,
+    side: side,
+    fog: fog,
+    depthWrite: false // Water should not write to depth buffer so gizmos render on top
+
+  });
+  material.uniforms['mirrorSampler'].value = renderTarget.texture;
+  material.uniforms['textureMatrix'].value = textureMatrix;
+  material.uniforms['alpha'].value = alpha;
+  material.uniforms['time'].value = time;
+  material.uniforms['normalSampler'].value = normalSampler;
+  material.uniforms['sunColor'].value = sunColor;
+  material.uniforms['waterColor'].value = waterColor;
+  material.uniforms['sunDirection'].value = sunDirection;
+  material.uniforms['distortionScale'].value = distortionScale;
+  material.uniforms['eye'].value = eye;
+  scope.material = material;
+
+  scope.onBeforeRender = function (renderer, scene, camera) {
+    mirrorWorldPosition.setFromMatrixPosition(scope.matrixWorld);
+    cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+    rotationMatrix.extractRotation(scope.matrixWorld);
+    normal.set(0, 0, 1);
+    normal.applyMatrix4(rotationMatrix);
+    view.subVectors(mirrorWorldPosition, cameraWorldPosition); // Avoid rendering when mirror is facing away
+
+    if (view.dot(normal) > 0) return;
+    view.reflect(normal).negate();
+    view.add(mirrorWorldPosition);
+    rotationMatrix.extractRotation(camera.matrixWorld);
+    lookAtPosition.set(0, 0, -1);
+    lookAtPosition.applyMatrix4(rotationMatrix);
+    lookAtPosition.add(cameraWorldPosition);
+    target.subVectors(mirrorWorldPosition, lookAtPosition);
+    target.reflect(normal).negate();
+    target.add(mirrorWorldPosition);
+    mirrorCamera.position.copy(view);
+    mirrorCamera.up.set(0, 1, 0);
+    mirrorCamera.up.applyMatrix4(rotationMatrix);
+    mirrorCamera.up.reflect(normal);
+    mirrorCamera.lookAt(target);
+    mirrorCamera.far = camera.far; // Used in WebGLBackground
+
+    mirrorCamera.updateMatrixWorld();
+    mirrorCamera.projectionMatrix.copy(camera.projectionMatrix); // Update the texture matrix
+
+    textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+    textureMatrix.multiply(mirrorCamera.projectionMatrix);
+    textureMatrix.multiply(mirrorCamera.matrixWorldInverse); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+    // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+
+    mirrorPlane.setFromNormalAndCoplanarPoint(normal, mirrorWorldPosition);
+    mirrorPlane.applyMatrix4(mirrorCamera.matrixWorldInverse);
+    clipPlane.set(mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant);
+    var projectionMatrix = mirrorCamera.projectionMatrix;
+    q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+    q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+    q.z = -1.0;
+    q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
+
+    clipPlane.multiplyScalar(2.0 / clipPlane.dot(q)); // Replacing the third row of the projection matrix
+
+    projectionMatrix.elements[2] = clipPlane.x;
+    projectionMatrix.elements[6] = clipPlane.y;
+    projectionMatrix.elements[10] = clipPlane.z + 1.0 - clipBias;
+    projectionMatrix.elements[14] = clipPlane.w;
+    eye.setFromMatrixPosition(camera.matrixWorld); // Render
+
+    if (renderer.outputEncoding !== LinearEncoding) {
+      console.warn('THREE.WaterMesh: WebGLRenderer must use LinearEncoding as outputEncoding.');
+
+      scope.onBeforeRender = function () {};
+
+      return;
+    }
+
+    if (renderer.toneMapping !== NoToneMapping) {
+      console.warn('THREE.WaterMesh: WebGLRenderer must use NoToneMapping as toneMapping.');
+
+      scope.onBeforeRender = function () {};
+
+      return;
+    }
+
+    var currentRenderTarget = renderer.getRenderTarget();
+    var currentXrEnabled = renderer.xr.enabled;
+    var currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+    scope.visible = false;
+    renderer.xr.enabled = false; // Avoid camera modification and recursion
+
+    renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
+
+    renderer.setRenderTarget(renderTarget);
+    renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
+
+    if (renderer.autoClear === false) renderer.clear();
+    renderer.render(scene, mirrorCamera);
+    scope.visible = true;
+    renderer.xr.enabled = currentXrEnabled;
+    renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+    renderer.setRenderTarget(currentRenderTarget); // Restore viewport
+
+    var viewport = camera.viewport;
+
+    if (viewport !== undefined) {
+      renderer.state.viewport(viewport);
+    }
+  };
+};
+
+WaterMesh.prototype = Object.create(Mesh.prototype);
+WaterMesh.prototype.constructor = WaterMesh;
+const DEFAULT_WATER_HEIGHT = 512;
+const DEFAULT_WATER_WIDTH = 512;
+const DEFAULT_WATER_ALPHA = 1.0;
+const DEFAULT_WATER_DISTORTION_SCALE = 3.7; // Create a simple procedural normal map for water when no texture is available
+
+const createDefaultWaterNormalTexture = () => {
+  const size = 256;
+  const data = new Uint8Array(size * size * 4);
+
+  for (let i = 0; i < size; i++) {
+    for (let j = 0; j < size; j++) {
+      const idx = (i * size + j) * 4; // Create a subtle wave pattern using sine waves
+
+      const wave1 = Math.sin(i * 0.1) * 0.5 + 0.5;
+      const wave2 = Math.sin(j * 0.1) * 0.5 + 0.5;
+      const wave3 = Math.sin((i + j) * 0.05) * 0.5 + 0.5; // Normal map colors (x, y, z mapped to r, g, b)
+      // Flat normal pointing up is (0.5, 0.5, 1.0) in 0-1 range
+
+      data[idx] = 128 + (wave1 - 0.5) * 20; // R (X normal)
+
+      data[idx + 1] = 128 + (wave2 - 0.5) * 20; // G (Y normal)
+
+      data[idx + 2] = 255 * (0.9 + wave3 * 0.1); // B (Z normal - mostly up)
+
+      data[idx + 3] = 255; // A
+    }
+  }
+
+  const texture = new DataTexture(data, size, size, RGBAFormat, UnsignedByteType);
+  texture.wrapS = texture.wrapT = RepeatWrapping$1;
+  texture.needsUpdate = true;
+  return texture;
+};
+
+let Water = /*#__PURE__*/function (_Element) {
+  _inherits(Water, _Element);
+
+  var _super = _createSuper(Water);
+
+  function Water() {
+    var _thisSuper, _this;
+
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _classCallCheck(this, Water);
+
+    _this = _super.call(this, options);
+
+    _defineProperty$1(_assertThisInitialized(_this), "update", dt => {
+      _get((_thisSuper = _assertThisInitialized(_this), _getPrototypeOf(Water.prototype)), "update", _thisSuper).call(_thisSuper, dt);
+
+      _this.getBody().material.uniforms.time.value += dt;
+    });
+
+    const {
+      texture,
+      textureNormalName,
+      width = DEFAULT_WATER_WIDTH,
+      height = DEFAULT_WATER_HEIGHT,
+      textureWidth = DEFAULT_WATER_WIDTH,
+      textureHeight = DEFAULT_WATER_HEIGHT,
+      alpha = DEFAULT_WATER_ALPHA,
+      distortionScale = DEFAULT_WATER_DISTORTION_SCALE
+    } = options; // Get water normal texture, falling back to a procedural one if not available
+
+    let waterNormals = texture || Images$1.get(textureNormalName || 'waterNormal');
+
+    if (!waterNormals || waterNormals === false) {
+      waterNormals = createDefaultWaterNormalTexture();
+    } else {
+      waterNormals.wrapS = waterNormals.wrapT = RepeatWrapping$1;
+    }
+
+    const body = new WaterMesh(new PlaneGeometry(width * 500, height * 500), {
+      textureWidth,
+      textureHeight,
+      waterNormals,
+      alpha,
+      sunDirection: new Vector3$1(-0.5773502691896258, 0.5773502691896258, -0.5773502691896258),
+      sunColor: 0xffffff,
+      waterColor: 0x001e0f,
+      distortionScale,
+      fog: Scene$1.getScene().fog !== undefined
+    });
+
+    _this.setBody({
+      body
+    });
+
+    _this.setEntityType(ENTITY_TYPES.SCENERY.TYPE);
+
+    _this.setEntitySubtype(ENTITY_TYPES.SCENERY.SUBTYPES.WATER); // Store original dimensions for scaling calculations
+
+
+    _this.setData("originalWidth", width);
+
+    _this.setData("originalHeight", height);
+
+    _this.setData("width", width);
+
+    _this.setData("height", height);
+
+    _this.setData("alpha", alpha);
+
+    _this.setData("distortionScale", distortionScale);
+
+    _this.setData("waterColor", 0x001e0f);
+
+    _this.setData("sunColor", 0xffffff);
+
+    _this.setData("sunDirection", {
+      x: -0.577,
+      y: 0.577,
+      z: -0.577
+    });
+
+    _this.setRotation({
+      x: -Math.PI / 2
+    });
+
+    return _this;
+  }
+
+  _createClass(Water, [{
+    key: "setSize",
+    value: function setSize(size) {
+      const clampedSize = clamp(size, 0.1, 100);
+      this.setData("size", clampedSize);
+      this.getBody().material.uniforms.size.value = clampedSize;
+    }
+  }, {
+    key: "setAlpha",
+    value: function setAlpha(alpha) {
+      const clampedAlpha = clamp(alpha, 0, 1);
+      this.setData("alpha", clampedAlpha);
+      this.getBody().material.uniforms.alpha.value = clampedAlpha;
+    }
+  }, {
+    key: "setDistortionScale",
+    value: function setDistortionScale(scale) {
+      const clampedScale = clamp(scale, 0, 100);
+      this.setData("distortionScale", clampedScale);
+      this.getBody().material.uniforms.distortionScale.value = clampedScale;
+    }
+  }, {
+    key: "setWaterColor",
+    value: function setWaterColor(color) {
+      this.setData("waterColor", color);
+      const colorValue = typeof color === 'object' && color.hex ? color.hex : color;
+      this.getBody().material.uniforms.waterColor.value.set(colorValue);
+    }
+  }, {
+    key: "setSunColor",
+    value: function setSunColor(color) {
+      this.setData("sunColor", color);
+      const colorValue = typeof color === 'object' && color.hex ? color.hex : color;
+      this.getBody().material.uniforms.sunColor.value.set(colorValue);
+    }
+  }, {
+    key: "setSunDirection",
+    value: function setSunDirection(x, y, z) {
+      this.setData("sunDirection", {
+        x,
+        y,
+        z
+      });
+      this.getBody().material.uniforms.sunDirection.value.set(x, y, z).normalize();
+    }
+  }, {
+    key: "setWidth",
+    value: function setWidth(width) {
+      const clampedWidth = clamp(width, 1, 10000);
+      this.setData("width", clampedWidth);
+
+      this._recreateGeometry();
+    }
+  }, {
+    key: "setHeight",
+    value: function setHeight(height) {
+      const clampedHeight = clamp(height, 1, 10000);
+      this.setData("height", clampedHeight);
+
+      this._recreateGeometry();
+    }
+  }, {
+    key: "_recreateGeometry",
+    value: function _recreateGeometry() {
+      const width = this.getData("width") || 1000;
+      const height = this.getData("height") || 1000; // Dispose old geometry
+
+      if (this.getBody().geometry) {
+        this.getBody().geometry.dispose();
+      } // Create new geometry with updated dimensions
+
+
+      this.getBody().geometry = new PlaneGeometry(width * 500, height * 500);
+    }
+  }], [{
+    key: "create",
+    value: function create(data) {
+      return new Water(data.options || data);
+    }
+  }]);
+
+  return Water;
+}(Element$1);const DEFAULT_TEXTURE_WIDTH = 512;
+const DEFAULT_TEXTURE_HEIGHT = 512;
+const DEFAULT_CLIP_BIAS = 0.003;
+const DEFAULT_COLOR = 0x7f7f7f;
+const DEFAULT_WIDTH = 100;
+const DEFAULT_HEIGHT$1 = 100; // Mirror shader uniforms
+
+const mirrorUniforms = () => ({
+  "mirrorColor": {
+    type: "c",
+    value: new Color$1(0x7F7F7F)
+  },
+  "mirrorSampler": {
+    type: "t",
+    value: null
+  },
+  "textureMatrix": {
+    type: "m4",
+    value: new Matrix4()
+  }
+}); // Mirror vertex shader
+
+
+const mirrorVertexShader = `
+    uniform mat4 textureMatrix;
+    varying vec4 mirrorCoord;
+    void main() {
+        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+        mirrorCoord = textureMatrix * worldPosition;
+        gl_Position = projectionMatrix * mvPosition;
+    }
+`; // Mirror fragment shader
+
+const mirrorFragmentShader = `
+    uniform vec3 mirrorColor;
+    uniform sampler2D mirrorSampler;
+    varying vec4 mirrorCoord;
+    float blendOverlay(float base, float blend) {
+        return(base < 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));
+    }
+    void main() {
+        vec4 color = texture2DProj(mirrorSampler, mirrorCoord);
+        color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);
+        gl_FragColor = color;
+    }
+`;
+/**
+ * MirrorElement wraps mirror reflection rendering to fit the Entity system.
+ * - Entity lifecycle management (serialization, deserialization)
+ * - Integration with the editor's hierarchy and inspector
+ * - Automatic render loop hook via onBeforeRender
+ */
+
+let MirrorElement = /*#__PURE__*/function (_Element) {
+  _inherits(MirrorElement, _Element);
+
+  var _super = _createSuper(MirrorElement);
+
+  function MirrorElement() {
+    var _this;
+
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _classCallCheck(this, MirrorElement);
+
+    const {
+      name = generateRandomName("Mirror"),
+      textureWidth = DEFAULT_TEXTURE_WIDTH,
+      textureHeight = DEFAULT_TEXTURE_HEIGHT,
+      clipBias = DEFAULT_CLIP_BIAS,
+      color = DEFAULT_COLOR,
+      width = DEFAULT_WIDTH,
+      height = DEFAULT_HEIGHT$1
+    } = options;
+    const cleanedOptions = {
+      textureWidth,
+      textureHeight,
+      clipBias,
+      color,
+      width,
+      height
+    };
+    _this = _super.call(this, {
+      name,
+      ...cleanedOptions
+    }); // Store references
+
+    _this.renderer = Scene$1.getRenderer();
+    _this.clipBias = clipBias;
+    _this.textureWidth = textureWidth;
+    _this.textureHeight = textureHeight; // Create render target for mirror reflection
+
+    const parameters = {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      format: RGBFormat,
+      stencilBuffer: false
+    };
+    _this.renderTarget = new WebGLRenderTarget(textureWidth, textureHeight, parameters); // Create mirror camera - only renders layer 0, excludes layer 1 (editor-only objects)
+
+    _this.mirrorCamera = new PerspectiveCamera();
+    _this.mirrorCamera.matrixAutoUpdate = true;
+
+    _this.mirrorCamera.layers.set(0); // Only see layer 0
+    // Create mirror material
+
+
+    _this.mirrorMaterial = new ShaderMaterial({
+      fragmentShader: mirrorFragmentShader,
+      vertexShader: mirrorVertexShader,
+      uniforms: UniformsUtils.clone(mirrorUniforms())
+    });
+    _this.mirrorMaterial.uniforms.mirrorSampler.value = _this.renderTarget.texture;
+    _this.mirrorMaterial.uniforms.mirrorColor.value = new Color$1(color); // Reflection calculation helpers
+
+    _this.mirrorPlane = new Plane$1();
+    _this.normal = new Vector3$1(0, 0, 1);
+    _this.mirrorWorldPosition = new Vector3$1();
+    _this.cameraWorldPosition = new Vector3$1();
+    _this.rotationMatrix = new Matrix4();
+    _this.lookAtPosition = new Vector3$1(0, 0, -1);
+    _this.clipPlane = new Vector4();
+    _this.textureMatrix = new Matrix4(); // Create a plane geometry for the mirror surface
+
+    const geometry = new PlaneGeometry(width, height);
+    const body = new Mesh(geometry, _this.mirrorMaterial); // Set mirror to layer 1 ONLY so it doesn't reflect itself
+    // The mirrorCamera only sees layer 0, so it won't render the mirror
+    // Main camera has layer 1 enabled so it can see the mirror
+
+    body.layers.set(1); // Hook mirror rendering into THREE.js render loop
+
+    const self = _assertThisInitialized(_this);
+
+    body.onBeforeRender = function (renderer, scene, camera) {
+      self.renderMirror(renderer, scene, camera, this);
+    };
+
+    _this.setBody({
+      body
+    });
+
+    _this.setEntityType(ENTITY_TYPES.SCENERY.TYPE);
+
+    _this.setEntitySubtype(ENTITY_TYPES.SCENERY.SUBTYPES.MIRROR);
+
+    return _this;
+  }
+
+  _createClass(MirrorElement, [{
+    key: "renderMirror",
+    value: function renderMirror(renderer, scene, camera, mesh) {
+      // Update matrices
+      mesh.updateMatrixWorld();
+      camera.updateMatrixWorld();
+      this.mirrorWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
+      this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+      this.rotationMatrix.extractRotation(mesh.matrixWorld);
+      this.normal.set(0, 0, 1);
+      this.normal.applyMatrix4(this.rotationMatrix);
+      const view = this.mirrorWorldPosition.clone().sub(this.cameraWorldPosition);
+      view.reflect(this.normal).negate();
+      view.add(this.mirrorWorldPosition);
+      this.rotationMatrix.extractRotation(camera.matrixWorld);
+      this.lookAtPosition.set(0, 0, -1);
+      this.lookAtPosition.applyMatrix4(this.rotationMatrix);
+      this.lookAtPosition.add(this.cameraWorldPosition);
+      const target = this.mirrorWorldPosition.clone().sub(this.lookAtPosition);
+      target.reflect(this.normal).negate();
+      target.add(this.mirrorWorldPosition);
+      this.mirrorCamera.position.copy(view);
+      this.mirrorCamera.up.set(0, -1, 0);
+      this.mirrorCamera.up.applyMatrix4(this.rotationMatrix);
+      this.mirrorCamera.up.reflect(this.normal).negate();
+      this.mirrorCamera.lookAt(target);
+      this.mirrorCamera.far = camera.far;
+      this.mirrorCamera.updateProjectionMatrix();
+      this.mirrorCamera.projectionMatrix.copy(camera.projectionMatrix);
+      this.mirrorCamera.updateMatrixWorld();
+      this.mirrorCamera.matrixWorldInverse.copy(this.mirrorCamera.matrixWorld).invert(); // Update the texture matrix
+
+      this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+      this.textureMatrix.multiply(this.mirrorCamera.projectionMatrix);
+      this.textureMatrix.multiply(this.mirrorCamera.matrixWorldInverse); // Update clip plane
+
+      this.mirrorPlane.setFromNormalAndCoplanarPoint(this.normal, this.mirrorWorldPosition);
+      this.mirrorPlane.applyMatrix4(this.mirrorCamera.matrixWorldInverse);
+      this.clipPlane.set(this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant);
+      const q = new Vector4();
+      const projectionMatrix = this.mirrorCamera.projectionMatrix;
+      q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+      q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+      q.z = -1.0;
+      q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
+
+      this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(q)); // Replacing the third row of the projection matrix
+
+      projectionMatrix.elements[2] = this.clipPlane.x;
+      projectionMatrix.elements[6] = this.clipPlane.y;
+      projectionMatrix.elements[10] = this.clipPlane.z + 1.0 - this.clipBias;
+      projectionMatrix.elements[14] = this.clipPlane.w;
+      this.mirrorMaterial.uniforms.textureMatrix.value = this.textureMatrix; // Render the mirrored scene
+
+      mesh.visible = false;
+      const currentRenderTarget = renderer.getRenderTarget(); // Save current clear color and set to scene background if available
+
+      const currentClearColor = renderer.getClearColor(new Color$1());
+      const currentClearAlpha = renderer.getClearAlpha(); // Use scene background color for mirror clear if available
+
+      if (scene.background && scene.background.isColor) {
+        renderer.setClearColor(scene.background, 1);
+      }
+
+      renderer.setRenderTarget(this.renderTarget);
+      renderer.clear();
+      renderer.render(scene, this.mirrorCamera);
+      renderer.setRenderTarget(currentRenderTarget); // Restore clear color
+
+      renderer.setClearColor(currentClearColor, currentClearAlpha);
+      mesh.visible = true;
+    }
+    /**
+     * Set the mirror color
+     * @param {number|string} color - The color value (hex number or string)
+     */
+
+  }, {
+    key: "setColor",
+    value: function setColor(color) {
+      this.setData("color", color);
+
+      if (this.mirrorMaterial) {
+        this.mirrorMaterial.uniforms.mirrorColor.value.set(color);
+      }
+    }
+    /**
+     * Set the clip bias for the mirror
+     * @param {number} bias - The clip bias value
+     */
+
+  }, {
+    key: "setClipBias",
+    value: function setClipBias(bias) {
+      this.setData("clipBias", bias);
+      this.clipBias = bias;
+    }
+    /**
+     * Dispose the mirror and its resources
+     */
+
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (this.renderTarget) {
+        this.renderTarget.dispose();
+      }
+
+      if (this.mirrorMaterial) {
+        this.mirrorMaterial.dispose();
+      }
+
+      _get(_getPrototypeOf(MirrorElement.prototype), "dispose", this).call(this);
+    }
+    /**
+     * Factory method for deserialization
+     * @param {object} data - The serialized data
+     * @returns {MirrorElement} A new MirrorElement instance
+     */
+
+  }], [{
+    key: "create",
+    value: function create(data) {
+      return new MirrorElement(data.options || data);
+    }
+  }]);
+
+  return MirrorElement;
 }(Element$1);let Importer = /*#__PURE__*/function () {
   function Importer() {
     _classCallCheck(this, Importer);
@@ -95300,6 +96698,57 @@ let Sky = /*#__PURE__*/function (_Element) {
         sky.setSun(sunInclination, sunAzimuth, sunDistance);
       }
     }
+  }, {
+    key: "completeSkyboxCreation",
+    value: function completeSkyboxCreation(skybox, skyboxData, options) {
+      Importer.completeCommonCreationSteps(skybox, skyboxData, { ...options,
+        skipScale: true
+      }); // Skybox texture is set during construction via the texture option
+      // No additional setup needed beyond common creation steps
+    }
+  }, {
+    key: "completeWaterCreation",
+    value: function completeWaterCreation(water, waterData, options) {
+      Importer.completeCommonCreationSteps(water, waterData, { ...options,
+        skipScale: true
+      });
+      const waterOptions = waterData.options || {};
+      const {
+        alpha,
+        distortionScale,
+        size
+      } = waterOptions;
+
+      if (alpha !== undefined) {
+        water.setAlpha(alpha);
+      }
+
+      if (distortionScale !== undefined) {
+        water.setDistortionScale(distortionScale);
+      }
+
+      if (size !== undefined) {
+        water.setSize(size);
+      }
+    }
+  }, {
+    key: "completeMirrorCreation",
+    value: function completeMirrorCreation(mirror, mirrorData, options) {
+      Importer.completeCommonCreationSteps(mirror, mirrorData, options);
+      const mirrorOptions = mirrorData.options || {};
+      const {
+        color,
+        clipBias
+      } = mirrorOptions;
+
+      if (color !== undefined) {
+        mirror.setColor(color);
+      }
+
+      if (clipBias !== undefined) {
+        mirror.setClipBias(clipBias);
+      }
+    }
   }, {
     key: "completeSpriteCreation",
     value: async function completeSpriteCreation(sprite, spriteData, options) {
@@ -95398,12 +96847,17 @@ let Sky = /*#__PURE__*/function (_Element) {
 
       for (const cameraData of cameras) {
         if (cameraData.entitySubType === ENTITY_TYPES.CAMERA.SUBTYPES.GAME) {
-          // Create a Camera entity that will appear in the hierarchy (for editor)
+          // Use config defaults, but prefer saved values if they're reasonable
+          // (old default was 100, which is too small for most scenes)
+          const configFar = Config$1.camera().far;
+          const savedFar = cameraData.far;
+          const cameraFar = savedFar && savedFar > 100 ? savedFar : configFar; // Create a Camera entity that will appear in the hierarchy (for editor)
+
           const gameCamera = new Camera({
             name: cameraData.name || "Game Camera",
-            fov: cameraData.fov || 75,
-            near: cameraData.near || 0.1,
-            far: cameraData.far || 3000000,
+            fov: cameraData.fov || Config$1.camera().fov,
+            near: cameraData.near || Config$1.camera().near,
+            far: cameraFar,
             serializable: true
           });
           gameCamera.setEntitySubtype(ENTITY_TYPES.CAMERA.SUBTYPES.GAME); // Set position and rotation
@@ -95423,7 +96877,7 @@ let Sky = /*#__PURE__*/function (_Element) {
           if (cameraData.rotation) sceneCamera.setRotation(cameraData.rotation);
           if (cameraData.fov) sceneCamera.setFov(cameraData.fov);
           if (cameraData.near) sceneCamera.setNear(cameraData.near);
-          if (cameraData.far) sceneCamera.setFar(cameraData.far);
+          sceneCamera.setFar(cameraFar);
         }
       } // Use for...of to properly await async completeElementCreation calls
 
@@ -95510,6 +96964,18 @@ let Sky = /*#__PURE__*/function (_Element) {
                 Importer.completeSkyCreation(Sky.create(elementData), elementData, options);
                 break;
 
+              case ENTITY_TYPES.SCENERY.SUBTYPES.SKYBOX:
+                Importer.completeSkyboxCreation(Skybox.create(elementData), elementData, options);
+                break;
+
+              case ENTITY_TYPES.SCENERY.SUBTYPES.WATER:
+                Importer.completeWaterCreation(Water.create(elementData), elementData, options);
+                break;
+
+              case ENTITY_TYPES.SCENERY.SUBTYPES.MIRROR:
+                Importer.completeMirrorCreation(MirrorElement.create(elementData), elementData, options);
+                break;
+
               default:
                 console.warn(IMPORTER_ERROR_UNKNOWN_ELEMENT_SUBTYPE, elementData.entitySubType);
             }
@@ -97369,7 +98835,30 @@ let SunLight = /*#__PURE__*/function (_Light) {
         targetHolderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       this.helper = new DirectionalLightHelper(this.getBody(), 5);
-      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera);
+      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera); // Set to layer 1 ONLY so mirrors don't render light helpers
+      // Disable depth test so helpers always render on top of sky/water
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      [this.helper, this.shadowHelper].forEach(helper => {
+        helper.layers.set(1);
+        helper.renderOrder = 999;
+        setMaterialDepth(helper.material);
+        helper.traverse(child => {
+          child.layers.set(1);
+          child.renderOrder = 999;
+          setMaterialDepth(child.material);
+        });
+      });
       Scene$1.add(this.helper, null, false);
       Scene$1.add(this.shadowHelper, null, false);
       this.addHolder(holderName, holderSize);
@@ -97630,7 +99119,30 @@ let PointLight = /*#__PURE__*/function (_Light) {
         holderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       this.helper = new PointLightHelper(this.getBody(), 2, GREEN$2);
-      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera);
+      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera); // Set to layer 1 ONLY so mirrors don't render light helpers
+      // Disable depth test so helpers always render on top of sky/water
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      [this.helper, this.shadowHelper].forEach(helper => {
+        helper.layers.set(1);
+        helper.renderOrder = 999;
+        setMaterialDepth(helper.material);
+        helper.traverse(child => {
+          child.layers.set(1);
+          child.renderOrder = 999;
+          setMaterialDepth(child.material);
+        });
+      });
       Scene$1.add(this.helper, null, false);
       Scene$1.add(this.shadowHelper, null, false);
       this.addHolder(holderName, holderSize);
@@ -97947,7 +99459,30 @@ let SpotLight = /*#__PURE__*/function (_Light) {
         targetHolderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       this.helper = new SpotLightHelper(this.getBody(), GREEN$1);
-      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera);
+      this.shadowHelper = new CameraHelper(this.getBody().shadow.camera); // Set to layer 1 ONLY so mirrors don't render light helpers
+      // Disable depth test so helpers always render on top of sky/water
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      [this.helper, this.shadowHelper].forEach(helper => {
+        helper.layers.set(1);
+        helper.renderOrder = 999;
+        setMaterialDepth(helper.material);
+        helper.traverse(child => {
+          child.layers.set(1);
+          child.renderOrder = 999;
+          setMaterialDepth(child.material);
+        });
+      });
       Scene$1.add(this.helper, null, false);
       Scene$1.add(this.shadowHelper, null, false);
       this.addHolder(holderName, holderSize);
@@ -98143,7 +99678,28 @@ let HemisphereLight = /*#__PURE__*/function (_Light) {
         holderName = "hemispherelightholder",
         holderSize = 0.05
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      this.helper = new HemisphereLightHelper(this.getBody(), 2, GREEN);
+      this.helper = new HemisphereLightHelper(this.getBody(), 2, GREEN); // Set to layer 1 ONLY so mirrors don't render light helpers
+      // Disable depth test so helpers always render on top of sky/water
+
+      const setMaterialDepth = material => {
+        if (!material) return;
+        const mats = Array.isArray(material) ? material : [material];
+        mats.forEach(mat => {
+          mat.depthTest = false;
+          mat.depthWrite = false;
+          mat.transparent = true;
+          mat.needsUpdate = true;
+        });
+      };
+
+      this.helper.layers.set(1);
+      this.helper.renderOrder = 999;
+      setMaterialDepth(this.helper.material);
+      this.helper.traverse(child => {
+        child.layers.set(1);
+        child.renderOrder = 999;
+        setMaterialDepth(child.material);
+      });
       this.addHolder(holderName, holderSize);
       this.isUsingHelper = true;
       Scene$1.add(this.helper, null, false);
@@ -98235,236 +99791,7 @@ let HemisphereLight = /*#__PURE__*/function (_Light) {
   }]);
 
   return Atmosphere;
-}();let Mirror = /*#__PURE__*/function (_Object3D) {
-  _inherits(Mirror, _Object3D);
-
-  var _super = _createSuper(Mirror);
-
-  _createClass(Mirror, [{
-    key: "mirroruniforms",
-    value: function mirroruniforms() {
-      return {
-        "mirrorColor": {
-          type: "c",
-          value: new Color$1(0x7F7F7F)
-        },
-        "mirrorSampler": {
-          type: "t",
-          value: null
-        },
-        "textureMatrix": {
-          type: "m4",
-          value: new Matrix4()
-        }
-      };
-    }
-  }, {
-    key: "mirrorvertex",
-    value: function mirrorvertex() {
-      return ["uniform mat4 textureMatrix;", "varying vec4 mirrorCoord;", "void main() {", "vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);", "vec4 worldPosition = modelMatrix * vec4(position, 1.0);", "mirrorCoord = textureMatrix * worldPosition;", "gl_Position = projectionMatrix * mvPosition;", "}"].join("\n");
-    }
-  }, {
-    key: "mirrorfragment",
-    value: function mirrorfragment() {
-      return ["uniform vec3 mirrorColor;", "uniform sampler2D mirrorSampler;", "varying vec4 mirrorCoord;", "float blendOverlay(float base, float blend) {", "return(base < 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));", "}", "void main() {", "vec4 color = texture2DProj(mirrorSampler, mirrorCoord);", "color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);", "gl_FragColor = color;", "}"].join("\n");
-    }
-  }]);
-
-  function Mirror(renderer, camera, scene, options) {
-    var _this;
-
-    _classCallCheck(this, Mirror);
-
-    _this = _super.call(this);
-    _this.name = 'mirror_' + _this.id;
-    options = options || {};
-    _this.matrixNeedsUpdate = true;
-    var width = options.textureWidth !== undefined ? options.textureWidth : 512;
-    var height = options.textureHeight !== undefined ? options.textureHeight : 512;
-    _this.clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
-    var mirrorColor = options.color !== undefined ? new Color$1(options.color) : new Color$1(0x7F7F7F);
-    _this.renderer = renderer;
-    _this.mirrorPlane = new Plane$1();
-    _this.normal = new Vector3$1(0, 0, 1);
-    _this.mirrorWorldPosition = new Vector3$1();
-    _this.cameraWorldPosition = new Vector3$1();
-    _this.rotationMatrix = new Matrix4();
-    _this.lookAtPosition = new Vector3$1(0, 0, -1);
-    _this.clipPlane = new Vector4(); // For debug only, show the normal and plane of the mirror
-
-    var debugMode = options.debugMode !== undefined ? options.debugMode : false;
-
-    if (debugMode) {
-      // var arrow = new ArrowHelper(new Vector3(0, 0, 1), new Vector3(0, 0, 0), 10, 0xffff80);
-      // var planeGeometry = new Geometry();
-      // planeGeometry.vertices.push(new Vector3(- 10, - 10, 0));
-      // planeGeometry.vertices.push(new Vector3(10, - 10, 0));
-      // planeGeometry.vertices.push(new Vector3(10, 10, 0));
-      // planeGeometry.vertices.push(new Vector3(- 10, 10, 0));
-      // planeGeometry.vertices.push(planeGeometry.vertices[ 0 ]);
-      // var plane = new Line(planeGeometry, new LineBasicMaterial({ color: 0xffff80 }));
-      // this.add(arrow);
-      // this.add(plane);
-      console.log('[Mage] Mirror is trying to use deprecated geometry.');
-    }
-
-    if (camera instanceof PerspectiveCamera) {
-      _this.camera = camera;
-    } else {
-      _this.camera = new PerspectiveCamera();
-    }
-
-    _this.textureMatrix = new Matrix4();
-    _this.mirrorCamera = _this.camera.clone();
-    _this.mirrorCamera.matrixAutoUpdate = true;
-    var parameters = {
-      minFilter: LinearFilter,
-      magFilter: LinearFilter,
-      format: RGBFormat,
-      stencilBuffer: false
-    };
-    _this.renderTarget = new WebGLRenderTarget(width, height, parameters);
-    _this.renderTarget2 = new WebGLRenderTarget(width, height, parameters);
-    _this.material = new ShaderMaterial({
-      fragmentShader: _this.mirrorfragment(),
-      vertexShader: _this.mirrorvertex(),
-      uniforms: UniformsUtils.clone(_this.mirroruniforms())
-    });
-    _this.material.uniforms.mirrorSampler.value = _this.renderTarget.texture;
-    _this.material.uniforms.mirrorColor.value = mirrorColor;
-    _this.material.uniforms.textureMatrix.value = _this.textureMatrix;
-
-    if (!MathUtils.isPowerOfTwo(width) || !MathUtils.isPowerOfTwo(height)) {
-      _this.renderTarget.texture.generateMipmaps = false;
-      _this.renderTarget2.texture.generateMipmaps = false;
-    }
-
-    _this.updateTextureMatrix();
-
-    _this.render();
-
-    return _this;
-  }
-
-  _createClass(Mirror, [{
-    key: "renderWithMirror",
-    value: function renderWithMirror(otherMirror) {
-      // update the mirror matrix to mirror the current view
-      this.updateTextureMatrix();
-      this.matrixNeedsUpdate = false; // set the camera of the other mirror so the mirrored view is the reference view
-
-      var tempCamera = otherMirror.camera;
-      otherMirror.camera = this.mirrorCamera; // render the other mirror in temp texture
-
-      otherMirror.renderTemp();
-      otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture; // render the current mirror
-
-      this.render();
-      this.matrixNeedsUpdate = true; // restore material and camera of other mirror
-
-      otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
-      otherMirror.camera = tempCamera; // restore texture matrix of other mirror
-
-      otherMirror.updateTextureMatrix();
-    }
-  }, {
-    key: "renderWithMirror",
-    value: function renderWithMirror(otherMirror) {
-      // update the mirror matrix to mirror the current view
-      this.updateTextureMatrix();
-      this.matrixNeedsUpdate = false; // set the camera of the other mirror so the mirrored view is the reference view
-
-      const tempCamera = otherMirror.camera;
-      otherMirror.camera = this.mirrorCamera; // render the other mirror in temp texture
-
-      otherMirror.renderTemp();
-      otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture; // render the current mirror
-
-      this.render();
-      this.matrixNeedsUpdate = true; // restore material and camera of other mirror
-
-      otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
-      otherMirror.camera = tempCamera; // restore texture matrix of other mirror
-
-      otherMirror.updateTextureMatrix();
-    }
-  }, {
-    key: "updateTextureMatrix",
-    value: function updateTextureMatrix() {
-      this.updateMatrixWorld();
-      this.camera.updateMatrixWorld();
-      this.mirrorWorldPosition.setFromMatrixPosition(this.matrixWorld);
-      this.cameraWorldPosition.setFromMatrixPosition(this.camera.matrixWorld);
-      this.rotationMatrix.extractRotation(this.matrixWorld);
-      this.normal.set(0, 0, 1);
-      this.normal.applyMatrix4(this.rotationMatrix);
-      var view = this.mirrorWorldPosition.clone().sub(this.cameraWorldPosition);
-      view.reflect(this.normal).negate();
-      view.add(this.mirrorWorldPosition);
-      this.rotationMatrix.extractRotation(this.camera.matrixWorld);
-      this.lookAtPosition.set(0, 0, -1);
-      this.lookAtPosition.applyMatrix4(this.rotationMatrix);
-      this.lookAtPosition.add(this.cameraWorldPosition);
-      var target = this.mirrorWorldPosition.clone().sub(this.lookAtPosition);
-      target.reflect(this.normal).negate();
-      target.add(this.mirrorWorldPosition);
-      this.up.set(0, -1, 0);
-      this.up.applyMatrix4(this.rotationMatrix);
-      this.up.reflect(this.normal).negate();
-      this.mirrorCamera.position.copy(view);
-      this.mirrorCamera.up = this.up;
-      this.mirrorCamera.lookAt(target);
-      this.mirrorCamera.updateProjectionMatrix();
-      this.mirrorCamera.updateMatrixWorld();
-      this.mirrorCamera.matrixWorldInverse.getInverse(this.mirrorCamera.matrixWorld); // Update the texture matrix
-
-      this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
-      this.textureMatrix.multiply(this.mirrorCamera.projectionMatrix);
-      this.textureMatrix.multiply(this.mirrorCamera.matrixWorldInverse); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-      // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-
-      this.mirrorPlane.setFromNormalAndCoplanarPoint(this.normal, this.mirrorWorldPosition);
-      this.mirrorPlane.applyMatrix4(this.mirrorCamera.matrixWorldInverse);
-      this.clipPlane.set(this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant);
-      var q = new Vector4();
-      var projectionMatrix = this.mirrorCamera.projectionMatrix;
-      q.x = (window.Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
-      q.y = (window.Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-      q.z = -1.0;
-      q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
-
-      var c = new Vector4();
-      c = this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(q)); // Replacing the third row of the projection matrix
-
-      projectionMatrix.elements[2] = c.x;
-      projectionMatrix.elements[6] = c.y;
-      projectionMatrix.elements[10] = c.z + 1.0 - this.clipBias;
-      projectionMatrix.elements[14] = c.w;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.matrixNeedsUpdate) this.updateTextureMatrix();
-      this.matrixNeedsUpdate = true; // Render the mirrored view of the current scene into the target texture
-
-      var scene = this;
-
-      while (scene.parent !== null) {
-        scene = scene.parent;
-      }
-
-      if (scene !== undefined && scene instanceof Scene$2) {
-        // We can't render ourself to ourself
-        var visible = this.material.visible;
-        this.material.visible = false;
-        this.renderer.render(scene, this.mirrorCamera, this.renderTarget, true);
-        this.material.visible = visible;
-      }
-    }
-  }]);
-
-  return Mirror;
-}(Object3D);let OceanMain = /*#__PURE__*/function () {
+}();let OceanMain = /*#__PURE__*/function () {
   function OceanMain() {
     _classCallCheck(this, OceanMain);
   }
@@ -99202,311 +100529,236 @@ let Ocean = /*#__PURE__*/function () {
   }]);
 
   return Ocean;
-}();var WaterMesh = function (geometry, options) {
-  Mesh.call(this, geometry);
-  var scope = this;
-  options = options || {};
-  var textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
-  var textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
-  var clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
-  var alpha = options.alpha !== undefined ? options.alpha : 1.0;
-  var time = options.time !== undefined ? options.time : 0.0;
-  var normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
-  var sunDirection = options.sunDirection !== undefined ? options.sunDirection : new Vector3$1(0.70707, 0.70707, 0.0);
-  var sunColor = new Color$1(options.sunColor !== undefined ? options.sunColor : 0xffffff);
-  var waterColor = new Color$1(options.waterColor !== undefined ? options.waterColor : 0x7F7F7F);
-  var eye = options.eye !== undefined ? options.eye : new Vector3$1(0, 0, 0);
-  var distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
-  var side = options.side !== undefined ? options.side : FrontSide;
-  var fog = options.fog !== undefined ? options.fog : false; //
-
-  var mirrorPlane = new Plane$1();
-  var normal = new Vector3$1();
-  var mirrorWorldPosition = new Vector3$1();
-  var cameraWorldPosition = new Vector3$1();
-  var rotationMatrix = new Matrix4();
-  var lookAtPosition = new Vector3$1(0, 0, -1);
-  var clipPlane = new Vector4();
-  var view = new Vector3$1();
-  var target = new Vector3$1();
-  var q = new Vector4();
-  var textureMatrix = new Matrix4();
-  var mirrorCamera = new PerspectiveCamera();
-  var parameters = {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    format: RGBFormat
-  };
-  var renderTarget = new WebGLRenderTarget(textureWidth, textureHeight, parameters);
-
-  if (!MathUtils.isPowerOfTwo(textureWidth) || !MathUtils.isPowerOfTwo(textureHeight)) {
-    renderTarget.texture.generateMipmaps = false;
-  }
-
-  var mirrorShader = {
-    uniforms: UniformsUtils.merge([UniformsLib['fog'], UniformsLib['lights'], {
-      'normalSampler': {
-        value: null
-      },
-      'mirrorSampler': {
-        value: null
-      },
-      'alpha': {
-        value: 1.0
-      },
-      'time': {
-        value: 0.0
-      },
-      'size': {
-        value: 1.0
-      },
-      'distortionScale': {
-        value: 20.0
-      },
-      'textureMatrix': {
-        value: new Matrix4()
-      },
-      'sunColor': {
-        value: new Color$1(0x7F7F7F)
-      },
-      'sunDirection': {
-        value: new Vector3$1(0.70707, 0.70707, 0)
-      },
-      'eye': {
-        value: new Vector3$1()
-      },
-      'waterColor': {
-        value: new Color$1(0x555555)
-      }
-    }]),
-    vertexShader: ['uniform mat4 textureMatrix;', 'uniform float time;', 'varying vec4 mirrorCoord;', 'varying vec4 worldPosition;', '#include <common>', '#include <fog_pars_vertex>', '#include <shadowmap_pars_vertex>', '#include <logdepthbuf_pars_vertex>', 'void main() {', '	mirrorCoord = modelMatrix * vec4( position, 1.0 );', '	worldPosition = mirrorCoord.xyzw;', '	mirrorCoord = textureMatrix * mirrorCoord;', '	vec4 mvPosition =  modelViewMatrix * vec4( position, 1.0 );', '	gl_Position = projectionMatrix * mvPosition;', '#include <beginnormal_vertex>', '#include <defaultnormal_vertex>', '#include <logdepthbuf_vertex>', '#include <fog_vertex>', '#include <shadowmap_vertex>', '}'].join('\n'),
-    fragmentShader: ['uniform sampler2D mirrorSampler;', 'uniform float alpha;', 'uniform float time;', 'uniform float size;', 'uniform float distortionScale;', 'uniform sampler2D normalSampler;', 'uniform vec3 sunColor;', 'uniform vec3 sunDirection;', 'uniform vec3 eye;', 'uniform vec3 waterColor;', 'varying vec4 mirrorCoord;', 'varying vec4 worldPosition;', 'vec4 getNoise( vec2 uv ) {', '	vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);', '	vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );', '	vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );', '	vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );', '	vec4 noise = texture2D( normalSampler, uv0 ) +', '		texture2D( normalSampler, uv1 ) +', '		texture2D( normalSampler, uv2 ) +', '		texture2D( normalSampler, uv3 );', '	return noise * 0.5 - 1.0;', '}', 'void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor ) {', '	vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );', '	float direction = max( 0.0, dot( eyeDirection, reflection ) );', '	specularColor += pow( direction, shiny ) * sunColor * spec;', '	diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;', '}', '#include <common>', '#include <packing>', '#include <bsdfs>', '#include <fog_pars_fragment>', '#include <logdepthbuf_pars_fragment>', '#include <lights_pars_begin>', '#include <shadowmap_pars_fragment>', '#include <shadowmask_pars_fragment>', 'void main() {', '#include <logdepthbuf_fragment>', '	vec4 noise = getNoise( worldPosition.xz * size );', '	vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );', '	vec3 diffuseLight = vec3(0.0);', '	vec3 specularLight = vec3(0.0);', '	vec3 worldToEye = eye-worldPosition.xyz;', '	vec3 eyeDirection = normalize( worldToEye );', '	sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );', '	float distance = length(worldToEye);', '	vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;', '	vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );', '	float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );', '	float rf0 = 0.3;', '	float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );', '	vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;', '	vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);', '	vec3 outgoingLight = albedo;', '	gl_FragColor = vec4( outgoingLight, alpha );', '#include <tonemapping_fragment>', '#include <fog_fragment>', '}'].join('\n')
-  };
-  var material = new ShaderMaterial({
-    fragmentShader: mirrorShader.fragmentShader,
-    vertexShader: mirrorShader.vertexShader,
-    uniforms: UniformsUtils.clone(mirrorShader.uniforms),
-    lights: true,
-    side: side,
-    fog: fog
-  });
-  material.uniforms['mirrorSampler'].value = renderTarget.texture;
-  material.uniforms['textureMatrix'].value = textureMatrix;
-  material.uniforms['alpha'].value = alpha;
-  material.uniforms['time'].value = time;
-  material.uniforms['normalSampler'].value = normalSampler;
-  material.uniforms['sunColor'].value = sunColor;
-  material.uniforms['waterColor'].value = waterColor;
-  material.uniforms['sunDirection'].value = sunDirection;
-  material.uniforms['distortionScale'].value = distortionScale;
-  material.uniforms['eye'].value = eye;
-  scope.material = material;
-
-  scope.onBeforeRender = function (renderer, scene, camera) {
-    mirrorWorldPosition.setFromMatrixPosition(scope.matrixWorld);
-    cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
-    rotationMatrix.extractRotation(scope.matrixWorld);
-    normal.set(0, 0, 1);
-    normal.applyMatrix4(rotationMatrix);
-    view.subVectors(mirrorWorldPosition, cameraWorldPosition); // Avoid rendering when mirror is facing away
-
-    if (view.dot(normal) > 0) return;
-    view.reflect(normal).negate();
-    view.add(mirrorWorldPosition);
-    rotationMatrix.extractRotation(camera.matrixWorld);
-    lookAtPosition.set(0, 0, -1);
-    lookAtPosition.applyMatrix4(rotationMatrix);
-    lookAtPosition.add(cameraWorldPosition);
-    target.subVectors(mirrorWorldPosition, lookAtPosition);
-    target.reflect(normal).negate();
-    target.add(mirrorWorldPosition);
-    mirrorCamera.position.copy(view);
-    mirrorCamera.up.set(0, 1, 0);
-    mirrorCamera.up.applyMatrix4(rotationMatrix);
-    mirrorCamera.up.reflect(normal);
-    mirrorCamera.lookAt(target);
-    mirrorCamera.far = camera.far; // Used in WebGLBackground
-
-    mirrorCamera.updateMatrixWorld();
-    mirrorCamera.projectionMatrix.copy(camera.projectionMatrix); // Update the texture matrix
+}();let Mirror = /*#__PURE__*/function (_Object3D) {
+  _inherits(Mirror, _Object3D);
 
-    textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
-    textureMatrix.multiply(mirrorCamera.projectionMatrix);
-    textureMatrix.multiply(mirrorCamera.matrixWorldInverse); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-    // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+  var _super = _createSuper(Mirror);
 
-    mirrorPlane.setFromNormalAndCoplanarPoint(normal, mirrorWorldPosition);
-    mirrorPlane.applyMatrix4(mirrorCamera.matrixWorldInverse);
-    clipPlane.set(mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant);
-    var projectionMatrix = mirrorCamera.projectionMatrix;
-    q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
-    q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-    q.z = -1.0;
-    q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
+  _createClass(Mirror, [{
+    key: "mirroruniforms",
+    value: function mirroruniforms() {
+      return {
+        "mirrorColor": {
+          type: "c",
+          value: new Color$1(0x7F7F7F)
+        },
+        "mirrorSampler": {
+          type: "t",
+          value: null
+        },
+        "textureMatrix": {
+          type: "m4",
+          value: new Matrix4()
+        }
+      };
+    }
+  }, {
+    key: "mirrorvertex",
+    value: function mirrorvertex() {
+      return ["uniform mat4 textureMatrix;", "varying vec4 mirrorCoord;", "void main() {", "vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);", "vec4 worldPosition = modelMatrix * vec4(position, 1.0);", "mirrorCoord = textureMatrix * worldPosition;", "gl_Position = projectionMatrix * mvPosition;", "}"].join("\n");
+    }
+  }, {
+    key: "mirrorfragment",
+    value: function mirrorfragment() {
+      return ["uniform vec3 mirrorColor;", "uniform sampler2D mirrorSampler;", "varying vec4 mirrorCoord;", "float blendOverlay(float base, float blend) {", "return(base < 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));", "}", "void main() {", "vec4 color = texture2DProj(mirrorSampler, mirrorCoord);", "color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);", "gl_FragColor = color;", "}"].join("\n");
+    }
+  }]);
 
-    clipPlane.multiplyScalar(2.0 / clipPlane.dot(q)); // Replacing the third row of the projection matrix
+  function Mirror(renderer, camera, scene, options) {
+    var _this;
 
-    projectionMatrix.elements[2] = clipPlane.x;
-    projectionMatrix.elements[6] = clipPlane.y;
-    projectionMatrix.elements[10] = clipPlane.z + 1.0 - clipBias;
-    projectionMatrix.elements[14] = clipPlane.w;
-    eye.setFromMatrixPosition(camera.matrixWorld); // Render
+    _classCallCheck(this, Mirror);
 
-    if (renderer.outputEncoding !== LinearEncoding) {
-      console.warn('THREE.WaterMesh: WebGLRenderer must use LinearEncoding as outputEncoding.');
+    _this = _super.call(this);
+    _this.name = 'mirror_' + _this.id;
+    options = options || {};
+    _this.matrixNeedsUpdate = true;
+    var width = options.textureWidth !== undefined ? options.textureWidth : 512;
+    var height = options.textureHeight !== undefined ? options.textureHeight : 512;
+    _this.clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
+    var mirrorColor = options.color !== undefined ? new Color$1(options.color) : new Color$1(0x7F7F7F);
+    _this.renderer = renderer;
+    _this.mirrorPlane = new Plane$1();
+    _this.normal = new Vector3$1(0, 0, 1);
+    _this.mirrorWorldPosition = new Vector3$1();
+    _this.cameraWorldPosition = new Vector3$1();
+    _this.rotationMatrix = new Matrix4();
+    _this.lookAtPosition = new Vector3$1(0, 0, -1);
+    _this.clipPlane = new Vector4(); // For debug only, show the normal and plane of the mirror
 
-      scope.onBeforeRender = function () {};
+    var debugMode = options.debugMode !== undefined ? options.debugMode : false;
 
-      return;
+    if (debugMode) {
+      // var arrow = new ArrowHelper(new Vector3(0, 0, 1), new Vector3(0, 0, 0), 10, 0xffff80);
+      // var planeGeometry = new Geometry();
+      // planeGeometry.vertices.push(new Vector3(- 10, - 10, 0));
+      // planeGeometry.vertices.push(new Vector3(10, - 10, 0));
+      // planeGeometry.vertices.push(new Vector3(10, 10, 0));
+      // planeGeometry.vertices.push(new Vector3(- 10, 10, 0));
+      // planeGeometry.vertices.push(planeGeometry.vertices[ 0 ]);
+      // var plane = new Line(planeGeometry, new LineBasicMaterial({ color: 0xffff80 }));
+      // this.add(arrow);
+      // this.add(plane);
+      console.log('[Mage] Mirror is trying to use deprecated geometry.');
     }
 
-    if (renderer.toneMapping !== NoToneMapping) {
-      console.warn('THREE.WaterMesh: WebGLRenderer must use NoToneMapping as toneMapping.');
-
-      scope.onBeforeRender = function () {};
-
-      return;
+    if (camera instanceof PerspectiveCamera) {
+      _this.camera = camera;
+    } else {
+      _this.camera = new PerspectiveCamera();
     }
 
-    var currentRenderTarget = renderer.getRenderTarget();
-    var currentXrEnabled = renderer.xr.enabled;
-    var currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-    scope.visible = false;
-    renderer.xr.enabled = false; // Avoid camera modification and recursion
-
-    renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
-
-    renderer.setRenderTarget(renderTarget);
-    renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
-
-    if (renderer.autoClear === false) renderer.clear();
-    renderer.render(scene, mirrorCamera);
-    scope.visible = true;
-    renderer.xr.enabled = currentXrEnabled;
-    renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-    renderer.setRenderTarget(currentRenderTarget); // Restore viewport
-
-    var viewport = camera.viewport;
+    _this.textureMatrix = new Matrix4();
+    _this.mirrorCamera = _this.camera.clone();
+    _this.mirrorCamera.matrixAutoUpdate = true;
+    var parameters = {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      format: RGBFormat,
+      stencilBuffer: false
+    };
+    _this.renderTarget = new WebGLRenderTarget(width, height, parameters);
+    _this.renderTarget2 = new WebGLRenderTarget(width, height, parameters);
+    _this.material = new ShaderMaterial({
+      fragmentShader: _this.mirrorfragment(),
+      vertexShader: _this.mirrorvertex(),
+      uniforms: UniformsUtils.clone(_this.mirroruniforms())
+    });
+    _this.material.uniforms.mirrorSampler.value = _this.renderTarget.texture;
+    _this.material.uniforms.mirrorColor.value = mirrorColor;
+    _this.material.uniforms.textureMatrix.value = _this.textureMatrix;
 
-    if (viewport !== undefined) {
-      renderer.state.viewport(viewport);
+    if (!MathUtils.isPowerOfTwo(width) || !MathUtils.isPowerOfTwo(height)) {
+      _this.renderTarget.texture.generateMipmaps = false;
+      _this.renderTarget2.texture.generateMipmaps = false;
     }
-  };
-};
-
-WaterMesh.prototype = Object.create(Mesh.prototype);
-WaterMesh.prototype.constructor = WaterMesh;
-const DEFAULT_WATER_HEIGHT = 512;
-const DEFAULT_WATER_WIDTH = 512;
-const DEFAULT_WATER_ALPHA = 1.0;
-const DEFAULT_WATER_DISTORTION_SCALE = 3.7;
 
-let Water = /*#__PURE__*/function (_Element) {
-  _inherits(Water, _Element);
+    _this.updateTextureMatrix();
 
-  var _super = _createSuper(Water);
+    _this.render();
 
-  function Water() {
-    var _thisSuper, _this;
+    return _this;
+  }
 
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  _createClass(Mirror, [{
+    key: "renderWithMirror",
+    value: function renderWithMirror(otherMirror) {
+      // update the mirror matrix to mirror the current view
+      this.updateTextureMatrix();
+      this.matrixNeedsUpdate = false; // set the camera of the other mirror so the mirrored view is the reference view
 
-    _classCallCheck(this, Water);
+      var tempCamera = otherMirror.camera;
+      otherMirror.camera = this.mirrorCamera; // render the other mirror in temp texture
 
-    _this = _super.call(this, options);
+      otherMirror.renderTemp();
+      otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture; // render the current mirror
 
-    _defineProperty$1(_assertThisInitialized(_this), "update", dt => {
-      _get((_thisSuper = _assertThisInitialized(_this), _getPrototypeOf(Water.prototype)), "update", _thisSuper).call(_thisSuper, dt);
+      this.render();
+      this.matrixNeedsUpdate = true; // restore material and camera of other mirror
 
-      _this.getBody().material.uniforms.time.value += dt; //1.0 / 60.0;
-    });
+      otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
+      otherMirror.camera = tempCamera; // restore texture matrix of other mirror
 
-    const {
-      texture,
-      textureNormalName,
-      width = DEFAULT_WATER_WIDTH,
-      height = DEFAULT_WATER_HEIGHT,
-      textureWidth = DEFAULT_WATER_WIDTH,
-      textureHeight = DEFAULT_WATER_HEIGHT,
-      alpha = DEFAULT_WATER_ALPHA,
-      distortionScale = DEFAULT_WATER_DISTORTION_SCALE
-    } = options;
-    const waterNormals = texture || Images$1.get(textureNormalName || 'waterNormal');
-    waterNormals.wrapS = waterNormals.wrapT = RepeatWrapping$1;
-    const body = new WaterMesh(new PlaneGeometry(width * 500, height * 500), {
-      textureWidth,
-      textureHeight,
-      waterNormals,
-      alpha,
-      sunDirection: new Vector3$1(-0.5773502691896258, 0.5773502691896258, -0.5773502691896258),
-      sunColor: 0xffffff,
-      waterColor: 0x001e0f,
-      distortionScale,
-      fog: Scene$1.getScene().fog !== undefined
-    });
+      otherMirror.updateTextureMatrix();
+    }
+  }, {
+    key: "renderWithMirror",
+    value: function renderWithMirror(otherMirror) {
+      // update the mirror matrix to mirror the current view
+      this.updateTextureMatrix();
+      this.matrixNeedsUpdate = false; // set the camera of the other mirror so the mirrored view is the reference view
 
-    _this.setBody({
-      body
-    });
+      const tempCamera = otherMirror.camera;
+      otherMirror.camera = this.mirrorCamera; // render the other mirror in temp texture
 
-    _this.setEntityType(ENTITY_TYPES.MESH);
+      otherMirror.renderTemp();
+      otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture; // render the current mirror
 
-    _this.setRotation({
-      x: -Math.PI / 2
-    });
+      this.render();
+      this.matrixNeedsUpdate = true; // restore material and camera of other mirror
 
-    return _this;
-  }
+      otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
+      otherMirror.camera = tempCamera; // restore texture matrix of other mirror
 
-  _createClass(Water, [{
-    key: "setSize",
-    value: function setSize(size) {
-      this.getBody().material.uniforms.size.value = clamp(size, 0.1, 100);
+      otherMirror.updateTextureMatrix();
     }
-  }]);
-
-  return Water;
-}(Element$1);let Skybox = /*#__PURE__*/function (_Element) {
-  _inherits(Skybox, _Element);
-
-  var _super = _createSuper(Skybox);
+  }, {
+    key: "updateTextureMatrix",
+    value: function updateTextureMatrix() {
+      this.updateMatrixWorld();
+      this.camera.updateMatrixWorld();
+      this.mirrorWorldPosition.setFromMatrixPosition(this.matrixWorld);
+      this.cameraWorldPosition.setFromMatrixPosition(this.camera.matrixWorld);
+      this.rotationMatrix.extractRotation(this.matrixWorld);
+      this.normal.set(0, 0, 1);
+      this.normal.applyMatrix4(this.rotationMatrix);
+      var view = this.mirrorWorldPosition.clone().sub(this.cameraWorldPosition);
+      view.reflect(this.normal).negate();
+      view.add(this.mirrorWorldPosition);
+      this.rotationMatrix.extractRotation(this.camera.matrixWorld);
+      this.lookAtPosition.set(0, 0, -1);
+      this.lookAtPosition.applyMatrix4(this.rotationMatrix);
+      this.lookAtPosition.add(this.cameraWorldPosition);
+      var target = this.mirrorWorldPosition.clone().sub(this.lookAtPosition);
+      target.reflect(this.normal).negate();
+      target.add(this.mirrorWorldPosition);
+      this.up.set(0, -1, 0);
+      this.up.applyMatrix4(this.rotationMatrix);
+      this.up.reflect(this.normal).negate();
+      this.mirrorCamera.position.copy(view);
+      this.mirrorCamera.up = this.up;
+      this.mirrorCamera.lookAt(target);
+      this.mirrorCamera.updateProjectionMatrix();
+      this.mirrorCamera.updateMatrixWorld();
+      this.mirrorCamera.matrixWorldInverse.getInverse(this.mirrorCamera.matrixWorld); // Update the texture matrix
 
-  function Skybox(options) {
-    var _this;
+      this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+      this.textureMatrix.multiply(this.mirrorCamera.projectionMatrix);
+      this.textureMatrix.multiply(this.mirrorCamera.matrixWorldInverse); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+      // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
 
-    _classCallCheck(this, Skybox);
+      this.mirrorPlane.setFromNormalAndCoplanarPoint(this.normal, this.mirrorWorldPosition);
+      this.mirrorPlane.applyMatrix4(this.mirrorCamera.matrixWorldInverse);
+      this.clipPlane.set(this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant);
+      var q = new Vector4();
+      var projectionMatrix = this.mirrorCamera.projectionMatrix;
+      q.x = (window.Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+      q.y = (window.Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+      q.z = -1.0;
+      q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
 
-    const {
-      name = generateRandomName("Skybox"),
-      texture = "skybox",
-      ...rest
-    } = options;
-    _this = _super.call(this, {
-      name,
-      texture,
-      ...rest
-    });
-    _this.cubeMap = typeof texture === "string" ? Images$1.get(texture) : texture;
-    const material = new MeshBasicMaterial({
-      envMap: _this.cubeMap,
-      side: BackSide
-    });
-    const geometry = new BoxGeometry(1000000, 1000000, 1000000);
+      var c = new Vector4();
+      c = this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(q)); // Replacing the third row of the projection matrix
 
-    _this.setBody({
-      material,
-      geometry
-    });
+      projectionMatrix.elements[2] = c.x;
+      projectionMatrix.elements[6] = c.y;
+      projectionMatrix.elements[10] = c.z + 1.0 - this.clipBias;
+      projectionMatrix.elements[14] = c.w;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.matrixNeedsUpdate) this.updateTextureMatrix();
+      this.matrixNeedsUpdate = true; // Render the mirrored view of the current scene into the target texture
 
-    _this.setEntityType(ENTITY_TYPES.SCENERY.TYPE);
+      var scene = this;
 
-    _this.setEntitySubtype(ENTITY_TYPES.SCENERY.SUBTYPES.SKYBOX);
+      while (scene.parent !== null) {
+        scene = scene.parent;
+      }
 
-    return _this;
-  }
+      if (scene !== undefined && scene instanceof Scene$2) {
+        // We can't render ourself to ourself
+        var visible = this.material.visible;
+        this.material.visible = false;
+        this.renderer.render(scene, this.mirrorCamera, this.renderTarget, true);
+        this.material.visible = visible;
+      }
+    }
+  }]);
 
-  return Skybox;
-}(Element$1);let Shaders = /*#__PURE__*/function () {
+  return Mirror;
+}(Object3D);let Shaders = /*#__PURE__*/function () {
   function Shaders() {
     _classCallCheck(this, Shaders);
 
@@ -99584,4 +100836,4 @@ var Shaders$1 = new Shaders();let Shader = function Shader(name, attributes, uni
   ...light_contants,
   ...material_constants,
   ...controls_contants
-};export{AUDIO_RAMPS,AmbientLight,AmbientSound,Atmosphere,Audio$1 as Audio,Axes,BUILTIN,BaseScript,Box,CONTROL_EVENTS,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,Explosion,Exporter,FEATURES,Features$1 as Features,Fire,Fountain,GameRunner$1 as GameRunner,Grid,HelperSprite,HemisphereLight,INPUT_EVENTS,Images$1 as Images,Importer,Input$1 as Input,Label,LabelComponent,Level,Lights$1 as Lights,Line,Mirror,Models$1 as Models,Ocean,PALETTES,PARTICLES,PHYSICS_CONSTANTS,PHYSICS_EVENTS,ParticleEmitter,ParticleEmitterGroup,Particles$1 as Particles,Physics$1 as Physics,Plane,PointLight,PostProcessing$1 as PostProcessing,Proton,ProtonParticleEmitter,Provider,Rain,Router$1 as Router,Scene$1 as Scene,Scripts$1 as Scripts,Shader,Sky,Skybox,Snow,Sound,Sphere,SpotLight,Sprite,Stats$1 as Stats,SunLight,three_module as THREE,THREEJS_CONTROL_EVENTS,Trail,Universe$1 as Universe,Vector3$1 as Vector3,Water,author,connect,constants,createElement,easing,functions,hitbox as hitboxUtils,index_esm as inferno,map$1 as map,math,object,physicsUtils,index$1 as rxjs,index as store,strings,uuid$1 as uuid,workers,index$2 as xstate};
+};export{AUDIO_RAMPS,AmbientLight,AmbientSound,Atmosphere,Audio$1 as Audio,Axes,BUILTIN,BaseScript,Box,CONTROL_EVENTS,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,Explosion,Exporter,FEATURES,Features$1 as Features,Fire,Fountain,GameRunner$1 as GameRunner,Grid,HelperSprite,HemisphereLight,INPUT_EVENTS,Images$1 as Images,Importer,Input$1 as Input,Label,LabelComponent,Level,Lights$1 as Lights,Line,MirrorElement as Mirror,Models$1 as Models,Ocean,PALETTES,PARTICLES,PHYSICS_CONSTANTS,PHYSICS_EVENTS,ParticleEmitter,ParticleEmitterGroup,Particles$1 as Particles,Physics$1 as Physics,Plane,PointLight,PostProcessing$1 as PostProcessing,Proton,ProtonParticleEmitter,Provider,Rain,Router$1 as Router,Scene$1 as Scene,Scripts$1 as Scripts,Shader,Sky,Skybox,Snow,Sound,Sphere,SpotLight,Sprite,Stats$1 as Stats,SunLight,three_module as THREE,THREEJS_CONTROL_EVENTS,Trail,Universe$1 as Universe,Vector3$1 as Vector3,Water,author,connect,constants,createElement,easing,functions,hitbox as hitboxUtils,index_esm as inferno,map$1 as map,math,object,physicsUtils,index$1 as rxjs,index as store,strings,uuid$1 as uuid,workers,index$2 as xstate};