@mml-io/3d-web-client-core 0.16.0 → 0.18.0

package/build/index.js

@@ -235,6 +235,132 @@ var VirtualJoystick = class _VirtualJoystick {
   }
 };
 
+// src/tweakpane/blades/cameraFolder.ts
+var camValues = {
+  initialDistance: 3.3,
+  minDistance: 0.1,
+  maxDistance: 5,
+  initialFOV: 60,
+  maxFOV: 70,
+  minFOV: 60,
+  invertFOVMapping: false,
+  damping: 0.15,
+  dampingScale: 5e-3,
+  zoomScale: 0.088,
+  zoomDamping: 0.16
+};
+var camOptions = {
+  initialDistance: { min: 1, max: 5, step: 0.1 },
+  minDistance: { min: 0.1, max: 2, step: 0.1 },
+  maxDistance: { min: 5, max: 20, step: 0.5 },
+  initialFOV: { min: 60, max: 85, step: 1 },
+  maxFOV: { min: 50, max: 100, step: 1 },
+  minFOV: { min: 50, max: 100, step: 1 },
+  damping: { min: 0.01, max: 0.15, step: 0.01 },
+  dampingScale: { min: 1e-3, max: 0.02, step: 1e-3 },
+  zoomScale: { min: 5e-3, max: 0.3, step: 1e-3 },
+  zoomDamping: { min: 0, max: 2, step: 0.01 }
+};
+var CameraFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.camData = {
+      distance: "0",
+      FoV: "0"
+    };
+    this.folder = parentFolder.addFolder({ title: "camera", expanded: expand });
+    this.folder.addBinding(this.camData, "distance", { readonly: true });
+    this.folder.addBinding(this.camData, "FoV", { readonly: true });
+    this.folder.addBinding(camValues, "initialDistance", camOptions.initialDistance);
+    this.folder.addBinding(camValues, "minDistance", camOptions.minDistance);
+    this.folder.addBinding(camValues, "maxDistance", camOptions.maxDistance);
+    this.folder.addBinding(camValues, "minFOV", camOptions.minFOV);
+    this.folder.addBinding(camValues, "maxFOV", camOptions.maxFOV);
+    this.folder.addBinding({ invertFOVMapping: camValues.invertFOVMapping }, "invertFOVMapping");
+    this.folder.addBinding(camValues, "damping", camOptions.damping);
+    this.folder.addBinding(camValues, "dampingScale", camOptions.dampingScale);
+    this.folder.addBinding(camValues, "zoomScale", camOptions.zoomScale);
+    this.folder.addBinding(camValues, "zoomDamping", camOptions.zoomDamping);
+  }
+  setupChangeEvent(cameraManager) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "initialDistance": {
+          const value = e.value;
+          cameraManager.initialDistance = value;
+          cameraManager.distance = value;
+          cameraManager.targetDistance = value;
+          cameraManager.desiredDistance = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "minDistance": {
+          const value = e.value;
+          cameraManager.minDistance = value;
+          cameraManager.distance = value;
+          cameraManager.targetDistance = value;
+          cameraManager.desiredDistance = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "maxDistance": {
+          const value = e.value;
+          cameraManager.maxDistance = value;
+          cameraManager.distance = value;
+          cameraManager.targetDistance = value;
+          cameraManager.desiredDistance = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "minFOV": {
+          const value = e.value;
+          cameraManager.minFOV = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "maxFOV": {
+          const value = e.value;
+          cameraManager.maxFOV = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "invertFOVMapping":
+          const boolValue = e.value;
+          cameraManager.invertFOVMapping = boolValue;
+          break;
+        case "damping": {
+          const value = e.value;
+          cameraManager.damping = value;
+          break;
+        }
+        case "dampingScale": {
+          const value = e.value;
+          cameraManager.dampingScale = value;
+          break;
+        }
+        case "zoomScale": {
+          const value = e.value;
+          cameraManager.zoomScale = value;
+          break;
+        }
+        case "zoomDamping": {
+          const value = e.value;
+          cameraManager.zoomDamping = value;
+          break;
+        }
+        default:
+          break;
+      }
+    });
+  }
+  update(cameraManager) {
+    this.camData.distance = cameraManager.distance.toFixed(2);
+    this.camData.FoV = cameraManager.fov.toFixed(2);
+  }
+};
+
 // src/tweakpane/tweakPaneActivity.ts
 var isTweakpaneActive = false;
 function setTweakpaneActive(status) {
@@ -248,17 +374,21 @@ function getTweakpaneActive() {
 var CameraManager = class {
   constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
     this.collisionsManager = collisionsManager;
-    this.initialDistance = 3.3;
-    this.minDistance = 0.1;
-    this.maxDistance = 8;
-    this.initialFOV = 60;
+    this.initialDistance = camValues.initialDistance;
+    this.minDistance = camValues.minDistance;
+    this.maxDistance = camValues.maxDistance;
+    this.initialFOV = camValues.initialFOV;
+    this.maxFOV = camValues.maxFOV;
+    this.minFOV = camValues.minFOV;
+    this.damping = camValues.damping;
+    this.dampingScale = 0.01;
+    this.zoomScale = camValues.zoomScale;
+    this.zoomDamping = camValues.zoomDamping;
+    this.invertFOVMapping = camValues.invertFOVMapping;
     this.fov = this.initialFOV;
-    this.minFOV = 85;
-    this.maxFOV = 60;
     this.targetFOV = this.initialFOV;
     this.minPolarAngle = Math.PI * 0.25;
     this.maxPolarAngle = Math.PI * 0.95;
-    this.dampingFactor = 0.091;
     this.targetDistance = this.initialDistance;
     this.distance = this.initialDistance;
     this.desiredDistance = this.initialDistance;
@@ -279,7 +409,7 @@ var CameraManager = class {
     this.targetPhi = initialPhi;
     this.theta = initialTheta;
     this.targetTheta = initialTheta;
-    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 300);
+    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
     this.camera.position.set(0, 1.4, -this.initialDistance);
     this.rayCaster = new Raycaster();
     this.hasTouchControl = VirtualJoystick.checkForTouch();
@@ -287,7 +417,8 @@ var CameraManager = class {
       [targetElement, "mousedown", this.onMouseDown.bind(this)],
       [document, "mouseup", this.onMouseUp.bind(this)],
       [document, "mousemove", this.onMouseMove.bind(this)],
-      [targetElement, "wheel", this.onMouseWheel.bind(this)]
+      [targetElement, "wheel", this.onMouseWheel.bind(this)],
+      [targetElement, "contextmenu", this.onContextMenu.bind(this)]
     ]);
     if (this.hasTouchControl) {
       this.eventHandlerCollection.add(targetElement, "touchstart", this.onTouchStart.bind(this), {
@@ -301,6 +432,9 @@ var CameraManager = class {
       });
     }
   }
+  setupTweakPane(tweakPane) {
+    tweakPane.setupCamPane(this);
+  }
   onTouchStart(evt) {
     Array.from(evt.touches).forEach((touch) => {
       this.dragging = true;
@@ -320,8 +454,8 @@ var CameraManager = class {
       this.lastTouchX = touch.clientX;
       this.lastTouchY = touch.clientY;
       if (this.targetTheta !== null && this.targetPhi !== null) {
-        this.targetTheta += dx * 0.01;
-        this.targetPhi -= dy * 0.01;
+        this.targetTheta += dx * this.dampingScale;
+        this.targetPhi -= dy * this.dampingScale;
         this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
       }
     }
@@ -334,24 +468,36 @@ var CameraManager = class {
       }
     }
   }
-  onMouseDown() {
-    this.dragging = true;
+  onMouseDown(event) {
+    if (event.button === 0 || event.button === 2) {
+      this.dragging = true;
+      document.body.style.cursor = "none";
+    }
   }
-  onMouseUp(_event) {
-    this.dragging = false;
+  onMouseUp(event) {
+    if (event.button === 0 || event.button === 2) {
+      this.dragging = false;
+      document.body.style.cursor = "default";
+    }
   }
   onMouseMove(event) {
-    if (!this.dragging || getTweakpaneActive())
-      return;
-    if (this.targetTheta === null || this.targetPhi === null)
+    if (getTweakpaneActive()) {
       return;
-    this.targetTheta += event.movementX * 0.01;
-    this.targetPhi -= event.movementY * 0.01;
-    this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
-    event.preventDefault();
+    }
+    if (this.dragging) {
+      if (this.targetTheta === null || this.targetPhi === null)
+        return;
+      this.targetTheta += event.movementX * this.dampingScale;
+      this.targetPhi -= event.movementY * this.dampingScale;
+      this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
+      event.preventDefault();
+    }
   }
   onMouseWheel(event) {
-    const scrollAmount = event.deltaY * 1e-3;
+    if (getTweakpaneActive()) {
+      return;
+    }
+    const scrollAmount = event.deltaY * this.zoomScale * 0.1;
     this.targetDistance += scrollAmount;
     this.targetDistance = Math.max(
       this.minDistance,
@@ -360,6 +506,9 @@ var CameraManager = class {
     this.desiredDistance = this.targetDistance;
     event.preventDefault();
   }
+  onContextMenu(event) {
+    event.preventDefault();
+  }
   setTarget(target) {
     if (!this.isLerping) {
       this.target.copy(target);
@@ -390,14 +539,7 @@ var CameraManager = class {
     this.theta = this.targetTheta;
     this.distance = this.targetDistance;
     this.desiredDistance = this.targetDistance;
-    this.targetFOV = remap(
-      this.targetDistance,
-      this.minDistance,
-      this.maxDistance,
-      this.minFOV,
-      this.maxFOV
-    );
-    this.fov = this.targetFOV;
+    this.recomputeFoV(true);
   }
   adjustCameraPosition() {
     const offsetDistance = 0.5;
@@ -412,7 +554,7 @@ var CameraManager = class {
       this.targetDistance = cameraToPlayerDistance - firstRaycastHit[0];
       this.distance = this.targetDistance;
     } else {
-      this.targetDistance += (this.desiredDistance - this.targetDistance) * this.dampingFactor * 4;
+      this.targetDistance += (this.desiredDistance - this.targetDistance) * this.damping * 4;
     }
   }
   dispose() {
@@ -424,6 +566,18 @@ var CameraManager = class {
   updateAspect(aspect) {
     this.camera.aspect = aspect;
   }
+  recomputeFoV(immediately = false) {
+    this.targetFOV = remap(
+      this.targetDistance,
+      this.minDistance,
+      this.maxDistance,
+      this.invertFOVMapping ? this.minFOV : this.maxFOV,
+      this.invertFOVMapping ? this.maxFOV : this.minFOV
+    );
+    if (immediately) {
+      this.fov = this.targetFOV;
+    }
+  }
   update() {
     if (this.isLerping && this.lerpFactor < 1) {
       this.lerpFactor += 0.01 / this.lerpDuration;
@@ -433,20 +587,14 @@ var CameraManager = class {
       this.adjustCameraPosition();
     }
     if (this.phi !== null && this.targetPhi !== null && this.theta !== null && this.targetTheta !== null) {
-      this.distance += (this.targetDistance - this.distance) * this.dampingFactor * 0.21;
-      this.phi += (this.targetPhi - this.phi) * this.dampingFactor;
-      this.theta += (this.targetTheta - this.theta) * this.dampingFactor;
+      this.distance += (this.targetDistance - this.distance) * this.damping * (0.21 + this.zoomDamping);
+      this.phi += (this.targetPhi - this.phi) * this.damping;
+      this.theta += (this.targetTheta - this.theta) * this.damping;
       const x = this.target.x + this.distance * Math.sin(this.phi) * Math.cos(this.theta);
       const y = this.target.y + this.distance * Math.cos(this.phi);
       const z = this.target.z + this.distance * Math.sin(this.phi) * Math.sin(this.theta);
-      this.targetFOV = remap(
-        this.targetDistance,
-        this.minDistance,
-        this.maxDistance,
-        this.minFOV,
-        this.maxFOV
-      );
-      this.fov += (this.targetFOV - this.fov) * this.dampingFactor;
+      this.recomputeFoV();
+      this.fov += (this.targetFOV - this.fov) * this.damping;
       this.camera.fov = this.fov;
       this.camera.updateProjectionMatrix();
       this.camera.position.set(x, y, z);
@@ -713,7 +861,7 @@ var CharacterMaterial = class extends MeshStandardMaterial {
   }
   update() {
     if (this.config.isLocal) {
-      this.targetAlpha = this.config.cameraManager.targetDistance < 0.4 ? 0 : 1;
+      this.targetAlpha = this.config.cameraManager.distance < 0.4 ? 0 : 1;
       this.currentAlpha += ease(this.targetAlpha, this.currentAlpha, 0.07);
       if (this.currentAlpha > 0.999) {
         this.currentAlpha = 1;
@@ -748,6 +896,7 @@ var AnimationState = /* @__PURE__ */ ((AnimationState2) => {
   AnimationState2[AnimationState2["jumpToAir"] = 3] = "jumpToAir";
   AnimationState2[AnimationState2["air"] = 4] = "air";
   AnimationState2[AnimationState2["airToGround"] = 5] = "airToGround";
+  AnimationState2[AnimationState2["doubleJump"] = 6] = "doubleJump";
   return AnimationState2;
 })(AnimationState || {});
 
@@ -761,24 +910,35 @@ var _CharacterModel = class _CharacterModel {
     this.animations = {};
     this.animationMixer = null;
     this.currentAnimation = 0 /* idle */;
+    this.isPostDoubleJump = false;
   }
   async init() {
     await this.loadMainMesh();
     await this.setAnimationFromFile(
       this.config.animationConfig.idleAnimationFileUrl,
-      0 /* idle */
+      0 /* idle */,
+      true
     );
     await this.setAnimationFromFile(
       this.config.animationConfig.jogAnimationFileUrl,
-      1 /* walking */
+      1 /* walking */,
+      true
     );
     await this.setAnimationFromFile(
       this.config.animationConfig.sprintAnimationFileUrl,
-      2 /* running */
+      2 /* running */,
+      true
     );
     await this.setAnimationFromFile(
       this.config.animationConfig.airAnimationFileUrl,
-      4 /* air */
+      4 /* air */,
+      true
+    );
+    await this.setAnimationFromFile(
+      this.config.animationConfig.doubleJumpAnimationFileUrl,
+      6 /* doubleJump */,
+      false,
+      1.45
     );
     this.applyCustomMaterials();
   }
@@ -816,6 +976,13 @@ var _CharacterModel = class _CharacterModel {
     });
   }
   updateAnimation(targetAnimation) {
+    if (this.isPostDoubleJump) {
+      if (targetAnimation === 6 /* doubleJump */) {
+        targetAnimation = 4 /* air */;
+      } else {
+        this.isPostDoubleJump = false;
+      }
+    }
     if (this.currentAnimation !== targetAnimation) {
       this.transitionToAnimation(targetAnimation);
     }
@@ -906,16 +1073,21 @@ var _CharacterModel = class _CharacterModel {
     });
     return animationClip;
   }
-  async setAnimationFromFile(animationFileUrl, animationType) {
+  async setAnimationFromFile(animationFileUrl, animationType, loop = true, playbackSpeed = 1) {
     return new Promise(async (resolve, reject) => {
       const animation = await this.config.characterModelLoader.load(animationFileUrl, "animation");
       const cleanAnimation = this.cleanAnimationClips(this.mesh, animation);
       if (typeof animation !== "undefined" && cleanAnimation instanceof AnimationClip) {
         this.animations[animationType] = this.animationMixer.clipAction(cleanAnimation);
         this.animations[animationType].stop();
+        this.animations[animationType].timeScale = playbackSpeed;
         if (animationType === 0 /* idle */) {
           this.animations[animationType].play();
         }
+        if (!loop) {
+          this.animations[animationType].setLoop(LoopRepeat, 1);
+          this.animations[animationType].clampWhenFinished = true;
+        }
         resolve();
       } else {
         reject(`failed to load ${animationType} from ${animationFileUrl}`);
@@ -923,20 +1095,30 @@ var _CharacterModel = class _CharacterModel {
     });
   }
   transitionToAnimation(targetAnimation, transitionDuration = 0.15) {
-    if (!this.mesh)
+    if (!this.mesh) {
       return;
+    }
     const currentAction = this.animations[this.currentAnimation];
     this.currentAnimation = targetAnimation;
     const targetAction = this.animations[targetAnimation];
-    if (!targetAction)
+    if (!targetAction) {
       return;
+    }
     if (currentAction) {
-      currentAction.enabled = true;
       currentAction.fadeOut(transitionDuration);
     }
-    if (!targetAction.isRunning())
+    targetAction.reset();
+    if (!targetAction.isRunning()) {
       targetAction.play();
-    targetAction.setLoop(LoopRepeat, Infinity);
+    }
+    if (targetAnimation === 6 /* doubleJump */) {
+      targetAction.getMixer().addEventListener("finished", (_event) => {
+        if (this.currentAnimation === 6 /* doubleJump */) {
+          this.isPostDoubleJump = true;
+          this.updateAnimation(6 /* doubleJump */);
+        }
+      });
+    }
     targetAction.enabled = true;
     targetAction.fadeIn(transitionDuration);
   }
@@ -1053,7 +1235,7 @@ import {
 } from "three";
 
 // src/character/CanvasText.ts
-import { Texture as Texture2, LinearFilter, RGBAFormat, MeshBasicMaterial } from "three";
+import { Texture, LinearFilter, RGBAFormat, MeshBasicMaterial } from "three";
 function getTextAlignOffset(textAlign, width) {
   switch (textAlign) {
     case "center":
@@ -1154,7 +1336,7 @@ function CanvasText(message, options) {
 }
 function THREECanvasTextTexture(text, options) {
   const canvas2 = CanvasText(text, options);
-  const texture = new Texture2(canvas2);
+  const texture = new Texture(canvas2);
   texture.minFilter = LinearFilter;
   texture.magFilter = LinearFilter;
   texture.format = RGBAFormat;
@@ -1348,15 +1530,189 @@ import { Euler as Euler2, Group as Group2, Quaternion as Quaternion5, Vector3 as
 
 // src/character/LocalController.ts
 import { Euler, Line3, Matrix4, Quaternion as Quaternion2, Ray, Raycaster as Raycaster2, Vector3 as Vector35 } from "three";
+
+// src/tweakpane/blades/characterControlsFolder.ts
+var characterControllerValues = {
+  gravity: 35.5,
+  jumpForce: 18,
+  doubleJumpForce: 17.7,
+  coyoteJump: 120,
+  airResistance: 0.5,
+  groundResistance: 0,
+  airControlModifier: 0.05,
+  groundWalkControl: 0.75,
+  groundRunControl: 1,
+  baseControlMultiplier: 200,
+  minimumSurfaceAngle: 0.905
+};
+var characterControllerOptions = {
+  gravity: { min: 1, max: 100, step: 0.05 },
+  jumpForce: { min: 1, max: 50, step: 0.05 },
+  doubleJumpForce: { min: 1, max: 50, step: 0.05 },
+  coyoteJump: { min: 60, max: 200, step: 1 },
+  airResistance: { min: 0.01, max: 0.9, step: 0.01 },
+  groundResistance: { min: -100, max: 0, step: 1 },
+  airControlModifier: { min: 1e-3, max: 0.15, step: 0.01 },
+  groundWalkControl: { min: 0.1, max: 1.5, step: 0.01 },
+  groundRunControl: { min: 0.5, max: 2, step: 0.01 },
+  baseControlMultiplier: { min: 150, max: 300, step: 1 },
+  minimumSurfaceAngle: { min: 0.254, max: 1, step: 1e-3 }
+};
+var CharacterControlsFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.characterData = {
+      position: "(0, 0, 0)",
+      onGround: "false",
+      canJump: "false",
+      canDoubleJump: "false",
+      jumpCount: "0",
+      coyoteTime: "false",
+      coyoteJumped: "false"
+    };
+    this.folder = parentFolder.addFolder({ title: "character", expanded: expand });
+    this.folder.addBinding(this.characterData, "position", { readonly: true });
+    this.folder.addBinding(this.characterData, "onGround", { readonly: true });
+    this.folder.addBinding(this.characterData, "canJump", { readonly: true });
+    this.folder.addBinding(this.characterData, "canDoubleJump", { readonly: true });
+    this.folder.addBinding(this.characterData, "jumpCount", { readonly: true });
+    this.folder.addBinding(this.characterData, "coyoteTime", { readonly: true });
+    this.folder.addBinding(this.characterData, "coyoteJumped", { readonly: true });
+    this.folder.addBinding(
+      characterControllerValues,
+      "gravity",
+      characterControllerOptions.gravity
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "jumpForce",
+      characterControllerOptions.jumpForce
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "doubleJumpForce",
+      characterControllerOptions.doubleJumpForce
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "coyoteJump",
+      characterControllerOptions.coyoteJump
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "airResistance",
+      characterControllerOptions.airResistance
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "groundResistance",
+      characterControllerOptions.groundResistance
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "airControlModifier",
+      characterControllerOptions.airControlModifier
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "groundWalkControl",
+      characterControllerOptions.groundWalkControl
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "groundRunControl",
+      characterControllerOptions.groundRunControl
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "baseControlMultiplier",
+      characterControllerOptions.baseControlMultiplier
+    );
+    this.folder.addBinding(
+      characterControllerValues,
+      "minimumSurfaceAngle",
+      characterControllerOptions.minimumSurfaceAngle
+    );
+  }
+  setupChangeEvent(localController) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "gravity": {
+          const value = e.value;
+          localController.gravity = value * -1;
+          break;
+        }
+        case "jumpForce": {
+          const value = e.value;
+          localController.jumpForce = value;
+          break;
+        }
+        case "doubleJumpForce": {
+          const value = e.value;
+          localController.doubleJumpForce = value;
+          break;
+        }
+        case "coyoteJump": {
+          const value = e.value;
+          localController.coyoteTimeThreshold = value;
+          break;
+        }
+        case "airResistance": {
+          const value = e.value;
+          localController.airResistance = value;
+          break;
+        }
+        case "groundResistance": {
+          const value = e.value;
+          localController.groundResistance = 0.99999999 + value * 1e-6;
+          break;
+        }
+        case "airControlModifier": {
+          const value = e.value;
+          localController.airControlModifier = value;
+          break;
+        }
+        case "groundWalkControl": {
+          const value = e.value;
+          localController.groundWalkControl = value;
+          break;
+        }
+        case "groundRunControl": {
+          const value = e.value;
+          localController.groundRunControl = value;
+          break;
+        }
+        case "baseControlMultiplier": {
+          const value = e.value;
+          localController.baseControl = value;
+          break;
+        }
+        case "minimumSurfaceAngle": {
+          const value = e.value;
+          localController.minimumSurfaceAngle = value;
+          break;
+        }
+        default:
+          break;
+      }
+    });
+  }
+  update(localController) {
+    const { x, y, z } = localController.latestPosition;
+    this.characterData.position = `(${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)})`;
+    this.characterData.onGround = `${localController.characterOnGround}`;
+    this.characterData.canJump = `${localController.canJump || localController.coyoteTime ? "true" : "false"}`;
+    this.characterData.canDoubleJump = `${localController.canDoubleJump}`;
+    this.characterData.jumpCount = `${localController.jumpCounter}`;
+    this.characterData.coyoteTime = `${localController.coyoteTime}`;
+    this.characterData.coyoteJumped = `${localController.coyoteJumped}`;
+  }
+};
+
+// src/character/LocalController.ts
 var downVector = new Vector35(0, -1, 0);
-var airResistance = 0.5;
-var groundResistance = 0.99999999;
-var airControlModifier = 0.05;
-var groundWalkControl = 0.75;
-var groundRunControl = 1;
-var baseControl = 200;
-var collisionDetectionSteps = 15;
-var minimumSurfaceAngle = 0.9;
 var LocalController = class {
   constructor(config) {
     this.config = config;
@@ -1364,12 +1720,26 @@ var LocalController = class {
       radius: 0.4,
       segment: new Line3(new Vector35(), new Vector35(0, 1.05, 0))
     };
-    this.gravity = -42;
-    this.jumpForce = 20;
-    this.coyoteTimeThreshold = 70;
-    this.coyoteTime = false;
+    this.gravity = -characterControllerValues.gravity;
+    this.jumpForce = characterControllerValues.jumpForce;
+    this.doubleJumpForce = characterControllerValues.doubleJumpForce;
+    this.coyoteTimeThreshold = characterControllerValues.coyoteJump;
     this.canJump = true;
+    this.canDoubleJump = true;
+    this.coyoteJumped = false;
+    this.doubleJumpUsed = false;
+    this.jumpCounter = 0;
+    this.airResistance = characterControllerValues.airResistance;
+    this.groundResistance = 0.99999999 + characterControllerValues.groundResistance * 1e-7;
+    this.airControlModifier = characterControllerValues.airControlModifier;
+    this.groundWalkControl = characterControllerValues.groundWalkControl;
+    this.groundRunControl = characterControllerValues.groundRunControl;
+    this.baseControl = characterControllerValues.baseControlMultiplier;
+    this.minimumSurfaceAngle = characterControllerValues.minimumSurfaceAngle;
+    this.latestPosition = new Vector35();
     this.characterOnGround = false;
+    this.coyoteTime = false;
+    this.collisionDetectionSteps = 15;
     this.characterWasOnGround = false;
     this.characterAirborneSince = 0;
     this.currentHeight = 0;
@@ -1396,6 +1766,9 @@ var LocalController = class {
     this.surfaceTempVector5 = new Vector35();
     this.surfaceTempRay = new Ray();
     this.lastFrameSurfaceState = null;
+    this.jumpPressed = false;
+    // Tracks if the jump button is pressed
+    this.jumpReleased = true;
     this.networkState = {
       id: this.config.id,
       position: { x: 0, y: 0, z: 0 },
@@ -1413,6 +1786,9 @@ var LocalController = class {
     this.jump = this.config.keyInputManager.jump;
     this.anyDirection = this.config.keyInputManager.anyDirection || ((_e = this.config.virtualJoystick) == null ? void 0 : _e.hasDirection) || false;
     this.conflictingDirections = this.config.keyInputManager.conflictingDirection;
+    if (!this.jump) {
+      this.jumpReleased = true;
+    }
   }
   update() {
     this.updateControllerState();
@@ -1431,14 +1807,14 @@ var LocalController = class {
     if (this.anyDirection) {
       this.updateRotation();
     }
-    for (let i = 0; i < collisionDetectionSteps; i++) {
+    for (let i = 0; i < this.collisionDetectionSteps; i++) {
       this.updatePosition(
         this.config.timeManager.deltaTime,
-        this.config.timeManager.deltaTime / collisionDetectionSteps,
+        this.config.timeManager.deltaTime / this.collisionDetectionSteps,
         i
       );
     }
-    if (this.config.character.position.y < 0) {
+    if (this.config.character.position.y < -100) {
       this.resetPosition();
     }
     this.updateNetworkState();
@@ -1448,6 +1824,9 @@ var LocalController = class {
       return 0 /* idle */;
     const jumpHeight = this.characterVelocity.y > 0 ? 0.2 : 1.8;
     if (this.currentHeight > jumpHeight && !this.characterOnGround) {
+      if (this.doubleJumpUsed) {
+        return 6 /* doubleJump */;
+      }
       return 4 /* air */;
     }
     if (this.conflictingDirections) {
@@ -1507,31 +1886,59 @@ var LocalController = class {
     const frameRotation = angularSpeed * this.config.timeManager.deltaTime;
     this.config.character.quaternion.rotateTowards(rotationQuaternion, frameRotation);
   }
-  applyControls(deltaTime) {
-    const resistance = this.characterOnGround ? groundResistance : airResistance;
-    const speedFactor = Math.pow(1 - resistance, deltaTime);
-    this.characterVelocity.multiplyScalar(speedFactor);
-    const acceleration = this.tempVector.set(0, 0, 0);
+  processJump(currentAcceleration, deltaTime) {
     if (this.characterOnGround) {
+      this.coyoteJumped = false;
+      this.canDoubleJump = false;
+      this.doubleJumpUsed = false;
+      this.jumpCounter = 0;
       if (!this.jump) {
+        this.canDoubleJump = !this.doubleJumpUsed && this.jumpReleased && this.jumpCounter === 1;
         this.canJump = true;
+        this.jumpReleased = true;
       }
-      if (this.jump && this.canJump) {
-        acceleration.y += this.jumpForce / deltaTime;
+      if (this.jump && this.canJump && this.jumpReleased) {
+        currentAcceleration.y += this.jumpForce / deltaTime;
         this.canJump = false;
+        this.jumpReleased = false;
+        this.jumpCounter++;
       } else {
-        if (this.currentSurfaceAngle.y < minimumSurfaceAngle) {
-          acceleration.y += this.gravity;
+        if (this.currentSurfaceAngle.y < this.minimumSurfaceAngle) {
+          currentAcceleration.y += this.gravity;
         }
       }
-    } else if (this.jump && this.coyoteTime) {
-      acceleration.y += this.jumpForce / deltaTime;
-      this.canJump = false;
     } else {
-      acceleration.y += this.gravity;
-      this.canJump = false;
+      if (this.jump && !this.coyoteJumped && this.coyoteTime) {
+        this.coyoteJumped = true;
+        currentAcceleration.y += this.jumpForce / deltaTime;
+        this.canJump = false;
+        this.jumpReleased = false;
+        this.jumpCounter++;
+      } else if (this.jump && this.canDoubleJump) {
+        currentAcceleration.y += this.doubleJumpForce / deltaTime;
+        this.doubleJumpUsed = true;
+        this.jumpReleased = false;
+        this.jumpCounter++;
+      } else {
+        currentAcceleration.y += this.gravity;
+        this.canJump = false;
+      }
+    }
+    if (!this.jump) {
+      this.jumpReleased = true;
+      if (!this.characterOnGround) {
+        currentAcceleration.y += this.gravity;
+      }
     }
-    const control = (this.characterOnGround ? this.run ? groundRunControl : groundWalkControl : airControlModifier) * baseControl;
+  }
+  applyControls(deltaTime) {
+    const resistance = this.characterOnGround ? this.groundResistance : this.airResistance;
+    const speedFactor = Math.pow(1 - resistance, deltaTime);
+    this.characterVelocity.multiplyScalar(speedFactor);
+    const acceleration = this.tempVector.set(0, 0, 0);
+    this.canDoubleJump = !this.doubleJumpUsed && this.jumpReleased && this.jumpCounter === 1;
+    this.processJump(acceleration, deltaTime);
+    const control = (this.characterOnGround ? this.run ? this.groundRunControl : this.groundWalkControl : this.airControlModifier) * this.baseControl;
     const controlAcceleration = this.tempVector2.set(0, 0, 0);
     if (!this.conflictingDirections) {
       if (this.forward) {
@@ -1584,10 +1991,18 @@ var LocalController = class {
     this.config.character.position.copy(avatarSegment.start);
     const deltaCollisionPosition = avatarSegment.start.sub(positionBeforeCollisions);
     this.characterOnGround = deltaCollisionPosition.y > 0;
+    if (this.characterOnGround) {
+      this.doubleJumpUsed = false;
+      this.jumpCounter = 0;
+    }
     if (this.characterWasOnGround && !this.characterOnGround) {
       this.characterAirborneSince = Date.now();
     }
+    if (!this.jump) {
+      this.jumpReleased = true;
+    }
     this.coyoteTime = this.characterVelocity.y < 0 && !this.characterOnGround && Date.now() - this.characterAirborneSince < this.coyoteTimeThreshold;
+    this.latestPosition = this.config.character.position.clone();
     this.characterWasOnGround = this.characterOnGround;
   }
   getMovementFromSurfaces(userPosition, deltaTime) {
@@ -1672,6 +2087,9 @@ var LocalController = class {
     this.characterVelocity.y = 0;
     this.config.character.position.y = 3;
     this.characterOnGround = false;
+    this.doubleJumpUsed = false;
+    this.jumpReleased = true;
+    this.jumpCounter = 0;
   }
 };
 
@@ -1743,7 +2161,6 @@ function decodeCharacterAndCamera(hash) {
 var CharacterManager = class {
   constructor(config) {
     this.config = config;
-    this.updateLocationHash = true;
     this.headTargetOffset = new Vector38(0, 1.3, 0);
     this.localClientId = 0;
     this.remoteCharacters = /* @__PURE__ */ new Map();
@@ -1793,6 +2210,9 @@ var CharacterManager = class {
     this.group.add(character);
     this.localCharacterSpawned = true;
   }
+  setupTweakPane(tweakPane) {
+    tweakPane.setupCharacterController(this.localController);
+  }
   spawnRemoteCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
     const character = new Character({
       username,
@@ -1900,11 +2320,14 @@ var CharacterManager = class {
           this.remoteCharacterControllers.delete(id);
         }
       }
-      if (this.updateLocationHash && this.config.timeManager.frame % 60 === 0) {
-        window.location.hash = encodeCharacterAndCamera(
+      if (this.config.updateURLLocation && this.config.timeManager.frame % 60 === 0 && document.hasFocus()) {
+        const hash = encodeCharacterAndCamera(
           this.localCharacter,
           this.config.cameraManager.camera
         );
+        const url = new URL(window.location.href);
+        url.hash = hash;
+        window.history.replaceState({}, "", url);
       }
     }
   }
@@ -2199,6 +2622,11 @@ var sunOptions = {
   sunIntensity: { min: 0, max: 10, step: 0.1 }
 };
 var envValues = {
+  skyboxAzimuthalAngle: 0,
+  skyboxPolarAngle: 0,
+  envMapIntensity: 0.07,
+  skyboxIntensity: 0.8,
+  skyboxBlurriness: 0,
   ambientLight: {
     ambientLightIntensity: 0.27,
     ambientLightColor: { r: 1, g: 1, b: 1 }
@@ -2210,6 +2638,10 @@ var envValues = {
   }
 };
 var envOptions = {
+  skyboxAzimuthalAngle: { min: 0, max: 360, step: 1 },
+  skyboxPolarAngle: { min: 0, max: 360, step: 1 },
+  skyboxIntensity: { min: 0, max: 1.3, step: 0.01 },
+  skyboxBlurriness: { min: 0, max: 0.1, step: 1e-3 },
   ambientLight: {
     ambientLightIntensity: { min: 0, max: 1, step: 0.01 }
   },
@@ -2222,6 +2654,9 @@ var EnvironmentFolder = class {
   constructor(parentFolder, expand = false) {
     this.folder = parentFolder.addFolder({ title: "environment", expanded: expand });
     this.sun = this.folder.addFolder({ title: "sun", expanded: true });
+    this.envMap = this.folder.addFolder({ title: "envMap", expanded: true });
+    this.fog = this.folder.addFolder({ title: "fog", expanded: true });
+    this.skybox = this.folder.addFolder({ title: "skybox", expanded: true });
     this.ambient = this.folder.addFolder({ title: "ambient", expanded: true });
     this.sun.addBinding(
       sunValues.sunPosition,
@@ -2237,7 +2672,12 @@ var EnvironmentFolder = class {
     this.sun.addBinding(sunValues, "sunColor", {
       color: { type: "float" }
     });
-    this.sunButton = this.sun.addButton({ title: "Set HDRI" });
+    this.hdrButton = this.skybox.addButton({ title: "Set HDRI" });
+    this.skybox.addBinding(envValues, "skyboxIntensity", envOptions.skyboxIntensity);
+    this.skybox.addBinding(envValues, "skyboxBlurriness", envOptions.skyboxBlurriness);
+    this.skybox.addBinding(envValues, "skyboxAzimuthalAngle", envOptions.skyboxAzimuthalAngle);
+    this.skybox.addBinding(envValues, "skyboxPolarAngle", envOptions.skyboxPolarAngle);
+    this.envMap.addBinding(envValues, "envMapIntensity", envOptions.skyboxIntensity);
     this.ambient.addBinding(
       envValues.ambientLight,
       "ambientLightIntensity",
@@ -2246,13 +2686,13 @@ var EnvironmentFolder = class {
     this.ambient.addBinding(envValues.ambientLight, "ambientLightColor", {
       color: { type: "float" }
     });
-    this.ambient.addBinding(envValues.fog, "fogNear", envOptions.fog.fogNear);
-    this.ambient.addBinding(envValues.fog, "fogFar", envOptions.fog.fogFar);
-    this.ambient.addBinding(envValues.fog, "fogColor", {
+    this.fog.addBinding(envValues.fog, "fogNear", envOptions.fog.fogNear);
+    this.fog.addBinding(envValues.fog, "fogFar", envOptions.fog.fogFar);
+    this.fog.addBinding(envValues.fog, "fogColor", {
       color: { type: "float" }
     });
   }
-  setupChangeEvent(setHDR, setAmbientLight, setFog, sun) {
+  setupChangeEvent(scene, setHDR, setSkyboxAzimuthalAngle, setSkyboxPolarAngle, setAmbientLight, setFog, sun) {
     this.sun.on("change", (e) => {
       const target = e.target.key;
       if (!target)
@@ -2287,9 +2727,43 @@ var EnvironmentFolder = class {
           break;
       }
     });
-    this.sunButton.on("click", () => {
+    this.hdrButton.on("click", () => {
       setHDR();
     });
+    this.envMap.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "envMapIntensity":
+          scene.environmentIntensity = e.value;
+          break;
+      }
+    });
+    this.skybox.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "skyboxAzimuthalAngle": {
+          const value = e.value;
+          setSkyboxAzimuthalAngle(value);
+          break;
+        }
+        case "skyboxPolarAngle": {
+          const value = e.value;
+          envValues.skyboxPolarAngle = value;
+          setSkyboxPolarAngle(value);
+          break;
+        }
+        case "skyboxIntensity":
+          scene.backgroundIntensity = e.value;
+          break;
+        case "skyboxBlurriness":
+          scene.backgroundBlurriness = e.value;
+          break;
+      }
+    });
     this.ambient.on("change", (e) => {
       const target = e.target.key;
       if (!target)
@@ -2310,6 +2784,13 @@ var EnvironmentFolder = class {
           setAmbientLight();
           break;
         }
+      }
+    });
+    this.fog.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
         case "fogNear": {
           envValues.fog.fogNear = e.value;
           setFog();
@@ -2330,8 +2811,6 @@ var EnvironmentFolder = class {
           setFog();
           break;
         }
-        default:
-          break;
       }
     });
   }
@@ -2340,7 +2819,7 @@ var EnvironmentFolder = class {
 // src/tweakpane/blades/postExtrasFolder.ts
 var extrasValues = {
   grain: 0.045,
-  bloom: 0.75
+  bloom: 0.15
 };
 var extrasOptions = {
   grain: {
@@ -2379,16 +2858,12 @@ var PostExtrasFolder = class {
 var rendererValues = {
   shadowMap: 2,
   toneMapping: 5,
-  exposure: 1.7,
-  bgIntensity: 0.8,
-  bgBlurriness: 0
+  exposure: 1.7
 };
 var rendererOptions = {
   shadowMap: { min: 0, max: 2, step: 1 },
   toneMapping: { min: 0, max: 5, step: 1 },
-  exposure: { min: 0, max: 3, step: 0.01 },
-  bgIntensity: { min: 0, max: 1.3, step: 0.01 },
-  bgBlurriness: { min: 0, max: 0.1, step: 1e-3 }
+  exposure: { min: 0, max: 3, step: 0.01 }
 };
 var shadowMapTypes = {
   0: "BasicShadowMap",
@@ -2426,10 +2901,8 @@ var RendererFolder = class {
     this.folder.addBinding(rendererValues, "toneMapping", rendererOptions.toneMapping);
     this.folder.addBinding(monitoredValues, "toneMappingType", { readonly: true });
     this.folder.addBinding(rendererValues, "exposure", rendererOptions.exposure);
-    this.folder.addBinding(rendererValues, "bgIntensity", rendererOptions.bgIntensity);
-    this.folder.addBinding(rendererValues, "bgBlurriness", rendererOptions.bgBlurriness);
   }
-  setupChangeEvent(scene, renderer, toneMappingFolder, toneMappingPass) {
+  setupChangeEvent(renderer, toneMappingFolder, toneMappingPass) {
     this.folder.on("change", (e) => {
       const target = e.target.key;
       if (!target)
@@ -2450,12 +2923,6 @@ var RendererFolder = class {
         case "exposure":
           renderer.toneMappingExposure = e.value;
           break;
-        case "bgIntensity":
-          scene.backgroundIntensity = e.value;
-          break;
-        case "bgBlurriness":
-          scene.backgroundBlurriness = e.value;
-          break;
         default:
           break;
       }
@@ -2544,7 +3011,7 @@ var n8ssaoValues = {
   halfRes: true,
   aoRadius: 5,
   distanceFalloff: 3,
-  intensity: 1,
+  intensity: 1.5,
   color: { r: 0, g: 0, b: 0 },
   aoSamples: 16,
   denoiseSamples: 4,
@@ -2860,9 +3327,6 @@ var tweakPaneStyle = `
   --tp-label-foreground-color: hsla(0, 0%, 100%, 0.6);
   --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
   --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
 }
 
 .tp-brkv {
@@ -2931,20 +3395,20 @@ var TweakPane = class {
     this.composer = composer;
     this.saveVisibilityInLocalStorage = true;
     this.guiVisible = false;
-    const tweakPaneWrapper = document.createElement("div");
-    tweakPaneWrapper.style.position = "fixed";
-    tweakPaneWrapper.style.width = "400px";
-    tweakPaneWrapper.style.height = "100%";
-    tweakPaneWrapper.style.top = "0px";
-    tweakPaneWrapper.style.right = "calc(-50vw)";
-    tweakPaneWrapper.style.zIndex = "99";
-    tweakPaneWrapper.style.overflow = "auto";
-    tweakPaneWrapper.style.backgroundColor = "rgba(0, 0, 0, 0.66)";
-    tweakPaneWrapper.style.paddingLeft = "5px";
-    tweakPaneWrapper.style.boxShadow = "-7px 0px 12px rgba(0, 0, 0, 0.5)";
-    tweakPaneWrapper.style.transition = "right cubic-bezier(0.83, 0, 0.17, 1) 0.7s";
-    holderElement.appendChild(tweakPaneWrapper);
-    this.gui = new Pane({ container: tweakPaneWrapper });
+    this.tweakPaneWrapper = document.createElement("div");
+    this.tweakPaneWrapper.style.position = "fixed";
+    this.tweakPaneWrapper.style.width = "400px";
+    this.tweakPaneWrapper.style.height = "100%";
+    this.tweakPaneWrapper.style.top = "0px";
+    this.tweakPaneWrapper.style.right = "calc(-50vw)";
+    this.tweakPaneWrapper.style.zIndex = "99";
+    this.tweakPaneWrapper.style.overflow = "auto";
+    this.tweakPaneWrapper.style.backgroundColor = "rgba(0, 0, 0, 0.66)";
+    this.tweakPaneWrapper.style.paddingLeft = "5px";
+    this.tweakPaneWrapper.style.boxShadow = "-7px 0px 12px rgba(0, 0, 0, 0.5)";
+    this.tweakPaneWrapper.style.transition = "right cubic-bezier(0.83, 0, 0.17, 1) 0.7s";
+    holderElement.appendChild(this.tweakPaneWrapper);
+    this.gui = new Pane({ container: this.tweakPaneWrapper });
     this.gui.registerPlugin(EssentialsPlugin);
     if (this.saveVisibilityInLocalStorage) {
       const localStorageGuiVisible = localStorage.getItem("guiVisible");
@@ -2968,28 +3432,31 @@ var TweakPane = class {
     this.postExtrasFolder = new PostExtrasFolder(this.gui, false);
     this.character = new CharacterFolder(this.gui, false);
     this.environment = new EnvironmentFolder(this.gui, false);
+    this.camera = new CameraFolder(this.gui, false);
+    this.characterControls = new CharacterControlsFolder(this.gui, false);
     this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
     this.export = this.gui.addFolder({ title: "import / export", expanded: false });
-    window.addEventListener("keydown", this.processKey.bind(this));
-    this.setupRenderPane = this.setupRenderPane.bind(this);
-    this.setupGUIListeners.bind(this)();
+    this.setupGUIListeners();
+    window.addEventListener("keydown", (e) => {
+      this.processKey(e);
+    });
   }
   setupGUIListeners() {
     const gui = this.gui;
     const paneElement = gui.containerElem_;
     paneElement.style.right = this.guiVisible ? "0px" : "-450px";
     this.gui.element.addEventListener("mouseenter", () => setTweakpaneActive(true));
+    this.gui.element.addEventListener("mousemove", () => setTweakpaneActive(true));
     this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
     this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
+    this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
   }
   processKey(e) {
     if (e.key === "p")
       this.toggleGUI();
   }
-  setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
+  setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setSkyboxAzimuthalAngle, setSkyboxPolarAngle, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
-      this.scene,
       this.renderer,
       this.toneMappingFolder.folder,
       toneMappingPass
@@ -2998,7 +3465,15 @@ var TweakPane = class {
     this.ssaoFolder.setupChangeEvent(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass);
     this.bcsFolder.setupChangeEvent(brightnessContrastSaturation);
     this.postExtrasFolder.setupChangeEvent(bloomEffect, gaussGrainEffect);
-    this.environment.setupChangeEvent(setHDR, setAmbientLight, setFog, sun);
+    this.environment.setupChangeEvent(
+      this.scene,
+      setHDR,
+      setSkyboxAzimuthalAngle,
+      setSkyboxPolarAngle,
+      setAmbientLight,
+      setFog,
+      sun
+    );
     this.environment.folder.hidden = hasLighting === false || sun === null;
     const exportButton = this.export.addButton({ title: "export" });
     exportButton.on("click", () => {
@@ -3011,9 +3486,25 @@ var TweakPane = class {
       });
     });
   }
+  dispose() {
+    this.gui.dispose();
+    this.tweakPaneWrapper.remove();
+  }
+  setupCamPane(cameraManager) {
+    this.camera.setupChangeEvent(cameraManager);
+  }
+  setupCharacterController(localController) {
+    this.characterControls.setupChangeEvent(localController);
+  }
   updateStats(timeManager) {
     this.renderStatsFolder.update(this.renderer, this.composer, timeManager);
   }
+  updateCameraData(cameraManager) {
+    this.camera.update(cameraManager);
+  }
+  updateCharacterData(localController) {
+    this.characterControls.update(localController);
+  }
   formatDateForFilename() {
     const date = /* @__PURE__ */ new Date();
     const year = date.getFullYear();
@@ -3071,35 +3562,37 @@ var TweakPane = class {
 // src/rendering/composer.ts
 import { HDRJPGLoader } from "@monogrid/gainmap-js";
 import {
+  BlendFunction as BlendFunction2,
+  BloomEffect,
+  EdgeDetectionMode,
   EffectComposer as EffectComposer2,
-  RenderPass,
   EffectPass as EffectPass2,
   FXAAEffect,
+  NormalPass as NormalPass2,
+  PredicationMode,
+  RenderPass,
   ShaderPass,
-  BloomEffect,
-  SSAOEffect as SSAOEffect2,
-  BlendFunction as BlendFunction2,
-  TextureEffect,
-  ToneMappingEffect,
   SMAAEffect,
   SMAAPreset,
-  EdgeDetectionMode,
-  PredicationMode,
-  NormalPass as NormalPass2
+  SSAOEffect as SSAOEffect2,
+  TextureEffect,
+  ToneMappingEffect
 } from "postprocessing";
 import {
   AmbientLight,
   Color as Color7,
+  EquirectangularReflectionMapping,
+  Euler as Euler3,
   Fog as Fog2,
   HalfFloatType as HalfFloatType2,
   LinearSRGBColorSpace,
   LoadingManager,
+  MathUtils,
   PMREMGenerator,
-  SRGBColorSpace,
   Scene as Scene4,
+  SRGBColorSpace,
   Vector2 as Vector27,
-  WebGLRenderer as WebGLRenderer4,
-  EquirectangularReflectionMapping
+  WebGLRenderer as WebGLRenderer4
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
@@ -4642,7 +5135,12 @@ var N8SSAOPass = class extends Pass {
 
 // src/rendering/composer.ts
 var Composer = class {
-  constructor(scene, camera, spawnSun = false) {
+  constructor({
+    scene,
+    camera,
+    spawnSun = false,
+    environmentConfiguration
+  }) {
     this.width = 1;
     this.height = 1;
     this.resolution = new Vector27(this.width, this.height);
@@ -4651,6 +5149,7 @@ var Composer = class {
     this.gaussGrainEffect = GaussGrainEffect;
     this.ambientLight = null;
     this.sun = null;
+    var _a;
     this.scene = scene;
     this.postPostScene = new Scene4();
     this.camera = camera;
@@ -4666,7 +5165,9 @@ var Composer = class {
     this.renderer.shadowMap.type = rendererValues.shadowMap;
     this.renderer.toneMapping = rendererValues.toneMapping;
     this.renderer.toneMappingExposure = rendererValues.exposure;
-    this.setAmbientLight();
+    this.environmentConfiguration = environmentConfiguration;
+    this.updateSkyboxAndEnvValues();
+    this.updateAmbientLightValues();
     this.setFog();
     this.effectComposer = new EffectComposer2(this.renderer, {
       frameBufferType: HalfFloatType2
@@ -4699,6 +5200,9 @@ var Composer = class {
     this.ppssaoPass = new EffectPass2(this.camera, this.ppssaoEffect, this.normalTextureEffect);
     this.ppssaoPass.enabled = ppssaoValues.enabled;
     this.fxaaEffect = new FXAAEffect();
+    if ((_a = environmentConfiguration == null ? void 0 : environmentConfiguration.postProcessing) == null ? void 0 : _a.bloomIntensity) {
+      extrasValues.bloom = environmentConfiguration.postProcessing.bloomIntensity;
+    }
     this.bloomEffect = new BloomEffect({
       intensity: extrasValues.bloom
     });
@@ -4758,6 +5262,7 @@ var Composer = class {
       this.sun = new Sun();
       this.scene.add(this.sun);
     }
+    this.updateSunValues();
     this.resizeListener = () => {
       this.fitContainer();
     };
@@ -4779,12 +5284,21 @@ var Composer = class {
       this.spawnSun,
       this.sun,
       this.setHDRIFromFile.bind(this),
+      (azimuthalAngle) => {
+        envValues.skyboxAzimuthalAngle = azimuthalAngle;
+        this.updateSkyboxRotation();
+      },
+      (polarAngle) => {
+        envValues.skyboxPolarAngle = polarAngle;
+        this.updateSkyboxRotation();
+      },
       this.setAmbientLight.bind(this),
       this.setFog.bind(this)
     );
   }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
+    this.renderer.dispose();
   }
   fitContainer() {
     if (!this) {
@@ -4833,6 +5347,18 @@ var Composer = class {
     this.renderer.clearDepth();
     this.renderer.render(this.postPostScene, this.camera);
   }
+  updateSkyboxRotation() {
+    this.scene.backgroundRotation = new Euler3(
+      MathUtils.degToRad(envValues.skyboxPolarAngle),
+      MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+      0
+    );
+    this.scene.environmentRotation = new Euler3(
+      MathUtils.degToRad(envValues.skyboxPolarAngle),
+      MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+      0
+    );
+  }
   useHDRJPG(url, fromFile = false) {
     const pmremGenerator = new PMREMGenerator(this.renderer);
     const hdrJpg = new HDRJPGLoader(this.renderer).load(url, () => {
@@ -4843,8 +5369,21 @@ var Composer = class {
       if (envMap) {
         envMap.colorSpace = LinearSRGBColorSpace;
         envMap.needsUpdate = true;
+        this.scene.environment = envMap;
+        this.scene.environmentIntensity = envValues.envMapIntensity;
+        this.scene.environmentRotation = new Euler3(
+          MathUtils.degToRad(envValues.skyboxPolarAngle),
+          MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+          0
+        );
         this.scene.background = envMap;
-        this.scene.backgroundIntensity = rendererValues.bgIntensity;
+        this.scene.backgroundIntensity = envValues.skyboxIntensity;
+        this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
+        this.scene.backgroundRotation = new Euler3(
+          MathUtils.degToRad(envValues.skyboxPolarAngle),
+          MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+          0
+        );
         this.isEnvHDRI = true;
         hdrJpgEquirectangularMap.dispose();
         pmremGenerator.dispose();
@@ -4853,8 +5392,9 @@ var Composer = class {
     });
   }
   useHDRI(url, fromFile = false) {
-    if (this.isEnvHDRI && fromFile === false || !this.renderer)
+    if (this.isEnvHDRI && fromFile === false || !this.renderer) {
       return;
+    }
     const pmremGenerator = new PMREMGenerator(this.renderer);
     new RGBELoader(new LoadingManager()).load(
       url,
@@ -4863,8 +5403,16 @@ var Composer = class {
         if (envMap) {
           envMap.colorSpace = LinearSRGBColorSpace;
           envMap.needsUpdate = true;
+          this.scene.environment = envMap;
+          this.scene.environmentIntensity = envValues.envMapIntensity;
+          this.scene.environmentRotation = new Euler3(
+            MathUtils.degToRad(envValues.skyboxPolarAngle),
+            MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+            0
+          );
           this.scene.background = envMap;
-          this.scene.backgroundIntensity = rendererValues.bgIntensity;
+          this.scene.backgroundIntensity = envValues.skyboxIntensity;
+          this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
           this.isEnvHDRI = true;
           texture.dispose();
           pmremGenerator.dispose();
@@ -4931,6 +5479,51 @@ var Composer = class {
     );
     this.scene.add(this.ambientLight);
   }
+  updateSunValues() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.sun) == null ? void 0 : _b.intensity) === "number") {
+      sunValues.sunIntensity = this.environmentConfiguration.sun.intensity;
+      (_c = this.sun) == null ? void 0 : _c.setIntensity(this.environmentConfiguration.sun.intensity);
+    }
+    if (typeof ((_e = (_d = this.environmentConfiguration) == null ? void 0 : _d.sun) == null ? void 0 : _e.azimuthalAngle) === "number") {
+      sunValues.sunPosition.sunAzimuthalAngle = this.environmentConfiguration.sun.azimuthalAngle;
+      (_f = this.sun) == null ? void 0 : _f.setAzimuthalAngle(this.environmentConfiguration.sun.azimuthalAngle);
+    }
+    if (typeof ((_h = (_g = this.environmentConfiguration) == null ? void 0 : _g.sun) == null ? void 0 : _h.polarAngle) === "number") {
+      sunValues.sunPosition.sunPolarAngle = this.environmentConfiguration.sun.polarAngle;
+      (_i = this.sun) == null ? void 0 : _i.setPolarAngle(this.environmentConfiguration.sun.polarAngle);
+    }
+  }
+  updateSkyboxAndEnvValues() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+    if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.envMap) == null ? void 0 : _b.intensity) === "number") {
+      envValues.envMapIntensity = (_c = this.environmentConfiguration) == null ? void 0 : _c.envMap.intensity;
+    }
+    this.scene.environmentIntensity = envValues.envMapIntensity;
+    if (typeof ((_e = (_d = this.environmentConfiguration) == null ? void 0 : _d.skybox) == null ? void 0 : _e.intensity) === "number") {
+      envValues.skyboxIntensity = (_f = this.environmentConfiguration) == null ? void 0 : _f.skybox.intensity;
+    }
+    this.scene.backgroundIntensity = envValues.skyboxIntensity;
+    if (typeof ((_h = (_g = this.environmentConfiguration) == null ? void 0 : _g.skybox) == null ? void 0 : _h.blurriness) === "number") {
+      envValues.skyboxBlurriness = (_i = this.environmentConfiguration) == null ? void 0 : _i.skybox.blurriness;
+    }
+    this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
+    if (typeof ((_k = (_j = this.environmentConfiguration) == null ? void 0 : _j.skybox) == null ? void 0 : _k.azimuthalAngle) === "number") {
+      envValues.skyboxAzimuthalAngle = (_l = this.environmentConfiguration) == null ? void 0 : _l.skybox.azimuthalAngle;
+      this.updateSkyboxRotation();
+    }
+    if (typeof ((_n = (_m = this.environmentConfiguration) == null ? void 0 : _m.skybox) == null ? void 0 : _n.polarAngle) === "number") {
+      envValues.skyboxPolarAngle = (_o = this.environmentConfiguration) == null ? void 0 : _o.skybox.polarAngle;
+      this.updateSkyboxRotation();
+    }
+  }
+  updateAmbientLightValues() {
+    var _a, _b;
+    if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.ambientLight) == null ? void 0 : _b.intensity) === "number") {
+      envValues.ambientLight.ambientLightIntensity = this.environmentConfiguration.ambientLight.intensity;
+    }
+    this.setAmbientLight();
+  }
 };
 
 // src/time/TimeManager.ts
@@ -4988,7 +5581,7 @@ import {
   Box3,
   Color as Color8,
   DoubleSide,
-  Euler as Euler3,
+  Euler as Euler4,
   Group as Group5,
   Line3 as Line32,
   Matrix4 as Matrix46,
@@ -4996,7 +5589,7 @@ import {
   MeshBasicMaterial as MeshBasicMaterial3,
   Quaternion as Quaternion6,
   Ray as Ray2,
-  Vector3 as Vector315
+  Vector3 as Vector314
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
@@ -5004,15 +5597,15 @@ import { MeshBVH, MeshBVHHelper } from "three-mesh-bvh";
 var CollisionsManager = class {
   constructor(scene) {
     this.debug = false;
-    this.tempVector = new Vector315();
-    this.tempVector2 = new Vector315();
-    this.tempVector3 = new Vector315();
+    this.tempVector = new Vector314();
+    this.tempVector2 = new Vector314();
+    this.tempVector3 = new Vector314();
     this.tempQuaternion = new Quaternion6();
     this.tempRay = new Ray2();
     this.tempMatrix = new Matrix46();
     this.tempMatrix2 = new Matrix46();
     this.tempBox = new Box3();
-    this.tempEuler = new Euler3();
+    this.tempEuler = new Euler4();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
@@ -5022,7 +5615,7 @@ var CollisionsManager = class {
   raycastFirst(ray) {
     let minimumDistance = null;
     let minimumHit = null;
-    let minimumNormal = new Vector315();
+    let minimumNormal = new Vector314();
     for (const [, collisionMeshState] of this.collisionMeshState) {
       this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
       const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
@@ -5163,7 +5756,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector315().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
+            collisionPosition = new Vector314().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;
@@ -5218,13 +5811,13 @@ var CollisionsManager = class {
 // src/ground-plane/GroundPlane.ts
 import {
   CanvasTexture,
-  CircleGeometry as CircleGeometry2,
   FrontSide as FrontSide2,
   Group as Group6,
   LinearMipMapLinearFilter,
   Mesh as Mesh6,
   MeshStandardMaterial as MeshStandardMaterial3,
   NearestFilter as NearestFilter2,
+  PlaneGeometry as PlaneGeometry2,
   RepeatWrapping as RepeatWrapping2
 } from "three";
 var canvas = document.createElement("canvas");
@@ -5241,7 +5834,7 @@ var GroundPlane = class extends Group6 {
     super();
     this.floorSize = 210;
     this.floorTexture = null;
-    this.floorGeometry = new CircleGeometry2(this.floorSize, this.floorSize);
+    this.floorGeometry = new PlaneGeometry2(this.floorSize, this.floorSize, 1, 1);
     this.floorMesh = null;
     this.floorMaterial = new MeshStandardMaterial3({
       color: 16777215,
@@ -5270,6 +5863,7 @@ var LoadingScreen = class {
   constructor(loadingProgressManager) {
     this.loadingProgressManager = loadingProgressManager;
     this.hasCompleted = false;
+    this.disposed = false;
     this.element = document.createElement("div");
     this.element.style.position = "absolute";
     this.element.style.top = "0";
@@ -5404,10 +5998,47 @@ var LoadingScreen = class {
     this.loadingProgressManager.addProgressCallback(this.loadingCallback);
   }
   dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
     this.loadingProgressManager.removeProgressCallback(this.loadingCallback);
     this.element.remove();
   }
 };
+
+// src/error-screen/ErrorScreen.ts
+var ErrorScreen = class {
+  constructor(title, message) {
+    this.element = document.createElement("div");
+    this.element.style.position = "absolute";
+    this.element.style.top = "0";
+    this.element.style.left = "0";
+    this.element.style.display = "flex";
+    this.element.style.alignItems = "center";
+    this.element.style.justifyContent = "center";
+    this.element.style.flexDirection = "column";
+    this.element.style.width = "100%";
+    this.element.style.height = "100%";
+    this.element.style.background = "linear-gradient(45deg, #111111 0%, #444444 100%)";
+    this.element.style.color = "white";
+    this.titleBannerText = document.createElement("div");
+    this.titleBannerText.textContent = title;
+    this.titleBannerText.style.fontSize = "40px";
+    this.titleBannerText.style.fontWeight = "bold";
+    this.titleBannerText.style.fontFamily = "sans-serif";
+    this.element.append(this.titleBannerText);
+    this.messageText = document.createElement("div");
+    this.messageText.style.textAlign = "center";
+    this.messageText.style.fontFamily = "sans-serif";
+    this.messageText.style.fontWeight = "bold";
+    this.messageText.textContent = message;
+    this.element.append(this.messageText);
+  }
+  dispose() {
+    this.element.remove();
+  }
+};
 export {
   AnimationState,
   CameraManager,
@@ -5415,6 +6046,7 @@ export {
   CharacterModelLoader,
   CollisionsManager,
   Composer,
+  ErrorScreen,
   GroundPlane,
   KeyInputManager,
   LoadingScreen,