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

package/build/index.js

@@ -1,5 +1,6 @@
 // src/camera/CameraManager.ts
 import { PerspectiveCamera, Raycaster, Vector3 as Vector32 } from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 // src/helpers/math-helpers.ts
 import { Quaternion, Vector3, Vector4 } from "three";
@@ -82,159 +83,6 @@ var EventHandlerCollection = class _EventHandlerCollection {
   }
 };
 
-// src/input/VirtualJoystick.ts
-var VirtualJoystick = class _VirtualJoystick {
-  constructor(holderElement, attrs) {
-    this.holderElement = holderElement;
-    this.left = false;
-    this.right = false;
-    this.up = false;
-    this.down = false;
-    this.hasDirection = false;
-    this.clearFlags = () => {
-      this.left = false;
-      this.right = false;
-      this.up = false;
-      this.down = false;
-      this.hasDirection = false;
-      this.control.style.left = `${this.width / 2 - this.inner_radius}px`;
-      this.control.style.top = `${this.height / 2 - this.inner_radius}px`;
-    };
-    this.radius = attrs.radius || 50;
-    this.inner_radius = attrs.inner_radius || this.radius / 2;
-    this.anchor = attrs.anchor || "left";
-    this.x = attrs.x || 0;
-    this.y = attrs.y || 0;
-    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.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 {
-      document.createEvent("TouchEvent");
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-  checkTouch() {
-    return _VirtualJoystick.checkForTouch();
-  }
-  setupBaseAndControl() {
-    this.base = document.createElement("span");
-    let divStyle = this.base.style;
-    divStyle.width = `${this.radius * 2}px`;
-    divStyle.height = `${this.radius * 2}px`;
-    divStyle.position = "absolute";
-    divStyle.left = `${this.width / 2 - this.radius}px`;
-    divStyle.bottom = `${this.height / 2 - this.radius}px`;
-    divStyle.borderRadius = "50%";
-    divStyle.borderColor = "rgba(200,200,200,0.5)";
-    divStyle.borderWidth = "2px";
-    divStyle.borderStyle = "solid";
-    this.div.appendChild(this.base);
-    this.control = document.createElement("span");
-    divStyle = this.control.style;
-    divStyle.width = `${this.inner_radius * 2}px`;
-    divStyle.height = `${this.inner_radius * 2}px`;
-    divStyle.position = "absolute";
-    divStyle.left = `${this.width / 2 - this.inner_radius}px`;
-    divStyle.bottom = `${this.height / 2 - this.inner_radius}px`;
-    divStyle.borderRadius = "50%";
-    divStyle.backgroundColor = "rgba(200,200,200,0.3)";
-    divStyle.borderWidth = "1px";
-    divStyle.borderColor = "rgba(200,200,200,0.8)";
-    divStyle.borderStyle = "solid";
-    this.div.appendChild(this.control);
-  }
-  bindEvents() {
-    this.div.addEventListener("touchstart", this.handleTouchStart.bind(this), false);
-    this.div.addEventListener("touchmove", this.handleTouchMove.bind(this), false);
-    this.div.addEventListener("touchend", this.clearFlags.bind(this), false);
-    if (this.mouse_support) {
-      this.div.addEventListener("mousedown", this.handleMouseDown.bind(this));
-      this.div.addEventListener("mousemove", this.handleMouseMove.bind(this));
-      this.div.addEventListener("mouseup", this.handleMouseUp.bind(this));
-    }
-  }
-  handleTouchStart(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    if (evt.touches) {
-      const touch = evt.touches[0];
-      this.updateControlAndDirection(touch);
-    }
-  }
-  handleTouchMove(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    if (evt.touches.length > 0) {
-      const touch = evt.touches[0];
-      this.updateControlAndDirection(touch);
-    }
-  }
-  handleMouseDown(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.updateControlAndDirection(evt);
-  }
-  handleMouseMove(evt) {
-    if (evt.buttons === 1) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      this.updateControlAndDirection(evt);
-    }
-  }
-  handleMouseUp(evt) {
-    this.clearFlags();
-  }
-  updateControlAndDirection(input) {
-    const rect = this.div.getBoundingClientRect();
-    const dx = input.clientX - (rect.left + this.div.offsetWidth / 2);
-    const dy = input.clientY - (rect.top + this.div.offsetHeight / 2);
-    const distance = Math.min(Math.sqrt(dx * dx + dy * dy), this.radius);
-    const angle = Math.atan2(dy, dx);
-    const constrainedX = distance * Math.cos(angle);
-    const constrainedY = distance * Math.sin(angle);
-    this.control.style.left = `${constrainedX + this.width / 2 - this.inner_radius}px`;
-    this.control.style.top = `${constrainedY + this.height / 2 - this.inner_radius}px`;
-    this.up = this.isUp(dx, dy);
-    this.down = this.isDown(dx, dy);
-    this.left = this.isLeft(dx, dy);
-    this.right = this.isRight(dx, dy);
-    this.hasDirection = this.up || this.down || this.left || this.right;
-  }
-  isUp(dx, dy) {
-    return dy < 0 && Math.abs(dx) <= 2 * Math.abs(dy);
-  }
-  isDown(dx, dy) {
-    return dy > 0 && Math.abs(dx) <= 2 * Math.abs(dy);
-  }
-  isLeft(dx, dy) {
-    return dx < 0 && Math.abs(dy) <= 2 * Math.abs(dx);
-  }
-  isRight(dx, dy) {
-    return dx > 0 && Math.abs(dy) <= 2 * Math.abs(dx);
-  }
-};
-
 // src/tweakpane/blades/cameraFolder.ts
 var camValues = {
   initialDistance: 3.3,
@@ -244,10 +92,9 @@ var camValues = {
   maxFOV: 70,
   minFOV: 60,
   invertFOVMapping: false,
-  damping: 0.15,
-  dampingScale: 5e-3,
+  damping: 0.25,
   zoomScale: 0.088,
-  zoomDamping: 0.16
+  zoomDamping: 0.4
 };
 var camOptions = {
   initialDistance: { min: 1, max: 5, step: 0.1 },
@@ -256,8 +103,7 @@ var camOptions = {
   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 },
+  damping: { min: 0.01, max: 1, step: 1e-3 },
   zoomScale: { min: 5e-3, max: 0.3, step: 1e-3 },
   zoomDamping: { min: 0, max: 2, step: 0.01 }
 };
@@ -277,7 +123,6 @@ var CameraFolder = class {
     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);
   }
@@ -326,20 +171,16 @@ var CameraFolder = class {
           cameraManager.recomputeFoV();
           break;
         }
-        case "invertFOVMapping":
+        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;
@@ -371,124 +212,132 @@ function getTweakpaneActive() {
 }
 
 // src/camera/CameraManager.ts
+var cameraPanSensitivity = 20;
+var scrollZoomSensitivity = 0.1;
+var pinchZoomSensitivity = 0.025;
 var CameraManager = class {
   constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
+    this.targetElement = targetElement;
     this.collisionsManager = collisionsManager;
+    this.isMainCameraActive = true;
     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.initialFOV = camValues.initialFOV;
+    this.maxFOV = camValues.maxFOV;
+    this.minFOV = camValues.minFOV;
     this.invertFOVMapping = camValues.invertFOVMapping;
     this.fov = this.initialFOV;
     this.targetFOV = this.initialFOV;
     this.minPolarAngle = Math.PI * 0.25;
     this.maxPolarAngle = Math.PI * 0.95;
-    this.targetDistance = this.initialDistance;
     this.distance = this.initialDistance;
+    this.targetDistance = this.initialDistance;
     this.desiredDistance = this.initialDistance;
-    this.phi = Math.PI / 2;
-    this.theta = Math.PI / 2;
-    this.dragging = false;
     this.target = new Vector32(0, 1.55, 0);
     this.hadTarget = false;
-    this.isLerping = false;
     this.finalTarget = new Vector32();
+    this.isLerping = false;
     this.lerpTarget = new Vector32();
     this.lerpFactor = 0;
     this.lerpDuration = 2.1;
-    this.hasTouchControl = false;
-    this.lastTouchX = 0;
-    this.lastTouchY = 0;
+    this.activePointers = /* @__PURE__ */ new Map();
+    this.targetElement.style.touchAction = "pinch-zoom";
     this.phi = initialPhi;
-    this.targetPhi = initialPhi;
+    this.targetPhi = this.phi;
     this.theta = initialTheta;
-    this.targetTheta = initialTheta;
-    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
+    this.targetTheta = this.theta;
+    const aspect = window.innerWidth / window.innerHeight;
+    this.camera = new PerspectiveCamera(this.fov, aspect, 0.1, 400);
     this.camera.position.set(0, 1.4, -this.initialDistance);
+    this.camera.name = "MainCamera";
+    this.flyCamera = new PerspectiveCamera(this.initialFOV, aspect, 0.1, 400);
+    this.flyCamera.name = "FlyCamera";
+    this.flyCamera.position.copy(this.camera.position);
+    this.flyCamera.name = "FlyCamera";
+    this.orbitControls = new OrbitControls(this.flyCamera, this.targetElement);
+    this.orbitControls.enableDamping = true;
+    this.orbitControls.dampingFactor = 0.05;
+    this.orbitControls.enablePan = true;
+    this.orbitControls.enabled = false;
     this.rayCaster = new Raycaster();
-    this.hasTouchControl = VirtualJoystick.checkForTouch();
+    this.createEventHandlers();
+  }
+  createEventHandlers() {
     this.eventHandlerCollection = EventHandlerCollection.create([
-      [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, "contextmenu", this.onContextMenu.bind(this)]
+      [this.targetElement, "pointerdown", this.onPointerDown.bind(this)],
+      [this.targetElement, "gesturestart", this.preventDefaultAndStopPropagation.bind(this)],
+      [this.targetElement, "wheel", this.onMouseWheel.bind(this)],
+      [this.targetElement, "contextmenu", this.onContextMenu.bind(this)],
+      [document, "pointerup", this.onPointerUp.bind(this)],
+      [document, "pointercancel", this.onPointerUp.bind(this)],
+      [document, "pointermove", this.onPointerMove.bind(this)]
     ]);
-    if (this.hasTouchControl) {
-      this.eventHandlerCollection.add(targetElement, "touchstart", this.onTouchStart.bind(this), {
-        passive: false
-      });
-      this.eventHandlerCollection.add(document, "touchmove", this.onTouchMove.bind(this), {
-        passive: false
-      });
-      this.eventHandlerCollection.add(document, "touchend", this.onTouchEnd.bind(this), {
-        passive: false
-      });
-    }
   }
-  setupTweakPane(tweakPane) {
-    tweakPane.setupCamPane(this);
-  }
-  onTouchStart(evt) {
-    Array.from(evt.touches).forEach((touch) => {
-      this.dragging = true;
-      this.lastTouchX = touch.clientX;
-      this.lastTouchY = touch.clientY;
-    });
+  disposeEventHandlers() {
+    this.eventHandlerCollection.clear();
   }
-  onTouchMove(evt) {
-    if (!this.dragging || getTweakpaneActive()) {
-      return;
-    }
+  preventDefaultAndStopPropagation(evt) {
     evt.preventDefault();
-    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 * this.dampingScale;
-        this.targetPhi -= dy * this.dampingScale;
-        this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
-      }
-    }
+    evt.stopPropagation();
   }
-  onTouchEnd(evt) {
-    if (this.dragging) {
-      const touchEnded = Array.from(evt.changedTouches).some((t) => true);
-      if (touchEnded) {
-        this.dragging = false;
-      }
-    }
+  setupTweakPane(tweakPane) {
+    tweakPane.setupCamPane(this);
   }
-  onMouseDown(event) {
+  onPointerDown(event) {
     if (event.button === 0 || event.button === 2) {
-      this.dragging = true;
+      const pointerInfo = { x: event.clientX, y: event.clientY };
+      this.activePointers.set(event.pointerId, pointerInfo);
       document.body.style.cursor = "none";
     }
   }
-  onMouseUp(event) {
-    if (event.button === 0 || event.button === 2) {
-      this.dragging = false;
-      document.body.style.cursor = "default";
+  onPointerUp(event) {
+    const existingPointer = this.activePointers.get(event.pointerId);
+    if (existingPointer) {
+      this.activePointers.delete(event.pointerId);
+      if (this.activePointers.size === 0) {
+        document.body.style.cursor = "default";
+      }
     }
   }
-  onMouseMove(event) {
+  getAveragePointerPositionAndSpread() {
+    const existingSum = { x: 0, y: 0 };
+    this.activePointers.forEach((p) => {
+      existingSum.x += p.x;
+      existingSum.y += p.y;
+    });
+    const aX = existingSum.x / this.activePointers.size;
+    const aY = existingSum.y / this.activePointers.size;
+    let sumOfDistances = 0;
+    this.activePointers.forEach((p) => {
+      const distance = Math.sqrt((p.x - aX) ** 2 + (p.y - aY) ** 2);
+      sumOfDistances += distance;
+    });
+    return { pos: { x: aX, y: aY }, spread: sumOfDistances / this.activePointers.size };
+  }
+  onPointerMove(event) {
     if (getTweakpaneActive()) {
       return;
     }
-    if (this.dragging) {
-      if (this.targetTheta === null || this.targetPhi === null)
-        return;
-      this.targetTheta += event.movementX * this.dampingScale;
-      this.targetPhi -= event.movementY * this.dampingScale;
+    const existingPointer = this.activePointers.get(event.pointerId);
+    if (existingPointer) {
+      const previous = this.getAveragePointerPositionAndSpread();
+      existingPointer.x = event.clientX;
+      existingPointer.y = event.clientY;
+      const latest = this.getAveragePointerPositionAndSpread();
+      const sX = latest.pos.x - previous.pos.x;
+      const sY = latest.pos.y - previous.pos.y;
+      const dx = sX / this.targetElement.clientWidth * cameraPanSensitivity;
+      const dy = sY / this.targetElement.clientHeight * cameraPanSensitivity;
+      if (this.activePointers.size > 1) {
+        const zoomDelta = latest.spread - previous.spread;
+        this.zoom(-zoomDelta * pinchZoomSensitivity);
+      }
+      this.targetTheta += dx;
+      this.targetPhi -= dy;
       this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
       event.preventDefault();
     }
@@ -497,14 +346,17 @@ var CameraManager = class {
     if (getTweakpaneActive()) {
       return;
     }
-    const scrollAmount = event.deltaY * this.zoomScale * 0.1;
-    this.targetDistance += scrollAmount;
+    event.preventDefault();
+    const scrollAmount = event.deltaY * this.zoomScale * scrollZoomSensitivity;
+    this.zoom(scrollAmount);
+  }
+  zoom(delta) {
+    this.targetDistance += delta;
     this.targetDistance = Math.max(
       this.minDistance,
       Math.min(this.maxDistance, this.targetDistance)
     );
     this.desiredDistance = this.targetDistance;
-    event.preventDefault();
   }
   onContextMenu(event) {
     event.preventDefault();
@@ -533,12 +385,12 @@ var CameraManager = class {
     const dy = this.camera.position.y - this.target.y;
     const dz = this.camera.position.z - this.target.z;
     this.targetDistance = Math.sqrt(dx * dx + dy * dy + dz * dz);
-    this.targetTheta = Math.atan2(dz, dx);
-    this.targetPhi = Math.acos(dy / this.targetDistance);
-    this.phi = this.targetPhi;
-    this.theta = this.targetTheta;
     this.distance = this.targetDistance;
     this.desiredDistance = this.targetDistance;
+    this.theta = Math.atan2(dz, dx);
+    this.targetTheta = this.theta;
+    this.phi = Math.acos(dy / this.targetDistance);
+    this.targetPhi = this.phi;
     this.recomputeFoV(true);
   }
   adjustCameraPosition() {
@@ -546,25 +398,28 @@ var CameraManager = class {
     const offset = new Vector32(0, 0, offsetDistance);
     offset.applyEuler(this.camera.rotation);
     const rayOrigin = this.camera.position.clone().add(offset);
-    const rayDirection = this.target.clone().sub(rayOrigin).normalize();
-    this.rayCaster.set(rayOrigin, rayDirection);
+    const rayDirection = rayOrigin.sub(this.target.clone()).normalize();
+    this.rayCaster.set(this.target.clone(), rayDirection);
     const firstRaycastHit = this.collisionsManager.raycastFirst(this.rayCaster.ray);
-    const cameraToPlayerDistance = this.camera.position.distanceTo(this.target);
-    if (firstRaycastHit !== null && firstRaycastHit[0] <= cameraToPlayerDistance) {
-      this.targetDistance = cameraToPlayerDistance - firstRaycastHit[0];
-      this.distance = this.targetDistance;
+    if (firstRaycastHit !== null && firstRaycastHit[0] <= this.desiredDistance) {
+      const distanceToCollision = firstRaycastHit[0] - 0.1;
+      this.targetDistance = distanceToCollision;
+      this.distance = distanceToCollision;
     } else {
-      this.targetDistance += (this.desiredDistance - this.targetDistance) * this.damping * 4;
+      this.targetDistance = this.desiredDistance;
     }
   }
   dispose() {
-    this.eventHandlerCollection.clear();
+    this.disposeEventHandlers();
+    this.orbitControls.dispose();
+    document.body.style.cursor = "";
   }
   easeOutExpo(x) {
     return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
   }
   updateAspect(aspect) {
     this.camera.aspect = aspect;
+    this.flyCamera.aspect = aspect;
   }
   recomputeFoV(immediately = false) {
     this.targetFOV = remap(
@@ -578,7 +433,31 @@ var CameraManager = class {
       this.fov = this.targetFOV;
     }
   }
+  toggleFlyCamera() {
+    this.isMainCameraActive = !this.isMainCameraActive;
+    this.orbitControls.enabled = !this.isMainCameraActive;
+    if (!this.isMainCameraActive) {
+      this.updateAspect(window.innerWidth / window.innerHeight);
+      this.flyCamera.position.copy(this.camera.position);
+      this.flyCamera.rotation.copy(this.camera.rotation);
+      const target = new Vector32();
+      this.camera.getWorldDirection(target);
+      target.multiplyScalar(this.targetDistance).add(this.camera.position);
+      this.orbitControls.target.copy(target);
+      this.orbitControls.update();
+      this.disposeEventHandlers();
+    } else {
+      this.createEventHandlers();
+    }
+  }
+  get activeCamera() {
+    return this.isMainCameraActive ? this.camera : this.flyCamera;
+  }
   update() {
+    if (!this.isMainCameraActive) {
+      this.orbitControls.update();
+      return;
+    }
     if (this.isLerping && this.lerpFactor < 1) {
       this.lerpFactor += 0.01 / this.lerpDuration;
       this.lerpFactor = Math.min(1, this.lerpFactor);
@@ -586,24 +465,25 @@ var CameraManager = class {
     } else {
       this.adjustCameraPosition();
     }
-    if (this.phi !== null && this.targetPhi !== null && this.theta !== null && this.targetTheta !== null) {
-      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.recomputeFoV();
-      this.fov += (this.targetFOV - this.fov) * this.damping;
-      this.camera.fov = this.fov;
-      this.camera.updateProjectionMatrix();
-      this.camera.position.set(x, y, z);
-      this.camera.lookAt(this.target);
-      if (this.isLerping && this.lerpFactor >= 1) {
-        this.isLerping = false;
-      }
+    this.distance += (this.targetDistance - this.distance) * this.zoomDamping;
+    this.theta += (this.targetTheta - this.theta) * this.damping;
+    this.phi += (this.targetPhi - this.phi) * 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.recomputeFoV();
+    this.fov += (this.targetFOV - this.fov) * this.zoomDamping;
+    this.camera.fov = this.fov;
+    this.camera.updateProjectionMatrix();
+    this.camera.position.set(x, y, z);
+    this.camera.lookAt(this.target);
+    if (this.isLerping && this.lerpFactor >= 1) {
+      this.isLerping = false;
     }
   }
+  hasActiveInput() {
+    return this.activePointers.size > 0;
+  }
 };
 
 // src/character/Character.ts
@@ -1480,6 +1360,9 @@ var Character = class extends Group {
   }
   async load() {
     const previousModel = this.model;
+    if (previousModel && previousModel.mesh) {
+      this.remove(previousModel.mesh);
+    }
     this.model = new CharacterModel({
       characterDescription: this.config.characterDescription,
       animationConfig: this.config.animationConfig,
@@ -1489,9 +1372,6 @@ var Character = class extends Group {
       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.config.composer.postPostScene);
@@ -1769,6 +1649,7 @@ var LocalController = class {
     this.jumpPressed = false;
     // Tracks if the jump button is pressed
     this.jumpReleased = true;
+    this.controlState = null;
     this.networkState = {
       id: this.config.id,
       position: { x: 0, y: 0, z: 0 },
@@ -1776,35 +1657,22 @@ var LocalController = class {
       state: 0 /* idle */
     };
   }
-  updateControllerState() {
-    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();
+    var _a, _b;
+    this.controlState = this.config.keyInputManager.getOutput() || ((_a = this.config.virtualJoystick) == null ? void 0 : _a.getOutput()) || null;
     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) {
+    if (((_b = this.controlState) == null ? void 0 : _b.direction) !== null || !this.characterOnGround) {
       const targetAnimation = this.getTargetAnimation();
       this.config.character.updateAnimation(targetAnimation);
     } else {
       this.config.character.updateAnimation(0 /* idle */);
     }
-    if (this.anyDirection) {
+    if (this.controlState) {
       this.updateRotation();
     }
     for (let i = 0; i < this.collisionDetectionSteps; i++) {
@@ -1829,44 +1697,31 @@ var LocalController = class {
       }
       return 4 /* air */;
     }
-    if (this.conflictingDirections) {
+    if (!this.controlState) {
       return 0 /* idle */;
     }
-    return this.run && this.anyDirection ? 2 /* running */ : this.anyDirection ? 1 /* walking */ : 0 /* idle */;
+    if (this.controlState.isSprinting) {
+      return 2 /* running */;
+    }
+    return 1 /* walking */;
   }
   updateRotationOffset() {
-    if (this.conflictingDirections)
-      return;
-    if (this.forward) {
-      this.rotationOffset = Math.PI;
-      if (this.left)
-        this.rotationOffset = Math.PI + Math.PI / 4;
-      if (this.right)
-        this.rotationOffset = Math.PI - Math.PI / 4;
-    } else if (this.backward) {
-      this.rotationOffset = Math.PI * 2;
-      if (this.left)
-        this.rotationOffset = -Math.PI * 2 - Math.PI / 4;
-      if (this.right)
-        this.rotationOffset = Math.PI * 2 + Math.PI / 4;
-    } else if (this.left) {
-      this.rotationOffset = Math.PI * -0.5;
-    } else if (this.right) {
-      this.rotationOffset = Math.PI * 0.5;
+    if (this.controlState && this.controlState.direction !== null) {
+      this.rotationOffset = this.controlState.direction;
     }
   }
   updateAzimuthalAngle() {
-    const camToModelDistance = this.config.cameraManager.camera.position.distanceTo(
+    const camToModelDistance = this.config.cameraManager.activeCamera.position.distanceTo(
       this.config.character.position
     );
     const isCameraFirstPerson = camToModelDistance < 2;
     if (isCameraFirstPerson) {
-      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.config.cameraManager.camera.quaternion);
+      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.config.cameraManager.activeCamera.quaternion);
       this.azimuthalAngle = Math.atan2(cameraForward.x, cameraForward.z);
     } else {
       this.azimuthalAngle = Math.atan2(
-        this.config.cameraManager.camera.position.x - this.config.character.position.x,
-        this.config.cameraManager.camera.position.z - this.config.character.position.z
+        this.config.cameraManager.activeCamera.position.x - this.config.character.position.x,
+        this.config.cameraManager.activeCamera.position.z - this.config.character.position.z
       );
     }
   }
@@ -1887,17 +1742,19 @@ var LocalController = class {
     this.config.character.quaternion.rotateTowards(rotationQuaternion, frameRotation);
   }
   processJump(currentAcceleration, deltaTime) {
+    var _a;
+    const jump = (_a = this.controlState) == null ? void 0 : _a.jump;
     if (this.characterOnGround) {
       this.coyoteJumped = false;
       this.canDoubleJump = false;
       this.doubleJumpUsed = false;
       this.jumpCounter = 0;
-      if (!this.jump) {
+      if (!jump) {
         this.canDoubleJump = !this.doubleJumpUsed && this.jumpReleased && this.jumpCounter === 1;
         this.canJump = true;
         this.jumpReleased = true;
       }
-      if (this.jump && this.canJump && this.jumpReleased) {
+      if (jump && this.canJump && this.jumpReleased) {
         currentAcceleration.y += this.jumpForce / deltaTime;
         this.canJump = false;
         this.jumpReleased = false;
@@ -1908,13 +1765,13 @@ var LocalController = class {
         }
       }
     } else {
-      if (this.jump && !this.coyoteJumped && this.coyoteTime) {
+      if (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) {
+      } else if (jump && this.canDoubleJump) {
         currentAcceleration.y += this.doubleJumpForce / deltaTime;
         this.doubleJumpUsed = true;
         this.jumpReleased = false;
@@ -1924,7 +1781,7 @@ var LocalController = class {
         this.canJump = false;
       }
     }
-    if (!this.jump) {
+    if (!jump) {
       this.jumpReleased = true;
       if (!this.characterOnGround) {
         currentAcceleration.y += this.gravity;
@@ -1932,31 +1789,19 @@ var LocalController = class {
     }
   }
   applyControls(deltaTime) {
+    var _a;
     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 control = (this.characterOnGround ? ((_a = this.controlState) == null ? void 0 : _a.isSprinting) ? this.groundRunControl : this.groundWalkControl : this.airControlModifier) * this.baseControl;
     const controlAcceleration = this.tempVector2.set(0, 0, 0);
-    if (!this.conflictingDirections) {
-      if (this.forward) {
-        const forward = this.tempVector3.set(0, 0, -1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-        controlAcceleration.add(forward);
-      }
-      if (this.backward) {
-        const backward = this.tempVector3.set(0, 0, 1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-        controlAcceleration.add(backward);
-      }
-      if (this.left) {
-        const left = this.tempVector3.set(-1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-        controlAcceleration.add(left);
-      }
-      if (this.right) {
-        const right = this.tempVector3.set(1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-        controlAcceleration.add(right);
-      }
+    if (this.controlState && this.controlState.direction !== null) {
+      const heading = this.controlState.direction;
+      const headingVector = this.tempVector3.set(0, 0, 1).applyAxisAngle(this.vectorUp, this.azimuthalAngle + heading);
+      controlAcceleration.add(headingVector);
     }
     if (controlAcceleration.length() > 0) {
       controlAcceleration.normalize();
@@ -1967,6 +1812,7 @@ var LocalController = class {
     this.config.character.position.addScaledVector(this.characterVelocity, deltaTime);
   }
   updatePosition(deltaTime, stepDeltaTime, iter) {
+    var _a;
     this.applyControls(stepDeltaTime);
     if (iter === 0) {
       const lastMovement = this.getMovementFromSurfaces(this.config.character.position, deltaTime);
@@ -1998,7 +1844,7 @@ var LocalController = class {
     if (this.characterWasOnGround && !this.characterOnGround) {
       this.characterAirborneSince = Date.now();
     }
-    if (!this.jump) {
+    if (!((_a = this.controlState) == null ? void 0 : _a.jump)) {
       this.jumpReleased = true;
     }
     this.coyoteTime = this.characterVelocity.y < 0 && !this.characterOnGround && Date.now() - this.characterAirborneSince < this.coyoteTimeThreshold;
@@ -2320,7 +2166,11 @@ var CharacterManager = class {
           this.remoteCharacterControllers.delete(id);
         }
       }
-      if (this.config.updateURLLocation && this.config.timeManager.frame % 60 === 0 && document.hasFocus()) {
+      if (this.config.updateURLLocation && this.config.timeManager.frame % 60 === 0 && document.hasFocus() && /*
+       Don't update the URL if the camera is being controlled as some browsers (e.g. Chrome) cause a hitch to Pointer
+       events when the url is updated
+      */
+      !this.config.cameraManager.hasActiveInput()) {
         const hash = encodeCharacterAndCamera(
           this.localCharacter,
           this.config.cameraManager.camera
@@ -2416,11 +2266,22 @@ var CharacterModelLoader = class {
 };
 
 // src/input/KeyInputManager.ts
+var Key = /* @__PURE__ */ ((Key2) => {
+  Key2["W"] = "w";
+  Key2["A"] = "a";
+  Key2["S"] = "s";
+  Key2["D"] = "d";
+  Key2["SHIFT"] = "shift";
+  Key2["SPACE"] = " ";
+  Key2["C"] = "c";
+  return Key2;
+})(Key || {});
 var KeyInputManager = class {
   constructor(shouldCaptureKeyPress = () => true) {
     this.shouldCaptureKeyPress = shouldCaptureKeyPress;
     this.keys = /* @__PURE__ */ new Map();
     this.eventHandlerCollection = new EventHandlerCollection();
+    this.bindings = /* @__PURE__ */ new Map();
     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));
@@ -2442,49 +2303,262 @@ var KeyInputManager = class {
   }
   onKeyUp(event) {
     this.keys.set(event.key.toLowerCase(), false);
+    if (this.bindings.has(event.key.toLowerCase())) {
+      this.bindings.get(event.key.toLowerCase())();
+    }
   }
   isKeyPressed(key) {
     return this.keys.get(key) || false;
   }
+  createKeyBinding(key, callback) {
+    this.bindings.set(key, callback);
+  }
   isMovementKeyPressed() {
     return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
   }
-  get forward() {
+  getForward() {
     return this.isKeyPressed("w" /* W */);
   }
-  get backward() {
+  getBackward() {
     return this.isKeyPressed("s" /* S */);
   }
-  get left() {
+  getLeft() {
     return this.isKeyPressed("a" /* A */);
   }
-  get right() {
+  getRight() {
     return this.isKeyPressed("d" /* D */);
   }
-  get run() {
+  getRun() {
     return this.isKeyPressed("shift" /* SHIFT */);
   }
-  get jump() {
+  getJump() {
     return this.isKeyPressed(" " /* SPACE */);
   }
-  get anyDirection() {
-    return this.isMovementKeyPressed();
-  }
-  get conflictingDirection() {
-    return this.isKeyPressed("w" /* W */) && this.isKeyPressed("s" /* S */) || this.isKeyPressed("a" /* A */) && this.isKeyPressed("d" /* D */);
+  getOutput() {
+    const dx = (this.getRight() ? 1 : 0) - (this.getLeft() ? 1 : 0);
+    const dy = (this.getBackward() ? 1 : 0) - (this.getForward() ? 1 : 0);
+    const jump = this.getJump();
+    if (dx === 0 && dy === 0) {
+      if (this.getJump()) {
+        return { direction: null, isSprinting: false, jump };
+      }
+      return null;
+    }
+    const direction = Math.atan2(dx, dy);
+    return { direction, isSprinting: this.getRun(), jump };
   }
   dispose() {
     this.eventHandlerCollection.clear();
+    this.bindings.clear();
+  }
+};
+
+// src/input/VirtualJoystick.ts
+var sprintingThreshold = 0.6;
+var VirtualJoystick = class _VirtualJoystick {
+  constructor(holderElement, config) {
+    this.holderElement = holderElement;
+    this.config = config;
+    this.joystickPointerId = null;
+    this.joystickOutput = null;
+    this.jumpPointerId = null;
+    this.clearJoystickState = () => {
+      this.joystickOutput = null;
+      this.joystickCenterElement.style.left = `${this.radius - this.innerRadius}px`;
+      this.joystickCenterElement.style.top = `${this.radius - this.innerRadius}px`;
+    };
+    this.radius = config.radius || 50;
+    this.innerRadius = config.innerRadius || this.radius / 2;
+    this.mouseSupport = this.checkTouch() || config.mouseSupport === true;
+    this.element = document.createElement("div");
+    const style = this.element.style;
+    style.display = this.mouseSupport ? "flex" : "none";
+    style.position = "absolute";
+    style.width = `100%`;
+    style.height = `200px`;
+    style.bottom = "50px";
+    style.zIndex = "10000";
+    style.alignItems = "center";
+    style.justifyContent = "space-between";
+    style.pointerEvents = "none";
+    style.padding = "20px";
+    style.boxSizing = "border-box";
+    style.userSelect = "none";
+    this.holderElement.appendChild(this.element);
+    this.joystickBaseElement = this.createBase();
+    this.element.appendChild(this.joystickBaseElement);
+    this.joystickCenterElement = this.createCenter();
+    this.joystickBaseElement.appendChild(this.joystickCenterElement);
+    this.jumpButton = this.createJumpButton();
+    this.element.appendChild(this.jumpButton);
+    this.bindEvents();
+    this.clearJoystickState();
+  }
+  static checkForTouch() {
+    try {
+      document.createEvent("TouchEvent");
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  checkTouch() {
+    return _VirtualJoystick.checkForTouch();
+  }
+  createBase() {
+    const base = document.createElement("span");
+    const style = base.style;
+    style.touchAction = "pinch-zoom";
+    style.width = `${this.radius * 2}px`;
+    style.height = `${this.radius * 2}px`;
+    style.position = "relative";
+    style.display = "block";
+    style.borderRadius = "50%";
+    style.borderColor = "rgba(200,200,200,0.5)";
+    style.borderWidth = "2px";
+    style.borderStyle = "solid";
+    style.pointerEvents = "auto";
+    style.userSelect = "none";
+    return base;
+  }
+  createCenter() {
+    const center = document.createElement("div");
+    const style = center.style;
+    style.width = `${this.innerRadius * 2}px`;
+    style.height = `${this.innerRadius * 2}px`;
+    style.position = "absolute";
+    style.borderRadius = "50%";
+    style.backgroundColor = "rgba(200,200,200,0.3)";
+    style.borderWidth = "1px";
+    style.borderColor = "rgba(200,200,200,0.8)";
+    style.borderStyle = "solid";
+    style.userSelect = "none";
+    return center;
+  }
+  createJumpButton() {
+    const button = document.createElement("button");
+    button.textContent = "JUMP";
+    const style = button.style;
+    style.touchAction = "pinch-zoom";
+    style.width = `100px`;
+    style.height = `100px`;
+    style.borderRadius = "20px";
+    style.color = "white";
+    style.font = "Helvetica, sans-serif";
+    style.fontSize = "16px";
+    style.backgroundColor = "rgba(200,200,200,0.3)";
+    style.color = "rgba(220,220,220,1)";
+    style.borderWidth = "1px";
+    style.borderColor = "rgba(200,200,200,0.8)";
+    style.borderStyle = "solid";
+    style.pointerEvents = "auto";
+    style.userSelect = "none";
+    return button;
+  }
+  bindEvents() {
+    this.joystickBaseElement.addEventListener("pointerdown", this.onJoystickPointerDown.bind(this));
+    this.joystickBaseElement.addEventListener(
+      "contextmenu",
+      this.preventDefaultAndStopPropagation.bind(this)
+    );
+    this.joystickBaseElement.addEventListener(
+      "touchstart",
+      this.preventDefaultAndStopPropagation.bind(this)
+    );
+    this.jumpButton.addEventListener("pointerdown", this.onJumpPointerDown.bind(this));
+    this.jumpButton.addEventListener(
+      "contextmenu",
+      this.preventDefaultAndStopPropagation.bind(this)
+    );
+    this.jumpButton.addEventListener(
+      "touchstart",
+      this.preventDefaultAndStopPropagation.bind(this)
+    );
+    document.addEventListener("pointermove", this.onPointerMove.bind(this));
+    document.addEventListener("pointerup", this.onPointerUp.bind(this));
+    document.addEventListener("pointercancel", this.onPointerUp.bind(this));
+  }
+  preventDefaultAndStopPropagation(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+  onJumpPointerDown(evt) {
+    if (this.jumpPointerId === null) {
+      this.jumpPointerId = evt.pointerId;
+    }
+  }
+  onJoystickPointerDown(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.buttons !== 1) {
+      return;
+    }
+    if (this.joystickPointerId === null) {
+      this.joystickPointerId = evt.pointerId;
+      this.updateControlAndDirection(evt);
+    }
+  }
+  onPointerMove(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.pointerId !== this.joystickPointerId) {
+      return;
+    }
+    this.updateControlAndDirection(evt);
+  }
+  onPointerUp(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.pointerId === this.jumpPointerId) {
+      this.jumpPointerId = null;
+    }
+    if (evt.pointerId === this.joystickPointerId) {
+      this.joystickPointerId = null;
+      this.clearJoystickState();
+    }
+  }
+  updateControlAndDirection(input) {
+    const rect = this.joystickBaseElement.getBoundingClientRect();
+    const dx = input.clientX - (rect.left + this.radius);
+    const dy = input.clientY - (rect.top + this.radius);
+    const distance = Math.min(Math.sqrt(dx * dx + dy * dy), this.radius);
+    const angle = Math.atan2(dy, dx);
+    const constrainedX = distance * Math.cos(angle);
+    const constrainedY = distance * Math.sin(angle);
+    this.joystickCenterElement.style.left = `${constrainedX + this.radius - this.innerRadius}px`;
+    this.joystickCenterElement.style.top = `${constrainedY + this.radius - this.innerRadius}px`;
+    const direction = Math.atan2(dx, dy);
+    const speed = distance / this.radius;
+    const isSprinting = speed > sprintingThreshold;
+    this.joystickOutput = { direction, isSprinting };
+  }
+  getOutput() {
+    const jump = this.jumpPointerId !== null;
+    if (!this.joystickOutput) {
+      if (jump) {
+        return { direction: null, isSprinting: false, jump };
+      }
+      return null;
+    }
+    return {
+      ...this.joystickOutput,
+      jump
+    };
   }
 };
 
 // src/mml/MMLCompositionScene.ts
 import {
   InteractionManager,
-  MMLClickTrigger,
-  PromptManager,
-  LoadingProgressManager
-} from "mml-web";
+  LoadingProgressManager,
+  MMLDocumentTimeManager,
+  PromptManager
+} from "@mml-io/mml-web";
+import {
+  ThreeJSClickTrigger,
+  ThreeJSGraphicsInterface,
+  ThreeJSInteractionAdapter
+} from "@mml-io/mml-web-threejs";
 import { Group as Group3 } from "three";
 var MMLCompositionScene = class {
   constructor(config) {
@@ -2492,20 +2566,55 @@ var MMLCompositionScene = class {
     this.chatProbes = /* @__PURE__ */ new Set();
     this.group = new Group3();
     this.promptManager = PromptManager.init(this.config.targetElement);
+    const graphicsAdapter = {
+      collisionType: null,
+      containerType: null,
+      getGraphicsAdapterFactory: () => {
+        return ThreeJSGraphicsInterface;
+      },
+      getRootContainer: () => {
+        return this.group;
+      },
+      interactionShouldShowDistance(interaction) {
+        return ThreeJSInteractionAdapter.interactionShouldShowDistance(
+          interaction,
+          this.config.camera,
+          this.config.scene
+        );
+      },
+      dispose() {
+      },
+      getAudioListener: () => {
+        return config.audioListener;
+      },
+      getCamera: () => {
+        return config.camera;
+      },
+      getThreeScene: () => {
+        return config.scene;
+      },
+      getUserPositionAndRotation: () => {
+        return this.config.getUserPositionAndRotation();
+      }
+    };
     const { interactionListener, interactionManager } = InteractionManager.init(
       this.config.targetElement,
-      this.config.camera,
-      this.config.scene
+      (interaction) => {
+        return graphicsAdapter.interactionShouldShowDistance(interaction);
+      }
     );
     this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.loadingProgressManager = new LoadingProgressManager();
+    this.documentTimeManager = new MMLDocumentTimeManager();
     this.mmlScene = {
-      getAudioListener: () => this.config.audioListener,
-      getRenderer: () => this.config.renderer,
-      getThreeScene: () => this.config.scene,
+      getGraphicsAdapter() {
+        return graphicsAdapter;
+      },
+      hasGraphicsAdapter() {
+        return true;
+      },
       getRootContainer: () => this.group,
-      getCamera: () => this.config.camera,
       addCollider: (object, mElement) => {
         this.config.collisionsManager.addMeshesGroup(object, mElement);
       },
@@ -2533,14 +2642,21 @@ var MMLCompositionScene = class {
       removeChatProbe: (chatProbe) => {
         this.chatProbes.delete(chatProbe);
       },
-      prompt: (promptProps, callback) => {
-        this.promptManager.prompt(promptProps, callback);
+      prompt: (promptProps, abortSignal, callback) => {
+        this.promptManager.prompt(promptProps, abortSignal, callback);
+      },
+      link: (linkProps, abortSignal, windowCallback) => {
+        this.promptManager.link(linkProps, abortSignal, windowCallback);
       },
       getLoadingProgressManager: () => {
         return this.loadingProgressManager;
       }
     };
-    this.clickTrigger = MMLClickTrigger.init(this.config.targetElement, this.mmlScene);
+    this.clickTrigger = ThreeJSClickTrigger.init(
+      this.config.targetElement,
+      this.group,
+      this.config.camera
+    );
   }
   onChatMessage(message) {
     for (const chatProbe of this.chatProbes) {
@@ -3436,24 +3552,27 @@ var TweakPane = class {
     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 });
-    this.setupGUIListeners();
-    window.addEventListener("keydown", (e) => {
-      this.processKey(e);
-    });
-  }
-  setupGUIListeners() {
+    this.eventHandlerCollection = new EventHandlerCollection();
     const gui = this.gui;
     const paneElement = gui.containerElem_;
     paneElement.style.right = this.guiVisible ? "0px" : "-450px";
-    this.gui.element.addEventListener("mouseenter", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mousemove", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
-    this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
+    this.eventHandlerCollection.add(this.gui.element, "mouseenter", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(this.gui.element, "mousemove", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(this.gui.element, "mousedown", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(
+      this.gui.element,
+      "mouseleave",
+      () => setTweakpaneActive(false)
+    );
+    this.eventHandlerCollection.add(this.gui.element, "mouseup", () => setTweakpaneActive(false));
+    this.eventHandlerCollection.add(window, "keydown", (e) => {
+      this.processKey(e);
+    });
   }
   processKey(e) {
-    if (e.key === "p")
+    if (e.key === "p") {
       this.toggleGUI();
+    }
   }
   setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setSkyboxAzimuthalAngle, setSkyboxPolarAngle, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
@@ -3487,6 +3606,7 @@ var TweakPane = class {
     });
   }
   dispose() {
+    this.eventHandlerCollection.clear();
     this.gui.dispose();
     this.tweakPaneWrapper.remove();
   }
@@ -5137,22 +5257,22 @@ var N8SSAOPass = class extends Pass {
 var Composer = class {
   constructor({
     scene,
-    camera,
+    cameraManager,
     spawnSun = false,
     environmentConfiguration
   }) {
     this.width = 1;
     this.height = 1;
     this.resolution = new Vector27(this.width, this.height);
-    this.isEnvHDRI = false;
     this.bcs = BrightnessContrastSaturation;
     this.gaussGrainEffect = GaussGrainEffect;
     this.ambientLight = null;
+    this.skyboxState = { src: {}, latestPromise: null };
     this.sun = null;
-    var _a;
+    var _a, _b;
     this.scene = scene;
+    this.cameraManager = cameraManager;
     this.postPostScene = new Scene4();
-    this.camera = camera;
     this.spawnSun = spawnSun;
     this.renderer = new WebGLRenderer4({
       powerPreference: "high-performance",
@@ -5172,14 +5292,14 @@ var Composer = class {
     this.effectComposer = new EffectComposer2(this.renderer, {
       frameBufferType: HalfFloatType2
     });
-    this.renderPass = new RenderPass(this.scene, this.camera);
-    this.normalPass = new NormalPass2(this.scene, this.camera);
+    this.renderPass = new RenderPass(this.scene, this.cameraManager.activeCamera);
+    this.normalPass = new NormalPass2(this.scene, this.cameraManager.activeCamera);
     this.normalPass.enabled = ppssaoValues.enabled;
     this.normalTextureEffect = new TextureEffect({
       blendFunction: BlendFunction2.SKIP,
       texture: this.normalPass.texture
     });
-    this.ppssaoEffect = new SSAOEffect2(this.camera, this.normalPass.texture, {
+    this.ppssaoEffect = new SSAOEffect2(this.cameraManager.activeCamera, this.normalPass.texture, {
       blendFunction: ppssaoValues.blendFunction,
       distanceScaling: ppssaoValues.distanceScaling,
       depthAwareUpsampling: ppssaoValues.depthAwareUpsampling,
@@ -5197,7 +5317,11 @@ var Composer = class {
       worldProximityThreshold: ppssaoValues.worldProximityThreshold,
       worldProximityFalloff: ppssaoValues.worldProximityFalloff
     });
-    this.ppssaoPass = new EffectPass2(this.camera, this.ppssaoEffect, this.normalTextureEffect);
+    this.ppssaoPass = new EffectPass2(
+      this.cameraManager.activeCamera,
+      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) {
@@ -5206,7 +5330,12 @@ var Composer = class {
     this.bloomEffect = new BloomEffect({
       intensity: extrasValues.bloom
     });
-    this.n8aopass = new N8SSAOPass(this.scene, this.camera, this.width, this.height);
+    this.n8aopass = new N8SSAOPass(
+      this.scene,
+      this.cameraManager.activeCamera,
+      this.width,
+      this.height
+    );
     this.n8aopass.configuration.aoRadius = n8ssaoValues.aoRadius;
     this.n8aopass.configuration.distanceFalloff = n8ssaoValues.distanceFalloff;
     this.n8aopass.configuration.intensity = n8ssaoValues.intensity;
@@ -5219,8 +5348,8 @@ var Composer = class {
     this.n8aopass.configuration.denoiseSamples = n8ssaoValues.denoiseSamples;
     this.n8aopass.configuration.denoiseRadius = n8ssaoValues.denoiseRadius;
     this.n8aopass.enabled = n8ssaoValues.enabled;
-    this.fxaaPass = new EffectPass2(this.camera, this.fxaaEffect);
-    this.bloomPass = new EffectPass2(this.camera, this.bloomEffect);
+    this.fxaaPass = new EffectPass2(this.cameraManager.activeCamera, this.fxaaEffect);
+    this.bloomPass = new EffectPass2(this.cameraManager.activeCamera, this.bloomEffect);
     this.toneMappingEffect = new ToneMappingEffect({
       mode: toneMappingValues.mode,
       resolution: toneMappingValues.resolution,
@@ -5235,7 +5364,7 @@ var Composer = class {
       edgeDetectionMode: EdgeDetectionMode.COLOR,
       predicationMode: PredicationMode.DEPTH
     });
-    this.toneMappingPass = new EffectPass2(this.camera, this.toneMappingEffect);
+    this.toneMappingPass = new EffectPass2(this.cameraManager.activeCamera, this.toneMappingEffect);
     this.toneMappingPass.enabled = rendererValues.toneMapping === 5 || rendererValues.toneMapping === 0 ? true : false;
     this.bcsPass = new ShaderPass(this.bcs, "tDiffuse");
     this.bcs.uniforms.brightness.value = bcsValues.brightness;
@@ -5244,7 +5373,7 @@ var Composer = class {
     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.smaaPass = new EffectPass2(this.cameraManager.activeCamera, this.smaaEffect);
     this.effectComposer.addPass(this.renderPass);
     if (ppssaoValues.enabled) {
       this.effectComposer.addPass(this.normalPass);
@@ -5262,6 +5391,13 @@ var Composer = class {
       this.sun = new Sun();
       this.scene.add(this.sun);
     }
+    if ((_b = this.environmentConfiguration) == null ? void 0 : _b.skybox) {
+      if ("hdrJpgUrl" in this.environmentConfiguration.skybox) {
+        this.useHDRJPG(this.environmentConfiguration.skybox.hdrJpgUrl);
+      } else if ("hdrUrl" in this.environmentConfiguration.skybox) {
+        this.useHDRI(this.environmentConfiguration.skybox.hdrUrl);
+      }
+    }
     this.updateSunValues();
     this.resizeListener = () => {
       this.fitContainer();
@@ -5269,6 +5405,19 @@ var Composer = class {
     window.addEventListener("resize", this.resizeListener, false);
     this.fitContainer();
   }
+  updateEnvironmentConfiguration(environmentConfiguration) {
+    this.environmentConfiguration = environmentConfiguration;
+    if (environmentConfiguration.skybox) {
+      if ("hdrJpgUrl" in environmentConfiguration.skybox) {
+        this.useHDRJPG(environmentConfiguration.skybox.hdrJpgUrl);
+      } else if ("hdrUrl" in environmentConfiguration.skybox) {
+        this.useHDRI(environmentConfiguration.skybox.hdrUrl);
+      }
+    }
+    this.updateSkyboxAndEnvValues();
+    this.updateAmbientLightValues();
+    this.updateSunValues();
+  }
   setupTweakPane(tweakPane) {
     tweakPane.setupRenderPane(
       this.effectComposer,
@@ -5311,8 +5460,8 @@ var Composer = class {
     }
     this.width = parentElement.clientWidth;
     this.height = parentElement.clientHeight;
-    this.camera.aspect = this.width / this.height;
-    this.camera.updateProjectionMatrix();
+    this.cameraManager.activeCamera.aspect = this.width / this.height;
+    this.cameraManager.activeCamera.updateProjectionMatrix();
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.resolution.set(
       this.width * window.devicePixelRatio,
@@ -5341,11 +5490,12 @@ var Composer = class {
   }
   render(timeManager) {
     this.renderer.info.reset();
+    this.renderPass.mainCamera = this.cameraManager.activeCamera;
     this.normalPass.texture.needsUpdate = true;
     this.gaussGrainEffect.uniforms.time.value = timeManager.time;
     this.effectComposer.render();
     this.renderer.clearDepth();
-    this.renderer.render(this.postPostScene, this.camera);
+    this.renderer.render(this.postPostScene, this.cameraManager.activeCamera);
   }
   updateSkyboxRotation() {
     this.scene.backgroundRotation = new Euler3(
@@ -5359,71 +5509,71 @@ var Composer = class {
       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;
+  async loadHDRJPG(url) {
+    return new Promise((resolve, reject) => {
+      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;
         hdrJpgEquirectangularMap.dispose();
         pmremGenerator.dispose();
-      }
-      hdrJpg.dispose();
+        hdrJpg.dispose();
+        if (envMap) {
+          envMap.colorSpace = LinearSRGBColorSpace;
+          envMap.needsUpdate = true;
+          resolve(envMap);
+        } else {
+          reject("Failed to generate environment map");
+        }
+      });
     });
   }
-  useHDRI(url, fromFile = false) {
-    if (this.isEnvHDRI && fromFile === false || !this.renderer) {
-      return;
-    }
-    const pmremGenerator = new PMREMGenerator(this.renderer);
-    new RGBELoader(new LoadingManager()).load(
-      url,
-      (texture) => {
+  async loadHDRi(url) {
+    return new Promise((resolve, reject) => {
+      const pmremGenerator = new PMREMGenerator(this.renderer);
+      new RGBELoader(new LoadingManager()).load(url, (texture) => {
         const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        texture.dispose();
+        pmremGenerator.dispose();
         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.isEnvHDRI = true;
-          texture.dispose();
-          pmremGenerator.dispose();
+          resolve(envMap);
+        } else {
+          reject("Failed to generate environment map");
         }
-      },
-      () => {
-      },
-      (error) => {
-        console.error(`Can't load ${url}: ${JSON.stringify(error)}`);
+      });
+    });
+  }
+  useHDRJPG(url, fromFile = false) {
+    if (this.skyboxState.src.hdrJpgUrl === url) {
+      return;
+    }
+    const hdrJPGPromise = this.loadHDRJPG(url);
+    this.skyboxState.src = { hdrJpgUrl: url };
+    this.skyboxState.latestPromise = hdrJPGPromise;
+    hdrJPGPromise.then((envMap) => {
+      if (this.skyboxState.latestPromise !== hdrJPGPromise) {
+        return;
       }
-    );
+      this.applyEnvMap(envMap);
+    });
+  }
+  useHDRI(url) {
+    if (this.skyboxState.src.hdrUrl === url) {
+      return;
+    }
+    const hdrPromise = this.loadHDRi(url);
+    this.skyboxState.src = { hdrUrl: url };
+    this.skyboxState.latestPromise = hdrPromise;
+    hdrPromise.then((envMap) => {
+      if (this.skyboxState.latestPromise !== hdrPromise) {
+        return;
+      }
+      this.applyEnvMap(envMap);
+    });
   }
   setHDRIFromFile() {
     if (!this.renderer)
@@ -5442,7 +5592,7 @@ var Composer = class {
       const fileURL = URL.createObjectURL(file);
       if (fileURL) {
         if (extension === "hdr") {
-          this.useHDRI(fileURL, true);
+          this.useHDRI(fileURL);
         } else if (extension === "jpg") {
           this.useHDRJPG(fileURL);
         } else {
@@ -5487,11 +5637,13 @@ var Composer = class {
     }
     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);
+      (_f = this.sun) == null ? void 0 : _f.setAzimuthalAngle(
+        this.environmentConfiguration.sun.azimuthalAngle * (Math.PI / 180)
+      );
     }
     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);
+      (_i = this.sun) == null ? void 0 : _i.setPolarAngle(this.environmentConfiguration.sun.polarAngle * (Math.PI / 180));
     }
   }
   updateSkyboxAndEnvValues() {
@@ -5524,6 +5676,23 @@ var Composer = class {
     }
     this.setAmbientLight();
   }
+  applyEnvMap(envMap) {
+    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
+    );
+  }
 };
 
 // src/time/TimeManager.ts
@@ -5573,39 +5742,73 @@ var TimeManager = class {
 };
 
 // src/collisions/CollisionsManager.ts
-import {
-  getRelativePositionAndRotationRelativeToObject,
-  MMLCollisionTrigger
-} from "mml-web";
+import { MMLCollisionTrigger } from "@mml-io/mml-web";
 import {
   Box3,
   Color as Color8,
   DoubleSide,
-  Euler as Euler4,
+  Euler as Euler5,
   Group as Group5,
   Line3 as Line32,
-  Matrix4 as Matrix46,
+  Matrix4 as Matrix47,
   Mesh as Mesh5,
   MeshBasicMaterial as MeshBasicMaterial3,
-  Quaternion as Quaternion6,
+  Quaternion as Quaternion7,
   Ray as Ray2,
-  Vector3 as Vector314
+  Vector3 as Vector315
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
 import { MeshBVH, MeshBVHHelper } from "three-mesh-bvh";
+
+// src/collisions/getRelativePositionAndRotationRelativeToObject.ts
+import { Euler as Euler4, Matrix4 as Matrix46, Quaternion as Quaternion6, Vector3 as Vector314 } from "three";
+var tempContainerMatrix = new Matrix46();
+var tempTargetMatrix = new Matrix46();
+var tempPositionVector = new Vector314();
+var tempRotationEuler = new Euler4();
+var tempRotationQuaternion = new Quaternion6();
+var tempScaleVector = new Vector314();
+function getRelativePositionAndRotationRelativeToObject(positionAndRotation, container) {
+  const { x, y, z } = positionAndRotation.position;
+  const { x: rx, y: ry, z: rz } = positionAndRotation.rotation;
+  container.updateWorldMatrix(true, false);
+  tempContainerMatrix.copy(container.matrixWorld).invert();
+  tempPositionVector.set(x, y, z);
+  tempRotationEuler.set(rx, ry, rz);
+  tempRotationQuaternion.setFromEuler(tempRotationEuler);
+  tempScaleVector.set(1, 1, 1);
+  tempTargetMatrix.compose(tempPositionVector, tempRotationQuaternion, tempScaleVector);
+  tempTargetMatrix.premultiply(tempContainerMatrix);
+  tempTargetMatrix.decompose(tempPositionVector, tempRotationQuaternion, tempScaleVector);
+  tempRotationEuler.setFromQuaternion(tempRotationQuaternion);
+  return {
+    position: {
+      x: tempPositionVector.x,
+      y: tempPositionVector.y,
+      z: tempPositionVector.z
+    },
+    rotation: {
+      x: tempRotationEuler.x,
+      y: tempRotationEuler.y,
+      z: tempRotationEuler.z
+    }
+  };
+}
+
+// src/collisions/CollisionsManager.ts
 var CollisionsManager = class {
   constructor(scene) {
     this.debug = false;
-    this.tempVector = new Vector314();
-    this.tempVector2 = new Vector314();
-    this.tempVector3 = new Vector314();
-    this.tempQuaternion = new Quaternion6();
+    this.tempVector = new Vector315();
+    this.tempVector2 = new Vector315();
+    this.tempVector3 = new Vector315();
+    this.tempQuaternion = new Quaternion7();
     this.tempRay = new Ray2();
-    this.tempMatrix = new Matrix46();
-    this.tempMatrix2 = new Matrix46();
+    this.tempMatrix = new Matrix47();
+    this.tempMatrix2 = new Matrix47();
     this.tempBox = new Box3();
-    this.tempEuler = new Euler4();
+    this.tempEuler = new Euler5();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
@@ -5615,7 +5818,7 @@ var CollisionsManager = class {
   raycastFirst(ray) {
     let minimumDistance = null;
     let minimumHit = null;
-    let minimumNormal = new Vector314();
+    let minimumNormal = new Vector315();
     for (const [, collisionMeshState] of this.collisionMeshState) {
       this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
       const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
@@ -5756,7 +5959,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector314().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
+            collisionPosition = new Vector315().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;
@@ -5858,59 +6061,134 @@ var GroundPlane = class extends Group6 {
 };
 
 // src/loading-screen/LoadingScreen.ts
-import { LoadingProgressManager as LoadingProgressManager2 } from "mml-web";
+import { LoadingProgressManager as LoadingProgressManager2 } from "@mml-io/mml-web";
 var LoadingScreen = class {
-  constructor(loadingProgressManager) {
+  constructor(loadingProgressManager, config) {
     this.loadingProgressManager = loadingProgressManager;
+    this.config = config;
+    this.overlayLayers = [];
     this.hasCompleted = false;
     this.disposed = false;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+    const defaultBackground = "linear-gradient(45deg, #28284B 0%, #303056 100%)";
     this.element = document.createElement("div");
+    this.element.id = "loading-screen";
     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.element.style.backgroundColor = ((_a = this.config) == null ? void 0 : _a.background) || defaultBackground;
+    this.element.style.background = ((_b = this.config) == null ? void 0 : _b.background) || defaultBackground;
+    this.element.style.zIndex = "10001";
+    this.backgroundBlur = document.createElement("div");
+    this.backgroundBlur.id = "loading-screen-blur";
+    this.backgroundBlur.style.position = "absolute";
+    this.backgroundBlur.style.top = "0";
+    this.backgroundBlur.style.left = "0";
+    this.backgroundBlur.style.width = "100%";
+    this.backgroundBlur.style.height = "100%";
+    this.backgroundBlur.style.display = "flex";
+    if ((_c = this.config) == null ? void 0 : _c.backgroundBlurAmount) {
+      this.backgroundBlur.style.backdropFilter = `blur(${this.config.backgroundBlurAmount}px)`;
+    }
+    this.element.append(this.backgroundBlur);
+    if ((_d = this.config) == null ? void 0 : _d.backgroundImageUrl) {
+      this.element.style.backgroundImage = `url(${this.config.backgroundImageUrl})`;
+      this.element.style.backgroundPosition = "center";
+      this.element.style.backgroundSize = "cover";
+    }
+    if ((_e = this.config) == null ? void 0 : _e.overlayLayers) {
+      const logLoadError = (imageUrl) => {
+        console.error(`Failed to load overlay image: ${imageUrl}`);
+      };
+      for (const layer of this.config.overlayLayers) {
+        const overlayLayer = document.createElement("div");
+        overlayLayer.style.position = "absolute";
+        overlayLayer.style.background = `url(${layer.overlayImageUrl}) no-repeat`;
+        overlayLayer.style.backgroundSize = "contain";
+        const anchor = layer.overlayAnchor;
+        const offsetX = ((_f = layer.overlayOffset) == null ? void 0 : _f.x) || 0;
+        const offsetY = ((_g = layer.overlayOffset) == null ? void 0 : _g.y) || 0;
+        if (anchor.includes("top")) {
+          overlayLayer.style.top = `${offsetY}px`;
+        } else if (anchor.includes("bottom")) {
+          overlayLayer.style.bottom = `${offsetY}px`;
+        }
+        if (anchor.includes("left")) {
+          overlayLayer.style.left = `${offsetX}px`;
+        } else if (anchor.includes("right")) {
+          overlayLayer.style.right = `${offsetX}px`;
+        }
+        const image = new Image();
+        image.src = layer.overlayImageUrl;
+        image.onload = () => {
+          const naturalWidth = image.naturalWidth;
+          const naturalHeight = image.naturalHeight;
+          overlayLayer.style.width = `${naturalWidth}px`;
+          overlayLayer.style.height = `${naturalHeight}px`;
+        };
+        image.onerror = () => logLoadError(layer.overlayImageUrl);
+        this.overlayLayers.push(overlayLayer);
+        this.backgroundBlur.append(overlayLayer);
+      }
+    }
+    this.element.style.color = ((_h = this.config) == null ? void 0 : _h.color) || "white";
+    this.loadingBanner = document.createElement("div");
+    this.loadingBanner.style.position = "absolute";
+    this.loadingBanner.style.display = "flex";
+    this.loadingBanner.style.flexDirection = "column";
+    this.loadingBanner.style.left = "0";
+    this.loadingBanner.style.bottom = "0";
+    this.loadingBanner.style.padding = "0";
+    this.loadingBanner.style.width = "100%";
+    this.loadingBanner.style.justifyContent = "flex-end";
+    this.backgroundBlur.append(this.loadingBanner);
+    if ((_i = this.config) == null ? void 0 : _i.title) {
+      this.loadingBannerTitle = document.createElement("div");
+      this.loadingBannerTitle.textContent = this.config.title;
+      this.loadingBannerTitle.style.color = ((_j = this.config) == null ? void 0 : _j.color) || "white";
+      this.loadingBannerTitle.style.paddingLeft = "40px";
+      this.loadingBannerTitle.style.paddingRight = "40px";
+      this.loadingBannerTitle.style.fontSize = "42px";
+      this.loadingBannerTitle.style.fontWeight = "bold";
+      this.loadingBannerTitle.style.fontFamily = "sans-serif";
+      if ((_k = this.config) == null ? void 0 : _k.background) {
+        this.loadingBannerTitle.style.textShadow = `0px 0px 80px ${this.config.background}`;
+      }
+      this.loadingBanner.append(this.loadingBannerTitle);
+    }
+    if ((_l = this.config) == null ? void 0 : _l.subtitle) {
+      this.loadingBannerSubtitle = document.createElement("div");
+      this.loadingBannerSubtitle.style.color = ((_m = this.config) == null ? void 0 : _m.color) || "white";
+      this.loadingBannerSubtitle.style.paddingLeft = "40px";
+      this.loadingBannerSubtitle.style.paddingRight = "40px";
+      this.loadingBannerSubtitle.style.fontSize = "16px";
+      this.loadingBannerSubtitle.style.fontWeight = "400";
+      this.loadingBannerSubtitle.style.fontFamily = "sans-serif";
+      this.loadingBannerSubtitle.style.marginTop = "12px";
+      if ((_n = this.config) == null ? void 0 : _n.background) {
+        this.loadingBannerSubtitle.style.textShadow = `0px 0px 40px ${this.config.background}`;
+      }
+      this.loadingBannerSubtitle.textContent = this.config.subtitle;
+      this.loadingBanner.append(this.loadingBannerSubtitle);
+    }
     this.progressDebugViewHolder = document.createElement("div");
-    this.progressDebugViewHolder.style.display = "flex";
+    this.progressDebugViewHolder.style.display = "none";
     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.width = "calc(100% - 80px)";
+    this.progressDebugViewHolder.style.maxHeight = "calc(100% - 120px)";
+    this.progressDebugViewHolder.style.left = "40px";
+    this.progressDebugViewHolder.style.bottom = "60px";
+    this.progressDebugViewHolder.style.alignItems = "center";
     this.progressDebugViewHolder.style.justifyContent = "center";
+    this.progressDebugViewHolder.style.zIndex = "10003";
     this.element.append(this.progressDebugViewHolder);
     this.progressDebugView = document.createElement("div");
-    this.progressDebugView.style.backgroundColor = "rgba(128, 128, 128, 0.25)";
+    this.progressDebugView.style.backgroundColor = "rgba(128, 128, 128, 0.5)";
     this.progressDebugView.style.border = "1px solid black";
+    this.progressDebugView.style.borderRadius = "7px";
+    this.progressDebugView.style.width = "100%";
     this.progressDebugView.style.maxWidth = "100%";
     this.progressDebugView.style.overflow = "auto";
     this.progressDebugViewHolder.append(this.progressDebugView);
@@ -5919,6 +6197,8 @@ var LoadingScreen = class {
     this.debugCheckbox.checked = false;
     this.debugCheckbox.addEventListener("change", () => {
       this.progressDebugElement.style.display = this.debugCheckbox.checked ? "block" : "none";
+      this.loadingBannerTitle.style.display = this.debugCheckbox.checked ? "none" : "flex";
+      this.loadingBannerSubtitle.style.display = this.debugCheckbox.checked ? "none" : "flex";
       if (this.hasCompleted) {
         this.dispose();
       }
@@ -5937,23 +6217,36 @@ var LoadingScreen = class {
     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.alignItems = "start";
+    this.progressBarHolder.style.justifyContent = "flex-start";
     this.progressBarHolder.style.width = "100%";
-    this.element.append(this.progressBarHolder);
+    this.progressBarHolder.style.marginLeft = "40px";
+    this.progressBarHolder.style.marginBottom = "40px";
+    this.progressBarHolder.style.cursor = "pointer";
+    this.progressBarHolder.style.marginTop = "24px";
+    this.loadingBanner.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.width = "80%";
+    this.progressBarBackground.style.maxWidth = "400px";
+    this.progressBarBackground.style.minWidth = "240px";
+    this.progressBarBackground.style.backgroundColor = "rgba(32,32,32, 0.25)";
+    this.progressBarBackground.style.backdropFilter = "blur(4px)";
+    this.progressBarBackground.style.height = "16px";
+    this.progressBarBackground.style.lineHeight = "16px";
+    this.progressBarBackground.style.borderRadius = "16px";
     this.progressBarBackground.style.overflow = "hidden";
+    this.progressBarBackground.addEventListener("click", () => {
+      const display = this.progressDebugViewHolder.style.display;
+      if (display === "none") {
+        this.progressDebugViewHolder.style.display = "flex";
+      } else {
+        this.progressDebugViewHolder.style.display = "none";
+        this.debugCheckbox.checked = false;
+        this.progressDebugElement.style.display = this.debugCheckbox.checked ? "block" : "none";
+        this.loadingBannerTitle.style.display = this.debugCheckbox.checked ? "none" : "flex";
+      }
+    });
     this.progressBarHolder.append(this.progressBarBackground);
     this.progressBar = document.createElement("div");
     this.progressBar.style.position = "absolute";
@@ -5961,7 +6254,8 @@ var LoadingScreen = class {
     this.progressBar.style.left = "0";
     this.progressBar.style.width = "0";
     this.progressBar.style.height = "100%";
-    this.progressBar.style.backgroundColor = "#0050a4";
+    this.progressBar.style.pointerEvents = "none";
+    this.progressBar.style.backgroundColor = ((_o = this.config) == null ? void 0 : _o.color) || "#0050a4";
     this.progressBarBackground.append(this.progressBar);
     this.loadingStatusText = document.createElement("div");
     this.loadingStatusText.style.position = "absolute";
@@ -5969,11 +6263,14 @@ var LoadingScreen = class {
     this.loadingStatusText.style.left = "0";
     this.loadingStatusText.style.width = "100%";
     this.loadingStatusText.style.height = "100%";
-    this.loadingStatusText.style.color = "white";
+    this.loadingStatusText.style.color = "rgba(200,200,200,0.9)";
+    this.loadingStatusText.style.fontSize = "10px";
     this.loadingStatusText.style.textAlign = "center";
     this.loadingStatusText.style.verticalAlign = "middle";
+    this.loadingStatusText.style.mixBlendMode = "difference";
     this.loadingStatusText.style.fontFamily = "sans-serif";
     this.loadingStatusText.style.fontWeight = "bold";
+    this.loadingStatusText.style.userSelect = "none";
     this.loadingStatusText.textContent = "Loading...";
     this.progressBarBackground.append(this.loadingStatusText);
     this.loadingCallback = () => {
@@ -5988,7 +6285,7 @@ var LoadingScreen = class {
         this.loadingStatusText.textContent = "Completed";
         this.progressBar.style.width = "100%";
       } else {
-        this.loadingStatusText.textContent = `Loading... ${(loadingRatio * 100).toFixed(2)}%`;
+        this.loadingStatusText.textContent = `${(loadingRatio * 100).toFixed(2)}%`;
         this.progressBar.style.width = `${loadingRatio * 100}%`;
       }
       this.progressDebugElement.textContent = LoadingProgressManager2.LoadingProgressSummaryToString(
@@ -6048,6 +6345,7 @@ export {
   Composer,
   ErrorScreen,
   GroundPlane,
+  Key,
   KeyInputManager,
   LoadingScreen,
   MMLCompositionScene,