mage-engine 3.24.2 → 3.24.3

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.3";
 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,
@@ -63356,7 +63365,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 +63479,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 +63726,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
@@ -86800,7 +86841,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 +86849,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;
@@ -90994,7 +91035,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 +91120,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();
@@ -93015,7 +93090,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 +93549,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 +94020,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 +94287,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 +95130,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 +95193,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 +95230,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 +96206,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 +96355,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 +96385,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 +96472,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 +98343,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 +98627,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 +98967,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 +99186,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 +99299,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 +100037,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 +100344,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};