@mml-io/3d-web-client-core 0.15.0 → 0.17.0

package/build/index.js

@@ -83,8 +83,9 @@ var EventHandlerCollection = class _EventHandlerCollection {
 };
 
 // src/input/VirtualJoystick.ts
-var _VirtualJoystick = class _VirtualJoystick {
-  constructor(attrs) {
+var VirtualJoystick = class _VirtualJoystick {
+  constructor(holderElement, attrs) {
+    this.holderElement = holderElement;
     this.left = false;
     this.right = false;
     this.up = false;
@@ -107,7 +108,23 @@ var _VirtualJoystick = class _VirtualJoystick {
     this.width = attrs.width || this.radius * 2 + this.inner_radius * 2;
     this.height = attrs.height || this.radius * 2 + this.inner_radius * 2;
     this.mouse_support = this.checkTouch() || attrs.mouse_support === true;
-    this.initializeJoystick();
+    this.div = document.createElement("div");
+    const divStyle = this.div.style;
+    divStyle.display = this.checkTouch() || this.mouse_support ? "visible" : "none";
+    divStyle.position = "fixed";
+    if (this.anchor === "left") {
+      divStyle.left = `${this.x}px`;
+    } else {
+      divStyle.right = `${this.x}px`;
+    }
+    divStyle.bottom = `${this.y}px`;
+    divStyle.width = `${this.width}px`;
+    divStyle.height = `${this.height}px`;
+    divStyle.zIndex = "10000";
+    divStyle.overflow = "hidden";
+    this.holderElement.appendChild(this.div);
+    this.setupBaseAndControl();
+    this.bindEvents();
   }
   static checkForTouch() {
     try {
@@ -117,38 +134,9 @@ var _VirtualJoystick = class _VirtualJoystick {
       return false;
     }
   }
-  static isTouchOnJoystick(touch) {
-    if (!_VirtualJoystick.JOYSTICK_DIV) {
-      return false;
-    }
-    const divRect = _VirtualJoystick.JOYSTICK_DIV.getBoundingClientRect();
-    return touch.clientX >= divRect.left && touch.clientX <= divRect.right && touch.clientY >= divRect.top && touch.clientY <= divRect.bottom;
-  }
   checkTouch() {
     return _VirtualJoystick.checkForTouch();
   }
-  initializeJoystick() {
-    if (!_VirtualJoystick.JOYSTICK_DIV) {
-      this.div = document.createElement("div");
-      const divStyle = this.div.style;
-      divStyle.display = this.checkTouch() || this.mouse_support ? "visible" : "none";
-      divStyle.position = "fixed";
-      if (this.anchor === "left") {
-        divStyle.left = `${this.x}px`;
-      } else {
-        divStyle.right = `${this.x}px`;
-      }
-      divStyle.bottom = `${this.y}px`;
-      divStyle.width = `${this.width}px`;
-      divStyle.height = `${this.height}px`;
-      divStyle.zIndex = "10000";
-      divStyle.overflow = "hidden";
-      document.body.appendChild(this.div);
-      _VirtualJoystick.JOYSTICK_DIV = this.div;
-    }
-    this.setupBaseAndControl();
-    this.bindEvents();
-  }
   setupBaseAndControl() {
     this.base = document.createElement("span");
     let divStyle = this.base.style;
@@ -188,6 +176,7 @@ var _VirtualJoystick = class _VirtualJoystick {
   }
   handleTouchStart(evt) {
     evt.preventDefault();
+    evt.stopPropagation();
     if (evt.touches) {
       const touch = evt.touches[0];
       this.updateControlAndDirection(touch);
@@ -195,6 +184,7 @@ var _VirtualJoystick = class _VirtualJoystick {
   }
   handleTouchMove(evt) {
     evt.preventDefault();
+    evt.stopPropagation();
     if (evt.touches.length > 0) {
       const touch = evt.touches[0];
       this.updateControlAndDirection(touch);
@@ -202,11 +192,13 @@ var _VirtualJoystick = class _VirtualJoystick {
   }
   handleMouseDown(evt) {
     evt.preventDefault();
+    evt.stopPropagation();
     this.updateControlAndDirection(evt);
   }
   handleMouseMove(evt) {
     if (evt.buttons === 1) {
       evt.preventDefault();
+      evt.stopPropagation();
       this.updateControlAndDirection(evt);
     }
   }
@@ -242,8 +234,132 @@ var _VirtualJoystick = class _VirtualJoystick {
     return dx > 0 && Math.abs(dy) <= 2 * Math.abs(dx);
   }
 };
-_VirtualJoystick.JOYSTICK_DIV = null;
-var VirtualJoystick = _VirtualJoystick;
+
+// src/tweakpane/blades/cameraFolder.ts
+var camValues = {
+  initialDistance: 3.3,
+  minDistance: 0.1,
+  maxDistance: 8,
+  initialFOV: 60,
+  maxFOV: 85,
+  minFOV: 60,
+  invertFOVMapping: false,
+  damping: 0.091,
+  dampingScale: 0.01,
+  zoomScale: 0.05,
+  zoomDamping: 0.3
+};
+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;
@@ -258,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;
@@ -297,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), {
@@ -311,13 +432,14 @@ var CameraManager = class {
       });
     }
   }
+  setupTweakPane(tweakPane) {
+    tweakPane.setupCamPane(this);
+  }
   onTouchStart(evt) {
     Array.from(evt.touches).forEach((touch) => {
-      if (!VirtualJoystick.isTouchOnJoystick(touch)) {
-        this.dragging = true;
-        this.lastTouchX = touch.clientX;
-        this.lastTouchY = touch.clientY;
-      }
+      this.dragging = true;
+      this.lastTouchX = touch.clientX;
+      this.lastTouchY = touch.clientY;
     });
   }
   onTouchMove(evt) {
@@ -325,47 +447,53 @@ var CameraManager = class {
       return;
     }
     evt.preventDefault();
-    const touch = Array.from(evt.touches).find((t) => !VirtualJoystick.isTouchOnJoystick(t));
+    const touch = Array.from(evt.touches).find((t) => true);
     if (touch) {
       const dx = touch.clientX - this.lastTouchX;
       const dy = touch.clientY - this.lastTouchY;
       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));
       }
     }
   }
   onTouchEnd(evt) {
     if (this.dragging) {
-      const touchEnded = Array.from(evt.changedTouches).some(
-        (t) => !VirtualJoystick.isTouchOnJoystick(t)
-      );
+      const touchEnded = Array.from(evt.changedTouches).some((t) => true);
       if (touchEnded) {
         this.dragging = false;
       }
     }
   }
-  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;
+    const scrollAmount = event.deltaY * this.zoomScale * 0.1;
     this.targetDistance += scrollAmount;
     this.targetDistance = Math.max(
       this.minDistance,
@@ -374,6 +502,9 @@ var CameraManager = class {
     this.desiredDistance = this.targetDistance;
     event.preventDefault();
   }
+  onContextMenu(event) {
+    event.preventDefault();
+  }
   setTarget(target) {
     if (!this.isLerping) {
       this.target.copy(target);
@@ -404,14 +535,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;
@@ -426,7 +550,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() {
@@ -438,6 +562,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;
@@ -447,20 +583,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);
@@ -478,9 +608,9 @@ import { Color as Color3, Group, Vector3 as Vector34 } from "three";
 // src/character/CharacterModel.ts
 import {
   MMLCharacter,
-  ModelLoader,
   parseMMLDescription
 } from "@mml-io/3d-web-avatar";
+import { ModelLoader } from "@mml-io/model-loader";
 import {
   AnimationClip,
   AnimationMixer,
@@ -634,13 +764,9 @@ var CharacterFolder = class {
 
 // src/character/CharacterMaterial.ts
 var CharacterMaterial = class extends MeshStandardMaterial {
-  constructor(isLocal, cameraManager, characterId, originalMaterial, colorOverride) {
+  constructor(config) {
     super();
-    this.isLocal = isLocal;
-    this.cameraManager = cameraManager;
-    this.characterId = characterId;
-    this.originalMaterial = originalMaterial;
-    this.colorOverride = colorOverride;
+    this.config = config;
     this.uniforms = {
       discardAll: { value: 1 },
       diffuseColor: { value: new Color() },
@@ -649,12 +775,12 @@ var CharacterMaterial = class extends MeshStandardMaterial {
     this.colorsCube216 = [];
     this.targetAlpha = 1;
     this.currentAlpha = 1;
-    this.copy(this.originalMaterial);
+    this.copy(this.config.originalMaterial);
     this.generateColorCube();
-    this.color = this.colorOverride || this.colorsCube216[this.characterId];
+    this.color = this.config.colorOverride || this.colorsCube216[this.config.characterId];
     this.envMapIntensity = characterValues.envMapIntensity;
     this.transparent = true;
-    this.side = this.originalMaterial.side;
+    this.side = this.config.originalMaterial.side;
     this.onBeforeCompile = (shader) => {
       this.uniforms = UniformsUtils.clone(shader.uniforms);
       this.uniforms.nearClip = { value: 0.01 };
@@ -690,7 +816,7 @@ var CharacterMaterial = class extends MeshStandardMaterial {
       );
       shader.fragmentShader = injectBefore(
         shader.fragmentShader,
-        "#include <output_fragment>",
+        "#include <dithering_fragment>",
         /* glsl */
         `
           if (discardAll == 1) {
@@ -730,16 +856,16 @@ var CharacterMaterial = class extends MeshStandardMaterial {
     }
   }
   update() {
-    if (this.isLocal) {
-      this.targetAlpha = this.cameraManager.targetDistance < 0.4 ? 0 : 1;
+    if (this.config.isLocal) {
+      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;
-        this.cameraManager.minPolarAngle = Math.PI * 0.25;
+        this.config.cameraManager.minPolarAngle = Math.PI * 0.25;
       }
       if (this.currentAlpha < 1e-3) {
         this.currentAlpha = 0;
-        this.cameraManager.minPolarAngle = Math.PI * 0.35;
+        this.config.cameraManager.minPolarAngle = Math.PI * 0.35;
       }
       this.uniforms.discardAll.value = this.currentAlpha === 0 ? 1 : 0;
       if (this.currentAlpha !== this.opacity) {
@@ -766,61 +892,79 @@ 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 || {});
 
 // src/character/CharacterModel.ts
-var CharacterModel = class {
-  constructor(characterDescription, animationConfig, characterModelLoader, cameraManager, characterId, isLocal) {
-    this.characterDescription = characterDescription;
-    this.animationConfig = animationConfig;
-    this.characterModelLoader = characterModelLoader;
-    this.cameraManager = cameraManager;
-    this.characterId = characterId;
-    this.isLocal = isLocal;
+var _CharacterModel = class _CharacterModel {
+  constructor(config) {
+    this.config = config;
     this.mesh = null;
     this.headBone = null;
     this.materials = /* @__PURE__ */ new Map();
     this.animations = {};
     this.animationMixer = null;
     this.currentAnimation = 0 /* idle */;
+    this.isPostDoubleJump = false;
   }
   async init() {
     await this.loadMainMesh();
-    await this.setAnimationFromFile(this.animationConfig.idleAnimationFileUrl, 0 /* idle */);
     await this.setAnimationFromFile(
-      this.animationConfig.jogAnimationFileUrl,
-      1 /* walking */
+      this.config.animationConfig.idleAnimationFileUrl,
+      0 /* idle */,
+      true
+    );
+    await this.setAnimationFromFile(
+      this.config.animationConfig.jogAnimationFileUrl,
+      1 /* walking */,
+      true
+    );
+    await this.setAnimationFromFile(
+      this.config.animationConfig.sprintAnimationFileUrl,
+      2 /* running */,
+      true
+    );
+    await this.setAnimationFromFile(
+      this.config.animationConfig.airAnimationFileUrl,
+      4 /* air */,
+      true
     );
     await this.setAnimationFromFile(
-      this.animationConfig.sprintAnimationFileUrl,
-      2 /* running */
+      this.config.animationConfig.doubleJumpAnimationFileUrl,
+      6 /* doubleJump */,
+      false,
+      1.3
     );
-    await this.setAnimationFromFile(this.animationConfig.airAnimationFileUrl, 4 /* air */);
     this.applyCustomMaterials();
   }
   applyCustomMaterials() {
     if (!this.mesh)
       return;
     this.mesh.traverse((child) => {
+      if (child.isBone) {
+        if (child.name === "head") {
+          this.headBone = child;
+        }
+      }
       if (child.isMesh || child.isSkinnedMesh) {
         const asMesh = child;
         const originalMaterial = asMesh.material;
         if (this.materials.has(originalMaterial.name)) {
           asMesh.material = this.materials.get(originalMaterial.name);
         } else {
-          const material = originalMaterial.name === "body_replaceable_color" ? new CharacterMaterial(
-            this.isLocal,
-            this.cameraManager,
-            this.characterId,
+          const material = originalMaterial.name === "body_replaceable_color" ? new CharacterMaterial({
+            isLocal: this.config.isLocal,
+            cameraManager: this.config.cameraManager,
+            characterId: this.config.characterId,
             originalMaterial
-          ) : new CharacterMaterial(
-            this.isLocal,
-            this.cameraManager,
-            this.characterId,
+          }) : new CharacterMaterial({
+            isLocal: this.config.isLocal,
+            cameraManager: this.config.cameraManager,
+            characterId: this.config.characterId,
             originalMaterial,
-            originalMaterial.color
-          );
+            colorOverride: originalMaterial.color
+          });
           this.materials.set(originalMaterial.name, material);
           asMesh.material = material;
         }
@@ -828,6 +972,13 @@ var CharacterModel = class {
     });
   }
   updateAnimation(targetAnimation) {
+    if (this.isPostDoubleJump) {
+      if (targetAnimation === 6 /* doubleJump */) {
+        targetAnimation = 4 /* air */;
+      } else {
+        this.isPostDoubleJump = false;
+      }
+    }
     if (this.currentAnimation !== targetAnimation) {
       this.transitionToAnimation(targetAnimation);
     }
@@ -847,7 +998,7 @@ var CharacterModel = class {
     var _a, _b;
     if (((_a = mmlCharacterDescription.base) == null ? void 0 : _a.url.length) === 0) {
       throw new Error(
-        "ERROR: An MML Character Description was provided but it's not a valid <m-character> string, or a valid URL"
+        "ERROR: An MML Character Description was provided, but it's not a valid <m-character> string, or a valid URL"
       );
     }
     let mergedCharacter = null;
@@ -855,27 +1006,30 @@ var CharacterModel = class {
       const characterBase = ((_b = mmlCharacterDescription.base) == null ? void 0 : _b.url) || null;
       if (characterBase) {
         this.mmlCharacterDescription = mmlCharacterDescription;
-        const mmlCharacter = new MMLCharacter(new ModelLoader());
+        const mmlCharacter = new MMLCharacter(_CharacterModel.ModelLoader);
         mergedCharacter = await mmlCharacter.mergeBodyParts(
           characterBase,
           mmlCharacterDescription.parts
         );
         if (mergedCharacter) {
-          return mergedCharacter.children[0].children[0];
+          return mergedCharacter;
         }
       }
     }
   }
   async loadCharacterFromDescription() {
-    if (this.characterDescription.meshFileUrl) {
-      return await this.characterModelLoader.load(this.characterDescription.meshFileUrl, "model") || null;
+    if (this.config.characterDescription.meshFileUrl) {
+      return await this.config.characterModelLoader.load(
+        this.config.characterDescription.meshFileUrl,
+        "model"
+      ) || null;
     }
     let mmlCharacterSource;
-    if (this.characterDescription.mmlCharacterUrl) {
-      const res = await fetch(this.characterDescription.mmlCharacterUrl);
+    if (this.config.characterDescription.mmlCharacterUrl) {
+      const res = await fetch(this.config.characterDescription.mmlCharacterUrl);
       mmlCharacterSource = await res.text();
-    } else if (this.characterDescription.mmlCharacterString) {
-      mmlCharacterSource = this.characterDescription.mmlCharacterString;
+    } else if (this.config.characterDescription.mmlCharacterString) {
+      mmlCharacterSource = this.config.characterDescription.mmlCharacterString;
     } else {
       throw new Error(
         "ERROR: No Character Description was provided. Specify one of meshFileUrl, mmlCharacterUrl or mmlCharacterString"
@@ -915,16 +1069,21 @@ var CharacterModel = class {
     });
     return animationClip;
   }
-  async setAnimationFromFile(animationFileUrl, animationType) {
+  async setAnimationFromFile(animationFileUrl, animationType, loop = true, playbackSpeed = 1) {
     return new Promise(async (resolve, reject) => {
-      const animation = await this.characterModelLoader.load(animationFileUrl, "animation");
+      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}`);
@@ -932,20 +1091,30 @@ var CharacterModel = class {
     });
   }
   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);
   }
@@ -956,6 +1125,8 @@ var CharacterModel = class {
     }
   }
 };
+_CharacterModel.ModelLoader = new ModelLoader();
+var CharacterModel = _CharacterModel;
 
 // src/character/CharacterSpeakingIndicator.ts
 import {
@@ -1031,7 +1202,7 @@ var CharacterSpeakingIndicator = class {
     this.scene.add(this.mesh);
   }
   setBillboarding(position, camera) {
-    this.mesh.position.set(position.x, position.y - 0.15, position.z);
+    this.mesh.position.set(position.x, position.y, position.z);
     this.mesh.lookAt(camera.position);
   }
   setTime(value) {
@@ -1116,27 +1287,27 @@ function CanvasText(message, options) {
   const padding = options.paddingPx || 0;
   const font = options.font || "Arial";
   const fontString = (options.bold ? "bold " : "") + fontsize + "px " + font;
-  const canvas = document.createElement("canvas");
-  const ct = canvas.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ct = canvas2.getContext("2d");
   const textAlign = options.alignment ?? "left";
   if (options.dimensions) {
-    canvas.width = options.dimensions.width;
-    canvas.height = options.dimensions.height;
-    ct.clearRect(0, 0, canvas.width, canvas.height);
+    canvas2.width = options.dimensions.width;
+    canvas2.height = options.dimensions.height;
+    ct.clearRect(0, 0, canvas2.width, canvas2.height);
     ct.font = fontString;
     ct.textAlign = textAlign;
     ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
     ct.lineWidth = 0;
-    ct.fillRect(0, 0, canvas.width, canvas.height);
+    ct.fillRect(0, 0, canvas2.width, canvas2.height);
     ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
     ct.font = fontString;
     printAtWordWrap(
       ct,
       message,
-      getTextAlignOffset(textAlign, canvas.width),
+      getTextAlignOffset(textAlign, canvas2.width),
       fontsize,
       fontsize,
-      canvas.width,
+      canvas2.width,
       padding,
       textAlign
     );
@@ -1145,28 +1316,28 @@ function CanvasText(message, options) {
     const metrics = ct.measureText(message);
     const textWidth = metrics.width;
     const textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
-    canvas.width = textWidth + padding * 2;
-    canvas.height = textHeight + padding;
-    ct.clearRect(0, 0, canvas.width, canvas.height);
+    canvas2.width = textWidth + padding * 2;
+    canvas2.height = textHeight + padding;
+    ct.clearRect(0, 0, canvas2.width, canvas2.height);
     ct.font = fontString;
     ct.textAlign = textAlign;
     ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
     ct.lineWidth = 0;
-    ct.fillRect(0, 0, canvas.width, canvas.height);
+    ct.fillRect(0, 0, canvas2.width, canvas2.height);
     ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
     ct.font = fontString;
     ct.fillText(message, padding + getTextAlignOffset(textAlign, textWidth), textHeight);
   }
-  return canvas;
+  return canvas2;
 }
 function THREECanvasTextTexture(text, options) {
-  const canvas = CanvasText(text, options);
-  const texture = new Texture2(canvas);
+  const canvas2 = CanvasText(text, options);
+  const texture = new Texture2(canvas2);
   texture.minFilter = LinearFilter;
   texture.magFilter = LinearFilter;
   texture.format = RGBAFormat;
   texture.needsUpdate = true;
-  return { texture, width: canvas.width, height: canvas.height };
+  return { texture, width: canvas2.width, height: canvas2.height };
 }
 
 // src/character/CharacterTooltip.ts
@@ -1175,20 +1346,19 @@ var defaultLabelColor = new Color2(0);
 var defaultFontColor = new Color2(16777215);
 var defaultLabelAlignment = "center" /* center */;
 var defaultLabelFontSize = 8;
-var defaultLabelPadding = 0;
+var defaultLabelPadding = 8;
 var defaultLabelWidth = 0.25;
 var defaultLabelHeight = 0.1;
 var defaultLabelCastShadows = true;
 var tooltipGeometry = new PlaneGeometry(1, 1, 1, 1);
 var CharacterTooltip = class extends Mesh3 {
-  constructor() {
+  constructor(configArg) {
     super(tooltipGeometry);
     this.visibleOpacity = 0.85;
     this.targetOpacity = 0;
     this.fadingSpeed = 0.02;
     this.secondsToFadeOut = 10;
-    this.props = {
-      content: "",
+    this.config = {
       alignment: defaultLabelAlignment,
       width: defaultLabelWidth,
       height: defaultLabelHeight,
@@ -1196,7 +1366,8 @@ var CharacterTooltip = class extends Mesh3 {
       padding: defaultLabelPadding,
       color: defaultLabelColor,
       fontColor: defaultFontColor,
-      castShadows: defaultLabelCastShadows
+      castShadows: defaultLabelCastShadows,
+      ...configArg
     };
     this.tooltipMaterial = new MeshBasicMaterial2({
       map: null,
@@ -1217,25 +1388,21 @@ var CharacterTooltip = class extends Mesh3 {
     }
     const { texture, width, height } = THREECanvasTextTexture(content, {
       bold: true,
-      fontSize: this.props.fontSize * fontScale,
-      paddingPx: this.props.padding,
+      fontSize: this.config.fontSize * fontScale,
+      paddingPx: this.config.padding,
       textColorRGB255A1: {
-        r: this.props.fontColor.r * 255,
-        g: this.props.fontColor.g * 255,
-        b: this.props.fontColor.b * 255,
+        r: this.config.fontColor.r * 255,
+        g: this.config.fontColor.g * 255,
+        b: this.config.fontColor.b * 255,
         a: 1
       },
       backgroundColorRGB255A1: {
-        r: this.props.color.r * 255,
-        g: this.props.color.g * 255,
-        b: this.props.color.b * 255,
+        r: this.config.color.r * 255,
+        g: this.config.color.g * 255,
+        b: this.config.color.b * 255,
         a: 1
       },
-      dimensions: {
-        width: this.props.width * (100 * fontScale),
-        height: this.props.height * (100 * fontScale)
-      },
-      alignment: this.props.alignment
+      alignment: this.config.alignment
     });
     this.tooltipMaterial.map = texture;
     this.tooltipMaterial.map.magFilter = LinearFilter2;
@@ -1246,7 +1413,8 @@ var CharacterTooltip = class extends Mesh3 {
     this.position.y = 1.4;
   }
   setText(text, temporary = false) {
-    this.redrawText(text);
+    const sanitizedText = text.replace(/(\r\n|\n|\r)/gm, "");
+    this.redrawText(sanitizedText);
     this.visible = true;
     this.targetOpacity = this.visibleOpacity;
     if (temporary) {
@@ -1287,39 +1455,43 @@ var CharacterTooltip = class extends Mesh3 {
 
 // src/character/Character.ts
 var Character = class extends Group {
-  constructor(characterDescription, animationConfig, characterModelLoader, characterId, modelLoadedCallback, cameraManager, composer, isLocal) {
+  constructor(config) {
     super();
-    this.characterDescription = characterDescription;
-    this.animationConfig = animationConfig;
-    this.characterModelLoader = characterModelLoader;
-    this.characterId = characterId;
-    this.modelLoadedCallback = modelLoadedCallback;
-    this.cameraManager = cameraManager;
-    this.composer = composer;
-    this.isLocal = isLocal;
+    this.config = config;
     this.model = null;
     this.color = new Color3();
-    this.tooltip = null;
     this.speakingIndicator = null;
     this.tooltip = new CharacterTooltip();
+    this.tooltip.setText(this.config.username, this.config.isLocal);
     this.add(this.tooltip);
+    this.load().then(() => {
+      this.config.modelLoadedCallback();
+    });
+  }
+  updateCharacter(username, characterDescription) {
+    this.config.username = username;
+    this.config.characterDescription = characterDescription;
     this.load();
+    this.tooltip.setText(username, this.config.isLocal);
   }
   async load() {
-    this.model = new CharacterModel(
-      this.characterDescription,
-      this.animationConfig,
-      this.characterModelLoader,
-      this.cameraManager,
-      this.characterId,
-      this.isLocal
-    );
+    const previousModel = this.model;
+    this.model = new CharacterModel({
+      characterDescription: this.config.characterDescription,
+      animationConfig: this.config.animationConfig,
+      characterModelLoader: this.config.characterModelLoader,
+      cameraManager: this.config.cameraManager,
+      characterId: this.config.characterId,
+      isLocal: this.config.isLocal
+    });
     await this.model.init();
+    if (previousModel && previousModel.mesh) {
+      this.remove(previousModel.mesh);
+    }
     this.add(this.model.mesh);
     if (this.speakingIndicator === null) {
-      this.speakingIndicator = new CharacterSpeakingIndicator(this.composer.postPostScene);
+      this.speakingIndicator = new CharacterSpeakingIndicator(this.config.composer.postPostScene);
     }
-    this.modelLoadedCallback();
   }
   updateAnimation(targetAnimation) {
     var _a;
@@ -1330,14 +1502,14 @@ var Character = class extends Group {
     if (!this.model)
       return;
     if (this.tooltip) {
-      this.tooltip.update(this.cameraManager.camera);
+      this.tooltip.update(this.config.cameraManager.camera);
     }
     if (this.speakingIndicator) {
       this.speakingIndicator.setTime(time);
       if (this.model.mesh && this.model.headBone) {
         this.speakingIndicator.setBillboarding(
           (_a = this.model.headBone) == null ? void 0 : _a.getWorldPosition(new Vector34()),
-          this.cameraManager.camera
+          this.config.cameraManager.camera
         );
       }
     }
@@ -1354,33 +1526,216 @@ 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: 28,
+  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(character, id, collisionsManager, keyInputManager, cameraManager, timeManager) {
-    this.character = character;
-    this.id = id;
-    this.collisionsManager = collisionsManager;
-    this.keyInputManager = keyInputManager;
-    this.cameraManager = cameraManager;
-    this.timeManager = timeManager;
+  constructor(config) {
+    this.config = config;
     this.capsuleInfo = {
       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;
@@ -1407,57 +1762,67 @@ 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.id,
+      id: this.config.id,
       position: { x: 0, y: 0, z: 0 },
       rotation: { quaternionY: 0, quaternionW: 1 },
       state: 0 /* idle */
     };
   }
   updateControllerState() {
-    this.forward = this.keyInputManager.forward;
-    this.backward = this.keyInputManager.backward;
-    this.left = this.keyInputManager.left;
-    this.right = this.keyInputManager.right;
-    this.run = this.keyInputManager.run;
-    this.jump = this.keyInputManager.jump;
-    this.anyDirection = this.keyInputManager.anyDirection;
-    this.conflictingDirections = this.keyInputManager.conflictingDirection;
+    var _a, _b, _c, _d, _e;
+    this.forward = this.config.keyInputManager.forward || ((_a = this.config.virtualJoystick) == null ? void 0 : _a.up) || false;
+    this.backward = this.config.keyInputManager.backward || ((_b = this.config.virtualJoystick) == null ? void 0 : _b.down) || false;
+    this.left = this.config.keyInputManager.left || ((_c = this.config.virtualJoystick) == null ? void 0 : _c.left) || false;
+    this.right = this.config.keyInputManager.right || ((_d = this.config.virtualJoystick) == null ? void 0 : _d.right) || false;
+    this.run = this.config.keyInputManager.run;
+    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();
-    this.rayCaster.set(this.character.position, this.vectorDown);
-    const firstRaycastHit = this.collisionsManager.raycastFirst(this.rayCaster.ray);
+    this.rayCaster.set(this.config.character.position, this.vectorDown);
+    const firstRaycastHit = this.config.collisionsManager.raycastFirst(this.rayCaster.ray);
     if (firstRaycastHit !== null) {
       this.currentHeight = firstRaycastHit[0];
       this.currentSurfaceAngle.copy(firstRaycastHit[1]);
     }
     if (this.anyDirection || !this.characterOnGround) {
       const targetAnimation = this.getTargetAnimation();
-      this.character.updateAnimation(targetAnimation);
+      this.config.character.updateAnimation(targetAnimation);
     } else {
-      this.character.updateAnimation(0 /* idle */);
+      this.config.character.updateAnimation(0 /* idle */);
     }
     if (this.anyDirection) {
       this.updateRotation();
     }
-    for (let i = 0; i < collisionDetectionSteps; i++) {
+    for (let i = 0; i < this.collisionDetectionSteps; i++) {
       this.updatePosition(
-        this.timeManager.deltaTime,
-        this.timeManager.deltaTime / collisionDetectionSteps,
+        this.config.timeManager.deltaTime,
+        this.config.timeManager.deltaTime / this.collisionDetectionSteps,
         i
       );
     }
-    if (this.character.position.y < 0) {
+    if (this.config.character.position.y < -100) {
       this.resetPosition();
     }
     this.updateNetworkState();
   }
   getTargetAnimation() {
-    if (!this.character)
+    if (!this.config.character)
       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) {
@@ -1487,22 +1852,22 @@ var LocalController = class {
     }
   }
   updateAzimuthalAngle() {
-    const camToModelDistance = this.cameraManager.camera.position.distanceTo(
-      this.character.position
+    const camToModelDistance = this.config.cameraManager.camera.position.distanceTo(
+      this.config.character.position
     );
     const isCameraFirstPerson = camToModelDistance < 2;
     if (isCameraFirstPerson) {
-      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.cameraManager.camera.quaternion);
+      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.config.cameraManager.camera.quaternion);
       this.azimuthalAngle = Math.atan2(cameraForward.x, cameraForward.z);
     } else {
       this.azimuthalAngle = Math.atan2(
-        this.cameraManager.camera.position.x - this.character.position.x,
-        this.cameraManager.camera.position.z - this.character.position.z
+        this.config.cameraManager.camera.position.x - this.config.character.position.x,
+        this.config.cameraManager.camera.position.z - this.config.character.position.z
       );
     }
   }
   computeAngularDifference(rotationQuaternion) {
-    return 2 * Math.acos(Math.abs(this.character.quaternion.dot(rotationQuaternion)));
+    return 2 * Math.acos(Math.abs(this.config.character.quaternion.dot(rotationQuaternion)));
   }
   updateRotation() {
     this.updateRotationOffset();
@@ -1514,34 +1879,62 @@ var LocalController = class {
     const angularDifference = this.computeAngularDifference(rotationQuaternion);
     const desiredTime = 0.07;
     const angularSpeed = angularDifference / desiredTime;
-    const frameRotation = angularSpeed * this.timeManager.deltaTime;
-    this.character.quaternion.rotateTowards(rotationQuaternion, frameRotation);
+    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) {
@@ -1567,37 +1960,45 @@ var LocalController = class {
     }
     acceleration.add(controlAcceleration);
     this.characterVelocity.addScaledVector(acceleration, deltaTime);
-    this.character.position.addScaledVector(this.characterVelocity, deltaTime);
+    this.config.character.position.addScaledVector(this.characterVelocity, deltaTime);
   }
   updatePosition(deltaTime, stepDeltaTime, iter) {
     this.applyControls(stepDeltaTime);
     if (iter === 0) {
-      const lastMovement = this.getMovementFromSurfaces(this.character.position, deltaTime);
+      const lastMovement = this.getMovementFromSurfaces(this.config.character.position, deltaTime);
       if (lastMovement) {
-        this.character.position.add(lastMovement.position);
-        const asQuaternion = this.tempQuaternion.setFromEuler(this.character.rotation);
+        this.config.character.position.add(lastMovement.position);
+        const asQuaternion = this.tempQuaternion.setFromEuler(this.config.character.rotation);
         const lastMovementEuler = this.tempEuler.setFromQuaternion(lastMovement.rotation);
         lastMovementEuler.x = 0;
         lastMovementEuler.z = 0;
         lastMovement.rotation.setFromEuler(lastMovementEuler);
         asQuaternion.multiply(lastMovement.rotation);
-        this.character.rotation.setFromQuaternion(asQuaternion);
+        this.config.character.rotation.setFromQuaternion(asQuaternion);
       }
     }
-    this.character.updateMatrixWorld();
+    this.config.character.updateMatrixWorld();
     const avatarSegment = this.tempSegment;
     avatarSegment.copy(this.capsuleInfo.segment);
-    avatarSegment.start.applyMatrix4(this.character.matrixWorld).applyMatrix4(this.tempMatrix);
-    avatarSegment.end.applyMatrix4(this.character.matrixWorld).applyMatrix4(this.tempMatrix);
+    avatarSegment.start.applyMatrix4(this.config.character.matrixWorld).applyMatrix4(this.tempMatrix);
+    avatarSegment.end.applyMatrix4(this.config.character.matrixWorld).applyMatrix4(this.tempMatrix);
     const positionBeforeCollisions = this.tempVector.copy(avatarSegment.start);
-    this.collisionsManager.applyColliders(avatarSegment, this.capsuleInfo.radius);
-    this.character.position.copy(avatarSegment.start);
+    this.config.collisionsManager.applyColliders(avatarSegment, this.capsuleInfo.radius);
+    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) {
@@ -1636,7 +2037,7 @@ var LocalController = class {
     }
     newPosition.setY(newPosition.y + 0.05);
     const ray = this.surfaceTempRay.set(newPosition, downVector);
-    const hit = this.collisionsManager.raycastFirst(ray);
+    const hit = this.config.collisionsManager.raycastFirst(ray);
     if (hit && hit[0] < 0.8) {
       const currentCollisionMeshState = hit[2];
       this.lastFrameSurfaceState = [
@@ -1655,53 +2056,75 @@ var LocalController = class {
     return lastMovement;
   }
   updateNetworkState() {
-    const characterQuaternion = this.character.getWorldQuaternion(this.tempQuaternion);
+    const characterQuaternion = this.config.character.getWorldQuaternion(this.tempQuaternion);
+    const cameraQuaternion = new Quaternion2();
+    this.config.cameraManager.camera.getWorldQuaternion(cameraQuaternion);
     this.networkState = {
-      id: this.id,
+      id: this.config.id,
       position: {
-        x: this.character.position.x,
-        y: this.character.position.y,
-        z: this.character.position.z
+        x: this.config.character.position.x,
+        y: this.config.character.position.y,
+        z: this.config.character.position.z
       },
       rotation: { quaternionY: characterQuaternion.y, quaternionW: characterQuaternion.w },
-      state: this.character.getCurrentAnimation()
+      camPosition: {
+        x: this.config.cameraManager.camera.position.x,
+        y: this.config.cameraManager.camera.position.y,
+        z: this.config.cameraManager.camera.position.z
+      },
+      camQuaternion: {
+        y: cameraQuaternion.y,
+        w: cameraQuaternion.w
+      },
+      state: this.config.character.getCurrentAnimation()
     };
   }
   resetPosition() {
     this.characterVelocity.y = 0;
-    this.character.position.y = 3;
+    this.config.character.position.y = 3;
     this.characterOnGround = false;
+    this.doubleJumpUsed = false;
+    this.jumpReleased = true;
+    this.jumpCounter = 0;
   }
 };
 
 // src/character/RemoteController.ts
 import { Quaternion as Quaternion3, Vector3 as Vector36 } from "three";
+var tempQuaternion = new Quaternion3();
 var RemoteController = class {
-  constructor(character, id) {
-    this.character = character;
-    this.id = id;
+  constructor(config) {
+    this.config = config;
     this.currentAnimation = 0 /* idle */;
     this.networkState = {
-      id: this.id,
-      position: { x: 0, y: 0, z: 0 },
-      rotation: { quaternionY: 0, quaternionW: 1 },
+      id: this.config.id,
+      position: {
+        x: this.config.character.position.x,
+        y: this.config.character.position.y,
+        z: this.config.character.position.z
+      },
+      rotation: {
+        quaternionY: tempQuaternion.setFromEuler(this.config.character.rotation).y,
+        quaternionW: 1
+      },
       state: this.currentAnimation
     };
   }
   update(clientUpdate, time, deltaTime) {
-    if (!this.character)
+    if (!this.config.character) {
       return;
+    }
     this.updateFromNetwork(clientUpdate);
-    this.character.update(time, deltaTime);
+    this.config.character.update(time, deltaTime);
   }
   updateFromNetwork(clientUpdate) {
     const { position, rotation, state } = clientUpdate;
-    this.character.position.lerp(new Vector36(position.x, position.y, position.z), 0.15);
+    this.config.character.position.lerp(new Vector36(position.x, position.y, position.z), 0.15);
     const rotationQuaternion = new Quaternion3(0, rotation.quaternionY, 0, rotation.quaternionW);
-    this.character.quaternion.slerp(rotationQuaternion, 0.6);
+    this.config.character.quaternion.slerp(rotationQuaternion, 0.6);
     if (state !== this.currentAnimation) {
       this.currentAnimation = state;
-      this.character.updateAnimation(state);
+      this.config.character.updateAnimation(state);
     }
   }
 };
@@ -1732,20 +2155,10 @@ function decodeCharacterAndCamera(hash) {
 
 // src/character/CharacterManager.ts
 var CharacterManager = class {
-  constructor(composer, characterModelLoader, collisionsManager, cameraManager, timeManager, keyInputManager, clientStates, sendUpdate, animationConfig, characterDescription) {
-    this.composer = composer;
-    this.characterModelLoader = characterModelLoader;
-    this.collisionsManager = collisionsManager;
-    this.cameraManager = cameraManager;
-    this.timeManager = timeManager;
-    this.keyInputManager = keyInputManager;
-    this.clientStates = clientStates;
-    this.sendUpdate = sendUpdate;
-    this.animationConfig = animationConfig;
-    this.characterDescription = characterDescription;
-    this.updateLocationHash = true;
+  constructor(config) {
+    this.config = config;
     this.headTargetOffset = new Vector38(0, 1.3, 0);
-    this.id = 0;
+    this.localClientId = 0;
     this.remoteCharacters = /* @__PURE__ */ new Map();
     this.remoteCharacterControllers = /* @__PURE__ */ new Map();
     this.localCharacterSpawned = false;
@@ -1753,21 +2166,21 @@ var CharacterManager = class {
     this.speakingCharacters = /* @__PURE__ */ new Map();
     this.group = new Group2();
   }
-  spawnLocalCharacter(characterDescription, id, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
-    var _a;
-    const character = new Character(
+  spawnLocalCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+    const character = new Character({
+      username,
       characterDescription,
-      this.animationConfig,
-      this.characterModelLoader,
-      id,
-      () => {
+      animationConfig: this.config.animationConfig,
+      characterModelLoader: this.config.characterModelLoader,
+      characterId: id,
+      modelLoadedCallback: () => {
       },
-      this.cameraManager,
-      this.composer,
-      true
-    );
+      cameraManager: this.config.cameraManager,
+      composer: this.config.composer,
+      isLocal: true
+    });
     const quaternion = new Quaternion5().setFromEuler(character.rotation);
-    this.sendUpdate({
+    this.config.sendUpdate({
       id,
       position: {
         x: spawnPosition.x,
@@ -1777,41 +2190,43 @@ var CharacterManager = class {
       rotation: { quaternionY: quaternion.y, quaternionW: quaternion.w },
       state: 0 /* idle */
     });
-    this.id = id;
+    this.localClientId = id;
     this.localCharacter = character;
-    this.localController = new LocalController(
-      this.localCharacter,
-      this.id,
-      this.collisionsManager,
-      this.keyInputManager,
-      this.cameraManager,
-      this.timeManager
-    );
+    this.localController = new LocalController({
+      character: this.localCharacter,
+      id: this.localClientId,
+      collisionsManager: this.config.collisionsManager,
+      keyInputManager: this.config.keyInputManager,
+      virtualJoystick: this.config.virtualJoystick,
+      cameraManager: this.config.cameraManager,
+      timeManager: this.config.timeManager
+    });
     this.localCharacter.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
     this.localCharacter.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
-    (_a = character.tooltip) == null ? void 0 : _a.setText(`${id}`, true);
     this.group.add(character);
     this.localCharacterSpawned = true;
   }
-  spawnRemoteCharacter(characterDescription, id, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
-    var _a;
-    const character = new Character(
+  setupTweakPane(tweakPane) {
+    tweakPane.setupCharacterController(this.localController);
+  }
+  spawnRemoteCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+    const character = new Character({
+      username,
       characterDescription,
-      this.animationConfig,
-      this.characterModelLoader,
-      id,
-      () => {
+      animationConfig: this.config.animationConfig,
+      characterModelLoader: this.config.characterModelLoader,
+      characterId: id,
+      modelLoadedCallback: () => {
       },
-      this.cameraManager,
-      this.composer,
-      false
-    );
+      cameraManager: this.config.cameraManager,
+      composer: this.config.composer,
+      isLocal: false
+    });
     this.remoteCharacters.set(id, character);
-    const remoteController = new RemoteController(character, id);
-    remoteController.character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
-    remoteController.character.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
+    character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
+    character.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
+    const remoteController = new RemoteController({ character, id });
     this.remoteCharacterControllers.set(id, remoteController);
-    (_a = character.tooltip) == null ? void 0 : _a.setText(`${id}`);
     this.group.add(character);
   }
   getLocalCharacterPositionAndRotation() {
@@ -1840,83 +2255,82 @@ var CharacterManager = class {
   setSpeakingCharacter(id, value) {
     this.speakingCharacters.set(id, value);
   }
+  respawnIfPresent(id) {
+    const characterInfo = this.config.characterResolve(id);
+    if (this.localCharacter && this.localClientId == id) {
+      this.localCharacter.updateCharacter(
+        characterInfo.username,
+        characterInfo.characterDescription
+      );
+    }
+    const remoteCharacter = this.remoteCharacters.get(id);
+    if (remoteCharacter) {
+      remoteCharacter.updateCharacter(characterInfo.username, characterInfo.characterDescription);
+    }
+  }
   update() {
     var _a, _b, _c;
     if (this.localCharacter) {
-      this.localCharacter.update(this.timeManager.time, this.timeManager.deltaTime);
-      if (this.speakingCharacters.has(this.id)) {
-        (_a = this.localCharacter.speakingIndicator) == null ? void 0 : _a.setSpeaking(this.speakingCharacters.get(this.id));
+      this.localCharacter.update(this.config.timeManager.time, this.config.timeManager.deltaTime);
+      if (this.speakingCharacters.has(this.localClientId)) {
+        (_a = this.localCharacter.speakingIndicator) == null ? void 0 : _a.setSpeaking(
+          this.speakingCharacters.get(this.localClientId)
+        );
       }
       this.localController.update();
-      if (this.timeManager.frame % 2 === 0) {
-        this.sendUpdate(this.localController.networkState);
+      if (this.config.timeManager.frame % 2 === 0) {
+        this.config.sendUpdate(this.localController.networkState);
       }
       const targetOffset = new Vector38();
       targetOffset.add(this.headTargetOffset).applyQuaternion(this.localCharacter.quaternion).add(this.localCharacter.position);
-      this.cameraManager.setTarget(targetOffset);
-      for (const [id, update] of this.clientStates) {
+      this.config.cameraManager.setTarget(targetOffset);
+      for (const [id, update] of this.config.remoteUserStates) {
         if (this.remoteCharacters.has(id) && this.speakingCharacters.has(id)) {
           const character = this.remoteCharacters.get(id);
           (_b = character == null ? void 0 : character.speakingIndicator) == null ? void 0 : _b.setSpeaking(this.speakingCharacters.get(id));
         }
         const { position } = update;
         if (!this.remoteCharacters.has(id) && this.localCharacterSpawned === true) {
+          const characterInfo = this.config.characterResolve(id);
           this.spawnRemoteCharacter(
-            this.characterDescription,
             id,
+            characterInfo.username,
+            characterInfo.characterDescription,
             new Vector38(position.x, position.y, position.z)
           );
         }
         const characterController = this.remoteCharacterControllers.get(id);
         if (characterController) {
-          characterController.update(update, this.timeManager.time, this.timeManager.deltaTime);
+          characterController.update(
+            update,
+            this.config.timeManager.time,
+            this.config.timeManager.deltaTime
+          );
         }
       }
       for (const [id, character] of this.remoteCharacters) {
-        if (!this.clientStates.has(id)) {
+        if (!this.config.remoteUserStates.has(id)) {
           (_c = character.speakingIndicator) == null ? void 0 : _c.dispose();
           this.group.remove(character);
           this.remoteCharacters.delete(id);
           this.remoteCharacterControllers.delete(id);
         }
       }
-      if (this.updateLocationHash && this.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.cameraManager.camera
+          this.config.cameraManager.camera
         );
+        const url = new URL(window.location.href);
+        url.hash = hash;
+        window.history.replaceState({}, "", url);
       }
     }
   }
 };
 
 // src/character/CharacterModelLoader.ts
-import { LoadingManager } from "three";
-import { GLTFLoader as ThreeGLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-var CachedGLTFLoader = class extends ThreeGLTFLoader {
-  constructor(manager, debug = false) {
-    super(manager);
-    this.debug = debug;
-    this.blobCache = /* @__PURE__ */ new Map();
-  }
-  setBlobUrl(originalUrl, blobUrl) {
-    this.blobCache.set(originalUrl, blobUrl);
-  }
-  getBlobUrl(originalUrl) {
-    return this.blobCache.get(originalUrl);
-  }
-  load(url, onLoad, onProgress, onError) {
-    const blobUrl = this.getBlobUrl(url);
-    if (blobUrl) {
-      if (this.debug === true) {
-        console.log(`Loading cached ${url.split("/").pop()}`);
-      }
-      super.load(blobUrl, onLoad, onProgress, onError);
-    } else {
-      super.load(url, onLoad, onProgress, onError);
-    }
-  }
-};
+import { ModelLoader as ModelLoader2 } from "@mml-io/model-loader";
 var LRUCache = class {
   constructor(maxSize = 100) {
     this.maxSize = maxSize;
@@ -1941,16 +2355,13 @@ var LRUCache = class {
 var CharacterModelLoader = class {
   constructor(maxCacheSize = 100, debug = false) {
     this.debug = debug;
+    this.modelLoader = new ModelLoader2();
     this.ongoingLoads = /* @__PURE__ */ new Map();
-    this.loadingManager = new LoadingManager();
-    this.gltfLoader = new CachedGLTFLoader(this.loadingManager, this.debug);
     this.modelCache = new LRUCache(maxCacheSize);
   }
   async load(fileUrl, fileType) {
     const cachedModel = this.modelCache.get(fileUrl);
     if (cachedModel) {
-      const blobURL = URL.createObjectURL(cachedModel.blob);
-      this.gltfLoader.setBlobUrl(fileUrl, blobURL);
       return this.loadFromUrl(fileUrl, fileType, cachedModel.originalExtension);
     } else {
       if (this.debug === true) {
@@ -1978,26 +2389,21 @@ var CharacterModelLoader = class {
   }
   async loadFromUrl(url, fileType, extension) {
     if (["gltf", "glb"].includes(extension)) {
-      return new Promise((resolve, reject) => {
-        this.gltfLoader.load(
+      return new Promise(async (resolve, reject) => {
+        const modelLoadResult = await this.modelLoader.load(
           url,
-          (object) => {
-            if (fileType === "model") {
-              resolve(object.scene);
-            } else if (fileType === "animation") {
-              resolve(object.animations[0]);
-            } else {
-              const error = `Trying to load unknown ${fileType} type of element from file ${url}`;
-              console.error(error);
-              reject(error);
-            }
-          },
-          void 0,
-          (error) => {
-            console.error(`Error loading GL(B|TF) from ${url}: ${error}`);
-            reject(error);
+          (loaded, total) => {
           }
         );
+        if (fileType === "model") {
+          resolve(modelLoadResult.group);
+        } else if (fileType === "animation") {
+          resolve(modelLoadResult.animations[0]);
+        } else {
+          const error = `Trying to load unknown ${fileType} type of element from file ${url}`;
+          console.error(error);
+          reject(error);
+        }
       });
     } else {
       console.error(`Error: can't recognize ${url} extension: ${extension}`);
@@ -2011,17 +2417,9 @@ var KeyInputManager = class {
     this.shouldCaptureKeyPress = shouldCaptureKeyPress;
     this.keys = /* @__PURE__ */ new Map();
     this.eventHandlerCollection = new EventHandlerCollection();
-    this.directionJoystick = null;
     this.eventHandlerCollection.add(document, "keydown", this.onKeyDown.bind(this));
     this.eventHandlerCollection.add(document, "keyup", this.onKeyUp.bind(this));
     this.eventHandlerCollection.add(window, "blur", this.handleUnfocus.bind(this));
-    this.directionJoystick = new VirtualJoystick({
-      radius: 70,
-      inner_radius: 20,
-      x: 70,
-      y: 0,
-      mouse_support: false
-    });
   }
   handleUnfocus(_event) {
     this.keys.clear();
@@ -2045,19 +2443,19 @@ var KeyInputManager = class {
     return this.keys.get(key) || false;
   }
   isMovementKeyPressed() {
-    return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key)) || this.directionJoystick.hasDirection;
+    return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
   }
   get forward() {
-    return this.isKeyPressed("w" /* W */) || this.directionJoystick.up;
+    return this.isKeyPressed("w" /* W */);
   }
   get backward() {
-    return this.isKeyPressed("s" /* S */) || this.directionJoystick.down;
+    return this.isKeyPressed("s" /* S */);
   }
   get left() {
-    return this.isKeyPressed("a" /* A */) || this.directionJoystick.left;
+    return this.isKeyPressed("a" /* A */);
   }
   get right() {
-    return this.isKeyPressed("d" /* D */) || this.directionJoystick.right;
+    return this.isKeyPressed("d" /* D */);
   }
   get run() {
     return this.isKeyPressed("shift" /* SHIFT */);
@@ -2085,40 +2483,35 @@ import {
 } from "mml-web";
 import { Group as Group3 } from "three";
 var MMLCompositionScene = class {
-  constructor(targetElement, renderer, scene, camera, audioListener, collisionsManager, getUserPositionAndRotation) {
-    this.renderer = renderer;
-    this.scene = scene;
-    this.camera = camera;
-    this.audioListener = audioListener;
-    this.collisionsManager = collisionsManager;
-    this.getUserPositionAndRotation = getUserPositionAndRotation;
+  constructor(config) {
+    this.config = config;
     this.chatProbes = /* @__PURE__ */ new Set();
     this.group = new Group3();
-    this.promptManager = PromptManager.init(targetElement);
+    this.promptManager = PromptManager.init(this.config.targetElement);
     const { interactionListener, interactionManager } = InteractionManager.init(
-      targetElement,
-      this.camera,
-      this.scene
+      this.config.targetElement,
+      this.config.camera,
+      this.config.scene
     );
     this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.loadingProgressManager = new LoadingProgressManager();
     this.mmlScene = {
-      getAudioListener: () => this.audioListener,
-      getRenderer: () => this.renderer,
-      getThreeScene: () => this.scene,
+      getAudioListener: () => this.config.audioListener,
+      getRenderer: () => this.config.renderer,
+      getThreeScene: () => this.config.scene,
       getRootContainer: () => this.group,
-      getCamera: () => this.camera,
+      getCamera: () => this.config.camera,
       addCollider: (object, mElement) => {
-        this.collisionsManager.addMeshesGroup(object, mElement);
+        this.config.collisionsManager.addMeshesGroup(object, mElement);
       },
       updateCollider: (object) => {
-        this.collisionsManager.updateMeshesGroup(object);
+        this.config.collisionsManager.updateMeshesGroup(object);
       },
       removeCollider: (object) => {
-        this.collisionsManager.removeMeshesGroup(object);
+        this.config.collisionsManager.removeMeshesGroup(object);
       },
-      getUserPositionAndRotation: this.getUserPositionAndRotation,
+      getUserPositionAndRotation: this.config.getUserPositionAndRotation,
       addInteraction: (interaction) => {
         this.interactionListener.addInteraction(interaction);
       },
@@ -2143,7 +2536,7 @@ var MMLCompositionScene = class {
         return this.loadingProgressManager;
       }
     };
-    this.clickTrigger = MMLClickTrigger.init(targetElement, this.mmlScene);
+    this.clickTrigger = MMLClickTrigger.init(this.config.targetElement, this.mmlScene);
   }
   onChatMessage(message) {
     for (const chatProbe of this.chatProbes) {
@@ -2163,8 +2556,8 @@ import { Pane } from "tweakpane";
 
 // src/tweakpane/blades/bcsFolder.ts
 var bcsValues = {
-  brightness: 0,
-  contrast: 1,
+  brightness: 0.06,
+  contrast: 1.2,
   saturation: 1
 };
 var bcsOptions = {
@@ -2211,10 +2604,10 @@ var BrightnessContrastSaturationFolder = class {
 // src/tweakpane/blades/environmentFolder.ts
 var sunValues = {
   sunPosition: {
-    sunAzimuthalAngle: 214.5,
-    sunPolarAngle: -41.5
+    sunAzimuthalAngle: 219,
+    sunPolarAngle: -37
   },
-  sunIntensity: 1,
+  sunIntensity: 3.7,
   sunColor: { r: 1, g: 1, b: 1 }
 };
 var sunOptions = {
@@ -2222,20 +2615,29 @@ var sunOptions = {
     sunAzimuthalAngle: { min: 0, max: 360, step: 1 },
     sunPolarAngle: { min: -90, max: 90, step: 1 }
   },
-  sunIntensity: { min: 0, max: 3, step: 0.05 }
+  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.05,
+    ambientLightIntensity: 0.27,
     ambientLightColor: { r: 1, g: 1, b: 1 }
   },
   fog: {
-    fogNear: 30,
-    fogFar: 210,
-    fogColor: { r: 0.42, g: 0.48, b: 0.59 }
+    fogNear: 21,
+    fogFar: 180,
+    fogColor: { r: 0.7, g: 0.7, b: 0.7 }
   }
 };
 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 }
   },
@@ -2248,6 +2650,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,
@@ -2263,7 +2668,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",
@@ -2272,13 +2682,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)
@@ -2313,9 +2723,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)
@@ -2336,6 +2780,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();
@@ -2356,8 +2807,6 @@ var EnvironmentFolder = class {
           setFog();
           break;
         }
-        default:
-          break;
       }
     });
   }
@@ -2365,15 +2814,15 @@ var EnvironmentFolder = class {
 
 // src/tweakpane/blades/postExtrasFolder.ts
 var extrasValues = {
-  grain: 0.055,
-  bloom: 3
+  grain: 0.045,
+  bloom: 0.15
 };
 var extrasOptions = {
   grain: {
     amount: { min: 0, max: 0.2, step: 2e-3 }
   },
   bloom: {
-    amount: { min: 0, max: 5, step: 0.05 }
+    amount: { min: 0, max: 50, step: 0.05 }
   }
 };
 var PostExtrasFolder = class {
@@ -2405,16 +2854,12 @@ var PostExtrasFolder = class {
 var rendererValues = {
   shadowMap: 2,
   toneMapping: 5,
-  exposure: 1,
-  bgIntensity: 1,
-  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",
@@ -2438,6 +2883,8 @@ var setShadowMapType = (value) => {
 };
 var setToneMappingType = (value) => {
   monitoredValues.toneMappingType = toneMappingTypes[value];
+  rendererValues.toneMapping = value;
+  console.log(rendererValues.toneMapping);
 };
 var RendererFolder = class {
   constructor(parentFolder, expand = false) {
@@ -2450,23 +2897,21 @@ 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)
         return;
       switch (target) {
         case "shadowMap": {
-          const value = e.value;
-          renderer.shadowMap.type = value;
-          setShadowMapType(value);
+          const value2 = e.value;
+          renderer.shadowMap.type = value2;
+          setShadowMapType(value2);
           break;
         }
         case "toneMapping":
-          renderer.toneMapping = e.value;
+          const value = e.value;
           toneMappingFolder.hidden = e.value !== 5;
           toneMappingPass.enabled = e.value === 5 ? true : false;
           setToneMappingType(e.value);
@@ -2474,12 +2919,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;
       }
@@ -2538,10 +2977,10 @@ var ppssaoValues = {
   samples: 30,
   rings: 11,
   luminanceInfluence: 0.7,
-  radius: 0.03,
-  intensity: 2.5,
-  bias: 0.05,
-  fade: 0.03,
+  radius: 0.045,
+  intensity: 3.14,
+  bias: 0.01,
+  fade: 0.06,
   resolutionScale: 0.5,
   color: { r: 0, g: 0, b: 0 },
   worldDistanceThreshold: 30,
@@ -2568,7 +3007,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,
@@ -2742,6 +3181,10 @@ var SSAOFolder = class {
         case "enabled":
           if (e.value === true) {
             composer.addPass(n8aopass, this.postProcessingSSAOIndex + 2);
+            composer.passes[this.postProcessingSSAOIndex + 2].setSize(
+              window.innerWidth,
+              window.innerHeight
+            );
           } else {
             composer.removePass(n8aopass);
           }
@@ -2784,7 +3227,7 @@ var SSAOFolder = class {
 
 // src/tweakpane/blades/toneMappingFolder.ts
 var toneMappingValues = {
-  mode: 2,
+  mode: 7,
   resolution: 512,
   whitePoint: 32,
   middleGrey: 21,
@@ -2793,20 +3236,24 @@ var toneMappingValues = {
   adaptationRate: 2
 };
 var toneMappingOptions = {
-  mode: { min: 0, max: 4, step: 1 },
+  mode: { min: 0, max: 8, step: 1 },
   resolution: { min: 64, max: 512, step: 64 },
   whitePoint: { min: 0, max: 32, step: 0.01 },
   middleGrey: { min: 0, max: 32, step: 0.01 },
   minLuminance: { min: 0, max: 32, step: 1e-3 },
-  averageLuminance: { min: 1e-3, max: 0.2, step: 1e-3 },
+  averageLuminance: { min: 1e-3, max: 2, step: 1e-3 },
   adaptationRate: { min: 0.1, max: 2, step: 0.1 }
 };
 var customToneMappingTypes = {
-  0: "REINHARD",
-  1: "REINHARD2",
-  2: "REINHARD2_ADAPTIVE",
-  3: "OPTIMIZED_CINEON",
-  4: "ACES_FILMIC"
+  0: "LINEAR",
+  1: "REINHARD",
+  2: "REINHARD2",
+  3: "REINHARD2_ADAPTIVE",
+  4: "UNCHARTED2",
+  5: "OPTIMIZED_CINEON",
+  6: "ACES_FILMIC",
+  7: "AGX",
+  8: "NEUTRAL"
 };
 var customToneMappingBlade = {
   customToneMappingType: customToneMappingTypes[toneMappingValues.mode]
@@ -2829,13 +3276,13 @@ var ToneMappingFolder = class {
       "minLuminance",
       toneMappingOptions.minLuminance
     );
-    this.minLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
+    this.minLuminance.hidden = false;
     this.avgLuminance = this.folder.addBinding(
       toneMappingValues,
       "averageLuminance",
       toneMappingOptions.averageLuminance
     );
-    this.avgLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
+    this.avgLuminance.hidden = false;
     this.folder.addBinding(toneMappingValues, "adaptationRate", toneMappingOptions.adaptationRate);
   }
   setupChangeEvent(toneMappingEffect) {
@@ -2844,8 +3291,6 @@ var ToneMappingFolder = class {
       if (!target)
         return;
       if (target === "mode") {
-        this.minLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
-        this.avgLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
         setCustomToneMappingType(e.value);
       }
       toneMappingEffect[target] = e.value;
@@ -2942,16 +3387,26 @@ var tweakPaneStyle = `
 
 // src/tweakpane/TweakPane.ts
 var TweakPane = class {
-  constructor(renderer, scene, composer) {
+  constructor(holderElement, renderer, scene, composer) {
+    this.holderElement = holderElement;
     this.renderer = renderer;
     this.scene = scene;
     this.composer = composer;
     this.saveVisibilityInLocalStorage = true;
     this.guiVisible = false;
-    const appWrapper = document.getElementById("app");
     const tweakPaneWrapper = document.createElement("div");
-    tweakPaneWrapper.id = "tweakpane-panel";
-    appWrapper.appendChild(tweakPaneWrapper);
+    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.gui.registerPlugin(EssentialsPlugin);
     if (this.saveVisibilityInLocalStorage) {
@@ -2976,11 +3431,14 @@ 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)();
+    window.addEventListener("keydown", (e) => {
+      this.processKey(e);
+    });
+    this.setupGUIListeners();
   }
   setupGUIListeners() {
     const gui = this.gui;
@@ -2995,9 +3453,8 @@ var TweakPane = class {
     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
@@ -3006,7 +3463,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", () => {
@@ -3019,9 +3484,21 @@ var TweakPane = class {
       });
     });
   }
+  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();
@@ -3077,33 +3554,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 as LoadingManager2,
+  LoadingManager,
+  MathUtils,
   PMREMGenerator,
-  SRGBColorSpace,
   Scene as Scene4,
+  SRGBColorSpace,
   Vector2 as Vector27,
   WebGLRenderer as WebGLRenderer4
 } from "three";
@@ -3135,9 +3616,9 @@ var Sun = class extends Group4 {
     if (this.debug === true) {
       this.camHelper = new CameraHelper(this.shadowCamera);
     }
-    this.directionalLight = new DirectionalLight(16777215, 0.5);
+    this.directionalLight = new DirectionalLight(16777215);
     this.directionalLight.intensity = sunValues.sunIntensity;
-    this.directionalLight.shadow.normalBias = 0.01;
+    this.directionalLight.shadow.normalBias = 0.1;
     this.directionalLight.shadow.radius = 0.02;
     this.directionalLight.shadow.camera = this.shadowCamera;
     this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
@@ -4648,7 +5129,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);
@@ -4657,15 +5143,14 @@ var Composer = class {
     this.gaussGrainEffect = GaussGrainEffect;
     this.ambientLight = null;
     this.sun = null;
+    var _a;
     this.scene = scene;
     this.postPostScene = new Scene4();
     this.camera = camera;
     this.spawnSun = spawnSun;
     this.renderer = new WebGLRenderer4({
       powerPreference: "high-performance",
-      antialias: false,
-      stencil: false,
-      depth: false
+      antialias: false
     });
     this.renderer.outputColorSpace = SRGBColorSpace;
     this.renderer.info.autoReset = false;
@@ -4674,7 +5159,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
@@ -4707,6 +5194,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
     });
@@ -4746,6 +5236,8 @@ var Composer = class {
     this.bcs.uniforms.contrast.value = bcsValues.contrast;
     this.bcs.uniforms.saturation.value = bcsValues.saturation;
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
+    this.gaussGrainEffect.uniforms.amount.value = extrasValues.grain;
+    this.gaussGrainEffect.uniforms.alpha.value = 1;
     this.smaaPass = new EffectPass2(this.camera, this.smaaEffect);
     this.effectComposer.addPass(this.renderPass);
     if (ppssaoValues.enabled) {
@@ -4756,7 +5248,6 @@ var Composer = class {
       this.effectComposer.addPass(this.n8aopass);
     }
     this.effectComposer.addPass(this.fxaaPass);
-    this.effectComposer.addPass(this.smaaPass);
     this.effectComposer.addPass(this.bloomPass);
     this.effectComposer.addPass(this.toneMappingPass);
     this.effectComposer.addPass(this.bcsPass);
@@ -4765,6 +5256,7 @@ var Composer = class {
       this.sun = new Sun();
       this.scene.add(this.sun);
     }
+    this.updateSunValues();
     this.resizeListener = () => {
       this.fitContainer();
     };
@@ -4786,6 +5278,14 @@ 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)
     );
@@ -4829,30 +5329,83 @@ var Composer = class {
     this.bloomPass.setSize(this.width, this.height);
     this.toneMappingPass.setSize(this.width, this.height);
     this.gaussGrainPass.setSize(this.width, this.height);
+    this.gaussGrainEffect.uniforms.resolution.value = new Vector27(this.width, this.height);
     this.renderer.setSize(this.width, this.height);
   }
   render(timeManager) {
     this.renderer.info.reset();
     this.normalPass.texture.needsUpdate = true;
-    this.gaussGrainEffect.uniforms.resolution.value = this.resolution;
     this.gaussGrainEffect.uniforms.time.value = timeManager.time;
-    this.gaussGrainEffect.uniforms.alpha.value = 1;
     this.effectComposer.render();
+    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, () => {
+      const hdrJpgEquirectangularMap = hdrJpg.renderTarget.texture;
+      hdrJpgEquirectangularMap.mapping = EquirectangularReflectionMapping;
+      hdrJpgEquirectangularMap.needsUpdate = true;
+      const envMap = pmremGenerator.fromEquirectangular(hdrJpgEquirectangularMap).texture;
+      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 = 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();
+      }
+      hdrJpg.dispose();
+    });
+  }
   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 LoadingManager2()).load(
+    new RGBELoader(new LoadingManager()).load(
       url,
       (texture) => {
         const envMap = pmremGenerator.fromEquirectangular(texture).texture;
         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();
@@ -4870,7 +5423,7 @@ var Composer = class {
       return;
     const fileInput = document.createElement("input");
     fileInput.type = "file";
-    fileInput.accept = ".hdr";
+    fileInput.accept = ".hdr,.jpg";
     fileInput.addEventListener("change", () => {
       var _a;
       const file = (_a = fileInput.files) == null ? void 0 : _a[0];
@@ -4878,9 +5431,16 @@ var Composer = class {
         console.log("no file");
         return;
       }
+      const extension = file.name.split(".").pop();
       const fileURL = URL.createObjectURL(file);
       if (fileURL) {
-        this.useHDRI(fileURL, true);
+        if (extension === "hdr") {
+          this.useHDRI(fileURL, true);
+        } else if (extension === "jpg") {
+          this.useHDRJPG(fileURL);
+        } else {
+          console.error(`Unrecognized extension for HDR file ${file.name}`);
+        }
         URL.revokeObjectURL(fileURL);
         document.body.removeChild(fileInput);
       }
@@ -4912,6 +5472,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
@@ -4969,7 +5574,7 @@ import {
   Box3,
   Color as Color8,
   DoubleSide,
-  Euler as Euler3,
+  Euler as Euler4,
   Group as Group5,
   Line3 as Line32,
   Matrix4 as Matrix46,
@@ -4993,7 +5598,7 @@ var CollisionsManager = class {
     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();
@@ -5195,6 +5800,200 @@ var CollisionsManager = class {
     this.collisionTrigger.setCurrentCollisions(reportedCollidingElements);
   }
 };
+
+// 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,
+  RepeatWrapping as RepeatWrapping2
+} from "three";
+var canvas = document.createElement("canvas");
+canvas.width = 2;
+canvas.height = 2;
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "#e0e0e0";
+ctx.fillRect(0, 0, 2, 2);
+ctx.fillStyle = "#606060";
+ctx.fillRect(0, 0, 1, 1);
+ctx.fillRect(1, 1, 1, 1);
+var GroundPlane = class extends Group6 {
+  constructor() {
+    super();
+    this.floorSize = 210;
+    this.floorTexture = null;
+    this.floorGeometry = new CircleGeometry2(this.floorSize, this.floorSize);
+    this.floorMesh = null;
+    this.floorMaterial = new MeshStandardMaterial3({
+      color: 16777215,
+      side: FrontSide2,
+      metalness: 0.05,
+      roughness: 0.95
+    });
+    this.floorMesh = new Mesh6(this.floorGeometry, this.floorMaterial);
+    this.floorMesh.receiveShadow = true;
+    this.floorMesh.rotation.x = Math.PI * -0.5;
+    this.add(this.floorMesh);
+    this.floorTexture = new CanvasTexture(canvas);
+    this.floorTexture.wrapS = RepeatWrapping2;
+    this.floorTexture.wrapT = RepeatWrapping2;
+    this.floorTexture.magFilter = NearestFilter2;
+    this.floorTexture.minFilter = LinearMipMapLinearFilter;
+    this.floorTexture.repeat.set(this.floorSize / 1.5, this.floorSize / 1.5);
+    this.floorMaterial.map = this.floorTexture;
+    this.floorMaterial.needsUpdate = true;
+  }
+};
+
+// src/loading-screen/LoadingScreen.ts
+import { LoadingProgressManager as LoadingProgressManager2 } from "mml-web";
+var LoadingScreen = class {
+  constructor(loadingProgressManager) {
+    this.loadingProgressManager = loadingProgressManager;
+    this.hasCompleted = false;
+    this.element = document.createElement("div");
+    this.element.style.position = "absolute";
+    this.element.style.top = "0";
+    this.element.style.left = "0";
+    this.element.style.width = "100%";
+    this.element.style.height = "100%";
+    this.element.style.background = "linear-gradient(45deg, #28284B 0%, #303056 100%)";
+    this.element.style.color = "white";
+    this.element.addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
+    this.element.addEventListener("mousedown", (event) => {
+      event.stopPropagation();
+    });
+    this.element.addEventListener("mousemove", (event) => {
+      event.stopPropagation();
+    });
+    this.element.addEventListener("mouseup", (event) => {
+      event.stopPropagation();
+    });
+    this.loadingBannerText = document.createElement("div");
+    this.loadingBannerText.textContent = "Loading...";
+    this.loadingBannerText.style.position = "absolute";
+    this.loadingBannerText.style.display = "flex";
+    this.loadingBannerText.style.top = "0";
+    this.loadingBannerText.style.left = "0";
+    this.loadingBannerText.style.width = "100%";
+    this.loadingBannerText.style.height = "100%";
+    this.loadingBannerText.style.color = "white";
+    this.loadingBannerText.style.fontSize = "80px";
+    this.loadingBannerText.style.fontWeight = "bold";
+    this.loadingBannerText.style.fontFamily = "sans-serif";
+    this.loadingBannerText.style.alignItems = "center";
+    this.loadingBannerText.style.justifyContent = "center";
+    this.element.append(this.loadingBannerText);
+    this.progressDebugViewHolder = document.createElement("div");
+    this.progressDebugViewHolder.style.display = "flex";
+    this.progressDebugViewHolder.style.position = "absolute";
+    this.progressDebugViewHolder.style.maxHeight = "calc(100% - 74px)";
+    this.progressDebugViewHolder.style.left = "0";
+    this.progressDebugViewHolder.style.bottom = "74px";
+    this.progressDebugViewHolder.style.width = "100%";
+    this.progressDebugViewHolder.style.justifyContent = "center";
+    this.element.append(this.progressDebugViewHolder);
+    this.progressDebugView = document.createElement("div");
+    this.progressDebugView.style.backgroundColor = "rgba(128, 128, 128, 0.25)";
+    this.progressDebugView.style.border = "1px solid black";
+    this.progressDebugView.style.maxWidth = "100%";
+    this.progressDebugView.style.overflow = "auto";
+    this.progressDebugViewHolder.append(this.progressDebugView);
+    this.debugCheckbox = document.createElement("input");
+    this.debugCheckbox.type = "checkbox";
+    this.debugCheckbox.checked = false;
+    this.debugCheckbox.addEventListener("change", () => {
+      this.progressDebugElement.style.display = this.debugCheckbox.checked ? "block" : "none";
+      if (this.hasCompleted) {
+        this.dispose();
+      }
+    });
+    this.debugLabel = document.createElement("label");
+    this.debugLabel.textContent = "Debug loading";
+    this.debugLabel.style.fontFamily = "sans-serif";
+    this.debugLabel.style.padding = "5px";
+    this.debugLabel.style.display = "inline-block";
+    this.debugLabel.style.userSelect = "none";
+    this.debugLabel.append(this.debugCheckbox);
+    this.progressDebugView.append(this.debugLabel);
+    this.progressDebugElement = document.createElement("pre");
+    this.progressDebugElement.style.margin = "0";
+    this.progressDebugElement.style.display = this.debugCheckbox.checked ? "block" : "none";
+    this.progressDebugView.append(this.progressDebugElement);
+    this.progressBarHolder = document.createElement("div");
+    this.progressBarHolder.style.display = "flex";
+    this.progressBarHolder.style.alignItems = "center";
+    this.progressBarHolder.style.justifyContent = "center";
+    this.progressBarHolder.style.position = "absolute";
+    this.progressBarHolder.style.bottom = "20px";
+    this.progressBarHolder.style.left = "0";
+    this.progressBarHolder.style.width = "100%";
+    this.element.append(this.progressBarHolder);
+    this.progressBarBackground = document.createElement("div");
+    this.progressBarBackground.style.position = "relative";
+    this.progressBarBackground.style.width = "500px";
+    this.progressBarBackground.style.maxWidth = "80%";
+    this.progressBarBackground.style.backgroundColor = "gray";
+    this.progressBarBackground.style.height = "50px";
+    this.progressBarBackground.style.lineHeight = "50px";
+    this.progressBarBackground.style.borderRadius = "25px";
+    this.progressBarBackground.style.border = "2px solid white";
+    this.progressBarBackground.style.overflow = "hidden";
+    this.progressBarHolder.append(this.progressBarBackground);
+    this.progressBar = document.createElement("div");
+    this.progressBar.style.position = "absolute";
+    this.progressBar.style.top = "0";
+    this.progressBar.style.left = "0";
+    this.progressBar.style.width = "0";
+    this.progressBar.style.height = "100%";
+    this.progressBar.style.backgroundColor = "#0050a4";
+    this.progressBarBackground.append(this.progressBar);
+    this.loadingStatusText = document.createElement("div");
+    this.loadingStatusText.style.position = "absolute";
+    this.loadingStatusText.style.top = "0";
+    this.loadingStatusText.style.left = "0";
+    this.loadingStatusText.style.width = "100%";
+    this.loadingStatusText.style.height = "100%";
+    this.loadingStatusText.style.color = "white";
+    this.loadingStatusText.style.textAlign = "center";
+    this.loadingStatusText.style.verticalAlign = "middle";
+    this.loadingStatusText.style.fontFamily = "sans-serif";
+    this.loadingStatusText.style.fontWeight = "bold";
+    this.loadingStatusText.textContent = "Loading...";
+    this.progressBarBackground.append(this.loadingStatusText);
+    this.loadingCallback = () => {
+      const [loadingRatio, completedLoading] = this.loadingProgressManager.toRatio();
+      if (completedLoading) {
+        if (!this.hasCompleted) {
+          this.hasCompleted = true;
+          if (!this.debugCheckbox.checked) {
+            this.dispose();
+          }
+        }
+        this.loadingStatusText.textContent = "Completed";
+        this.progressBar.style.width = "100%";
+      } else {
+        this.loadingStatusText.textContent = `Loading... ${(loadingRatio * 100).toFixed(2)}%`;
+        this.progressBar.style.width = `${loadingRatio * 100}%`;
+      }
+      this.progressDebugElement.textContent = LoadingProgressManager2.LoadingProgressSummaryToString(
+        this.loadingProgressManager.toSummary()
+      );
+    };
+    this.loadingProgressManager.addProgressCallback(this.loadingCallback);
+  }
+  dispose() {
+    this.loadingProgressManager.removeProgressCallback(this.loadingCallback);
+    this.element.remove();
+  }
+};
 export {
   AnimationState,
   CameraManager,
@@ -5202,11 +6001,14 @@ export {
   CharacterModelLoader,
   CollisionsManager,
   Composer,
+  GroundPlane,
   KeyInputManager,
+  LoadingScreen,
   MMLCompositionScene,
   Sun,
   TimeManager,
   TweakPane,
+  VirtualJoystick,
   clamp,
   decodeCharacterAndCamera,
   ease,