@mml-io/3d-web-client-core 0.19.0 → 0.21.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";
@@ -218,6 +219,7 @@ 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;
@@ -248,19 +250,36 @@ var CameraManager = class {
     this.targetPhi = this.phi;
     this.theta = initialTheta;
     this.targetTheta = this.theta;
-    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
+    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.createEventHandlers();
+  }
+  createEventHandlers() {
     this.eventHandlerCollection = EventHandlerCollection.create([
-      [targetElement, "pointerdown", this.onPointerDown.bind(this)],
-      [targetElement, "gesturestart", this.preventDefaultAndStopPropagation.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)],
-      [targetElement, "wheel", this.onMouseWheel.bind(this)],
-      [targetElement, "contextmenu", this.onContextMenu.bind(this)]
+      [document, "pointermove", this.onPointerMove.bind(this)]
     ]);
   }
+  disposeEventHandlers() {
+    this.eventHandlerCollection.clear();
+  }
   preventDefaultAndStopPropagation(evt) {
     evt.preventDefault();
     evt.stopPropagation();
@@ -391,7 +410,8 @@ var CameraManager = class {
     }
   }
   dispose() {
-    this.eventHandlerCollection.clear();
+    this.disposeEventHandlers();
+    this.orbitControls.dispose();
     document.body.style.cursor = "";
   }
   easeOutExpo(x) {
@@ -399,6 +419,7 @@ var CameraManager = class {
   }
   updateAspect(aspect) {
     this.camera.aspect = aspect;
+    this.flyCamera.aspect = aspect;
   }
   recomputeFoV(immediately = false) {
     this.targetFOV = remap(
@@ -412,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);
@@ -442,7 +487,7 @@ var CameraManager = class {
 };
 
 // src/character/Character.ts
-import { Color as Color3, Group, Vector3 as Vector34 } from "three";
+import { Color as Color3, Group, Vector3 as Vector35 } from "three";
 
 // src/character/CharacterModel.ts
 import {
@@ -453,7 +498,9 @@ import { ModelLoader } from "@mml-io/model-loader";
 import {
   AnimationClip,
   AnimationMixer,
-  LoopRepeat
+  Box3,
+  LoopRepeat,
+  Vector3 as Vector33
 } from "three";
 
 // src/character/CharacterMaterial.ts
@@ -741,6 +788,7 @@ var _CharacterModel = class _CharacterModel {
     this.config = config;
     this.mesh = null;
     this.headBone = null;
+    this.characterHeight = null;
     this.materials = /* @__PURE__ */ new Map();
     this.animations = {};
     this.animationMixer = null;
@@ -749,41 +797,49 @@ var _CharacterModel = class _CharacterModel {
   }
   async init() {
     await this.loadMainMesh();
-    await this.setAnimationFromFile(
-      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.config.animationConfig.doubleJumpAnimationFileUrl,
-      6 /* doubleJump */,
-      false,
-      1.45
-    );
-    this.applyCustomMaterials();
+    if (this.mesh) {
+      await this.setAnimationFromFile(
+        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.config.animationConfig.doubleJumpAnimationFileUrl,
+        6 /* doubleJump */,
+        false,
+        1.45
+      );
+      this.applyCustomMaterials();
+    }
   }
   applyCustomMaterials() {
     if (!this.mesh)
       return;
+    const boundingBox = new Box3();
+    this.mesh.updateWorldMatrix(true, true);
+    boundingBox.expandByObject(this.mesh);
+    this.characterHeight = boundingBox.max.y - boundingBox.min.y;
     this.mesh.traverse((child) => {
       if (child.isBone) {
         if (child.name === "head") {
+          const worldPosition = new Vector33();
           this.headBone = child;
+          this.headBone.getWorldPosition(worldPosition);
         }
       }
       if (child.isMesh || child.isSkinnedMesh) {
@@ -886,23 +942,31 @@ var _CharacterModel = class _CharacterModel {
     return null;
   }
   async loadMainMesh() {
-    const mainMesh = await this.loadCharacterFromDescription();
-    if (typeof mainMesh !== "undefined") {
+    let mainMesh = null;
+    try {
+      mainMesh = await this.loadCharacterFromDescription();
+    } catch (error) {
+      console.error("Failed to load character from description", error);
+    }
+    if (mainMesh) {
       this.setMainMesh(mainMesh);
-    } else {
-      throw new Error("ERROR: No Character Model was loaded");
     }
   }
-  cleanAnimationClips(skeletalMesh, animationClip) {
+  cleanAnimationClips(skeletalMesh, animationClip, keepRootBonePositionAnimation) {
     const availableBones = /* @__PURE__ */ new Set();
-    skeletalMesh.traverse((child) => {
-      const asBone = child;
-      if (asBone.isBone) {
-        availableBones.add(child.name);
-      }
-    });
+    if (skeletalMesh) {
+      skeletalMesh.traverse((child) => {
+        const asBone = child;
+        if (asBone.isBone) {
+          availableBones.add(child.name);
+        }
+      });
+    }
     animationClip.tracks = animationClip.tracks.filter((track) => {
       const [trackName, trackProperty] = track.name.split(".");
+      if (keepRootBonePositionAnimation && trackName === "root" && trackProperty === "position") {
+        return true;
+      }
       const shouldAnimate = availableBones.has(trackName) && trackProperty !== "position" && trackProperty !== "scale";
       return shouldAnimate;
     });
@@ -911,7 +975,7 @@ var _CharacterModel = class _CharacterModel {
   async setAnimationFromFile(animationFileUrl, animationType, loop = true, playbackSpeed = 1) {
     return new Promise(async (resolve, reject) => {
       const animation = await this.config.characterModelLoader.load(animationFileUrl, "animation");
-      const cleanAnimation = this.cleanAnimationClips(this.mesh, animation);
+      const cleanAnimation = this.cleanAnimationClips(this.mesh, animation, true);
       if (typeof animation !== "undefined" && cleanAnimation instanceof AnimationClip) {
         this.animations[animationType] = this.animationMixer.clipAction(cleanAnimation);
         this.animations[animationType].stop();
@@ -1060,17 +1124,10 @@ var CharacterSpeakingIndicator = class {
 };
 
 // src/character/CharacterTooltip.ts
-import {
-  Color as Color2,
-  FrontSide,
-  LinearFilter as LinearFilter2,
-  Mesh as Mesh3,
-  MeshBasicMaterial as MeshBasicMaterial2,
-  PlaneGeometry
-} from "three";
+import { Color as Color2, FrontSide, LinearFilter as LinearFilter2, Sprite, SpriteMaterial } from "three";
 
 // src/character/CanvasText.ts
-import { Texture, LinearFilter, RGBAFormat, MeshBasicMaterial } from "three";
+import { Texture, LinearFilter, RGBAFormat } from "three";
 function getTextAlignOffset(textAlign, width) {
   switch (textAlign) {
     case "center":
@@ -1081,7 +1138,8 @@ function getTextAlignOffset(textAlign, width) {
       return 0;
   }
 }
-function printAtWordWrap(context, fullText, x, y, lineHeight, fitWidth, padding, alignment) {
+function printAtWordWrap(context, fullText, textAlign, y, lineHeight, fitWidth, padding) {
+  const x = getTextAlignOffset(textAlign, fitWidth - padding * 2);
   const lines = fullText.split("\n");
   let currentLine = 0;
   for (const text of lines) {
@@ -1098,7 +1156,30 @@ function printAtWordWrap(context, fullText, x, y, lineHeight, fitWidth, padding,
       const textWidth = context.measureText(str).width;
       if (textWidth + padding * 2 > fitWidth) {
         if (lastWordIndex === 1) {
-          lastWordIndex = 2;
+          const word = words[0];
+          let charIndex = 1;
+          while (charIndex < word.length) {
+            const substring = word.substring(0, charIndex);
+            const subWidth = context.measureText(substring).width;
+            if (subWidth + padding * 2 > fitWidth) {
+              if (charIndex === 1)
+                charIndex = 2;
+              context.fillText(
+                word.substring(0, charIndex - 1),
+                x + padding,
+                y + lineHeight * currentLine + padding
+              );
+              currentLine++;
+              words[0] = word.substring(charIndex - 1);
+              break;
+            }
+            charIndex++;
+          }
+          if (charIndex >= word.length) {
+            lastWordIndex = 2;
+          } else {
+            continue;
+          }
         }
         context.fillText(
           words.slice(0, lastWordIndex - 1).join(" "),
@@ -1113,64 +1194,96 @@ function printAtWordWrap(context, fullText, x, y, lineHeight, fitWidth, padding,
       }
     }
     if (lastWordIndex > 0 && words.length > 0) {
-      const xOffset = alignment === "center" ? 0 : padding;
-      context.fillText(words.join(" "), x + xOffset, y + lineHeight * currentLine + padding);
+      context.fillText(words.join(" "), x + padding, y + lineHeight * currentLine + padding);
       currentLine++;
     }
   }
 }
-function CanvasText(message, options) {
-  const fontsize = options.fontSize;
-  const textColor = options.textColorRGB255A1;
-  const backgroundColor = options.backgroundColorRGB255A1 || { r: 255, g: 255, b: 255, a: 1 };
-  const padding = options.paddingPx || 0;
-  const font = options.font || "Arial";
-  const fontString = (options.bold ? "bold " : "") + fontsize + "px " + font;
-  const canvas2 = document.createElement("canvas");
-  const ct = canvas2.getContext("2d");
-  const textAlign = options.alignment ?? "left";
-  if (options.dimensions) {
-    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, canvas2.width, canvas2.height);
-    ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
-    ct.font = fontString;
-    printAtWordWrap(
-      ct,
-      message,
-      getTextAlignOffset(textAlign, canvas2.width),
-      fontsize,
-      fontsize,
-      canvas2.width,
-      padding,
-      textAlign
-    );
-  } else {
-    ct.font = fontString;
-    const metrics = ct.measureText(message);
-    const textWidth = metrics.width;
-    const textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
-    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, 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 canvas2;
-}
+var CanvasText = class {
+  constructor() {
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+  }
+  renderText(message, options) {
+    const fontsize = options.fontSize;
+    const textColor = options.textColorRGB255A1;
+    const backgroundColor = options.backgroundColorRGB255A1 || { r: 255, g: 255, b: 255, a: 1 };
+    const padding = options.paddingPx || 0;
+    const font = options.font || "Arial";
+    const fontString = (options.bold ? "bold " : "") + fontsize + "px " + font;
+    const textAlign = options.alignment ?? "left";
+    if (options.dimensions && options.dimensions.maxWidth === void 0) {
+      this.canvas.width = options.dimensions.width;
+      this.canvas.height = options.dimensions.height;
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.context.font = fontString;
+      this.context.textAlign = textAlign;
+      this.context.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+      this.context.lineWidth = 0;
+      this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+      this.context.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+      printAtWordWrap(
+        this.context,
+        message,
+        textAlign,
+        fontsize,
+        fontsize,
+        this.canvas.width,
+        padding
+      );
+      return this.canvas;
+    } else {
+      this.context.font = fontString;
+      this.context.textAlign = textAlign;
+      const metrics = this.context.measureText(message);
+      const textWidth = metrics.width;
+      const textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
+      if (options.dimensions && options.dimensions.maxWidth !== void 0) {
+        const maxWidthWithoutPadding = options.dimensions.maxWidth - padding * 2;
+        if (textWidth > maxWidthWithoutPadding) {
+          const lineCount = Math.ceil(textWidth / maxWidthWithoutPadding);
+          this.canvas.width = options.dimensions.maxWidth;
+          this.canvas.height = textHeight * lineCount + padding * 2;
+          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+          this.context.font = fontString;
+          this.context.textAlign = textAlign;
+          this.context.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+          this.context.lineWidth = 0;
+          this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+          this.context.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+          printAtWordWrap(
+            this.context,
+            message,
+            textAlign,
+            fontsize,
+            fontsize,
+            this.canvas.width,
+            padding
+          );
+          return this.canvas;
+        } else {
+        }
+      }
+      this.canvas.width = textWidth + padding * 2;
+      this.canvas.height = textHeight + padding * 2;
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.context.font = fontString;
+      this.context.textAlign = textAlign;
+      this.context.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+      this.context.lineWidth = 0;
+      this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+      this.context.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+      this.context.fillText(
+        message,
+        padding + getTextAlignOffset(textAlign, textWidth),
+        textHeight
+      );
+    }
+    return this.canvas;
+  }
+};
 function THREECanvasTextTexture(text, options) {
-  const canvas2 = CanvasText(text, options);
+  const canvas2 = new CanvasText().renderText(text, options);
   const texture = new Texture(canvas2);
   texture.minFilter = LinearFilter;
   texture.magFilter = LinearFilter;
@@ -1184,46 +1297,46 @@ var fontScale = 5;
 var defaultLabelColor = new Color2(0);
 var defaultFontColor = new Color2(16777215);
 var defaultLabelAlignment = "center" /* center */;
-var defaultLabelFontSize = 8;
-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 {
+var defaultLabelFontSize = 10;
+var defaultLabelPadding = 10;
+var defaultVisibleOpacity = 0.85;
+var defaultSecondsToFadeOut = null;
+var CharacterTooltip = class extends Sprite {
   constructor(configArg) {
-    super(tooltipGeometry);
-    this.visibleOpacity = 0.85;
+    super();
     this.targetOpacity = 0;
     this.fadingSpeed = 0.02;
-    this.secondsToFadeOut = 10;
+    this.content = null;
+    this.hideTimeout = null;
     this.config = {
       alignment: defaultLabelAlignment,
-      width: defaultLabelWidth,
-      height: defaultLabelHeight,
       fontSize: defaultLabelFontSize,
       padding: defaultLabelPadding,
       color: defaultLabelColor,
       fontColor: defaultFontColor,
-      castShadows: defaultLabelCastShadows,
+      visibleOpacity: defaultVisibleOpacity,
+      secondsToFadeOut: defaultSecondsToFadeOut,
       ...configArg
     };
-    this.tooltipMaterial = new MeshBasicMaterial2({
+    this.material = new SpriteMaterial({
       map: null,
       transparent: true,
-      opacity: 0,
+      opacity: this.config.visibleOpacity,
       side: FrontSide
     });
-    this.material = this.tooltipMaterial;
     this.position.set(0, 1.6, 0);
     this.visible = false;
   }
+  setHeightOffset(height) {
+    this.position.y = height + this.scale.y / 2;
+  }
   redrawText(content) {
-    if (!this.tooltipMaterial) {
+    if (content === this.content) {
       return;
     }
-    if (this.tooltipMaterial.map) {
-      this.tooltipMaterial.map.dispose();
+    this.content = content;
+    if (this.material.map) {
+      this.material.map.dispose();
     }
     const { texture, width, height } = THREECanvasTextTexture(content, {
       bold: true,
@@ -1241,51 +1354,63 @@ var CharacterTooltip = class extends Mesh3 {
         b: this.config.color.b * 255,
         a: 1
       },
-      alignment: this.config.alignment
+      alignment: this.config.alignment,
+      dimensions: this.config.maxWidth !== void 0 ? {
+        maxWidth: this.config.maxWidth
+      } : void 0
     });
-    this.tooltipMaterial.map = texture;
-    this.tooltipMaterial.map.magFilter = LinearFilter2;
-    this.tooltipMaterial.map.minFilter = LinearFilter2;
-    this.tooltipMaterial.needsUpdate = true;
+    this.material.map = texture;
+    this.material.map.magFilter = LinearFilter2;
+    this.material.map.minFilter = LinearFilter2;
+    this.material.needsUpdate = true;
     this.scale.x = width / (100 * fontScale);
     this.scale.y = height / (100 * fontScale);
-    this.position.y = 1.4;
   }
-  setText(text, temporary = false) {
+  setText(text, onRemove) {
     const sanitizedText = text.replace(/(\r\n|\n|\r)/gm, "");
-    this.redrawText(sanitizedText);
     this.visible = true;
-    this.targetOpacity = this.visibleOpacity;
-    if (temporary) {
-      setTimeout(() => {
+    this.targetOpacity = this.config.visibleOpacity;
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+    if (this.config.secondsToFadeOut !== null) {
+      this.hideTimeout = setTimeout(() => {
+        this.hideTimeout = null;
         this.hide();
-      }, this.secondsToFadeOut * 1e3);
+        if (onRemove) {
+          onRemove();
+        }
+      }, this.config.secondsToFadeOut * 1e3);
     }
+    this.redrawText(sanitizedText);
   }
   hide() {
     this.targetOpacity = 0;
   }
-  update(camera) {
-    this.lookAt(camera.position);
-    const opacity = this.tooltipMaterial.opacity;
+  show() {
+    this.setText(this.content || "");
+  }
+  update() {
+    const opacity = this.material.opacity;
     if (opacity < this.targetOpacity) {
-      this.tooltipMaterial.opacity = Math.min(
-        this.tooltipMaterial.opacity + this.fadingSpeed,
+      this.material.opacity = Math.min(
+        this.material.opacity + this.fadingSpeed,
         this.targetOpacity
       );
     } else if (opacity > this.targetOpacity) {
-      this.tooltipMaterial.opacity = Math.max(
-        this.tooltipMaterial.opacity - this.fadingSpeed,
+      this.material.opacity = Math.max(
+        this.material.opacity - this.fadingSpeed,
         this.targetOpacity
       );
-      if (opacity >= 1 && this.tooltipMaterial.transparent) {
-        this.tooltipMaterial.transparent = false;
-        this.tooltipMaterial.needsUpdate = true;
-      } else if (opacity > 0 && opacity < 1 && !this.tooltipMaterial.transparent) {
-        this.tooltipMaterial.transparent = true;
-        this.tooltipMaterial.needsUpdate = true;
+      if (opacity >= 1 && this.material.transparent) {
+        this.material.transparent = false;
+        this.material.needsUpdate = true;
+      } else if (opacity > 0 && opacity < 1 && !this.material.transparent) {
+        this.material.transparent = true;
+        this.material.needsUpdate = true;
       }
-      if (this.tooltipMaterial.opacity <= 0) {
+      if (this.material.opacity <= 0) {
         this.visible = false;
       }
     }
@@ -1293,6 +1418,12 @@ var CharacterTooltip = class extends Mesh3 {
 };
 
 // src/character/Character.ts
+function characterHeightToTooltipHeightOffset(characterHeight) {
+  return characterHeight - 0.4 + 0.1;
+}
+function characterDescriptionMatches(a, b) {
+  return a.meshFileUrl === b.meshFileUrl && a.mmlCharacterString === b.mmlCharacterString && a.mmlCharacterUrl === b.mmlCharacterUrl;
+}
 var Character = class extends Group {
   constructor(config) {
     super();
@@ -1300,18 +1431,42 @@ var Character = class extends Group {
     this.model = null;
     this.color = new Color3();
     this.speakingIndicator = null;
-    this.tooltip = new CharacterTooltip();
-    this.tooltip.setText(this.config.username, this.config.isLocal);
+    this.chatTooltips = [];
+    this.tooltip = new CharacterTooltip(
+      this.config.isLocal ? {
+        secondsToFadeOut: 10
+      } : {}
+    );
+    this.tooltip.setText(this.config.username);
     this.add(this.tooltip);
     this.load().then(() => {
       this.config.modelLoadedCallback();
+      this.setTooltipHeights();
     });
   }
   updateCharacter(username, characterDescription) {
-    this.config.username = username;
-    this.config.characterDescription = characterDescription;
-    this.load();
-    this.tooltip.setText(username, this.config.isLocal);
+    if (!characterDescriptionMatches(this.config.characterDescription, characterDescription)) {
+      this.config.characterDescription = characterDescription;
+      this.load().then(() => {
+        this.setTooltipHeights();
+      });
+    }
+    if (this.config.username !== username) {
+      this.config.username = username;
+      this.tooltip.setText(username);
+      this.tooltip.show();
+    }
+  }
+  setTooltipHeights() {
+    if (this.model && this.model.characterHeight) {
+      let height = characterHeightToTooltipHeightOffset(this.model.characterHeight);
+      this.tooltip.setHeightOffset(height);
+      height += this.tooltip.scale.y;
+      for (const chatTooltip of this.chatTooltips) {
+        chatTooltip.setHeightOffset(height);
+        height += chatTooltip.scale.y;
+      }
+    }
   }
   async load() {
     const previousModel = this.model;
@@ -1327,7 +1482,9 @@ var Character = class extends Group {
       isLocal: this.config.isLocal
     });
     await this.model.init();
-    this.add(this.model.mesh);
+    if (this.model.mesh) {
+      this.add(this.model.mesh);
+    }
     if (this.speakingIndicator === null) {
       this.speakingIndicator = new CharacterSpeakingIndicator(this.config.composer.postPostScene);
     }
@@ -1341,13 +1498,13 @@ var Character = class extends Group {
     if (!this.model)
       return;
     if (this.tooltip) {
-      this.tooltip.update(this.config.cameraManager.camera);
+      this.tooltip.update();
     }
     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()),
+          (_a = this.model.headBone) == null ? void 0 : _a.getWorldPosition(new Vector35()),
           this.config.cameraManager.camera
         );
       }
@@ -1358,13 +1515,31 @@ var Character = class extends Group {
     var _a;
     return ((_a = this.model) == null ? void 0 : _a.currentAnimation) || 0 /* idle */;
   }
+  addChatBubble(message) {
+    const tooltip = new CharacterTooltip({
+      maxWidth: 1e3,
+      secondsToFadeOut: 10,
+      color: new Color3(0.125, 0.125, 0.125)
+    });
+    this.add(tooltip);
+    this.chatTooltips.push(tooltip);
+    tooltip.setText(message, () => {
+      this.chatTooltips = this.chatTooltips.filter((t) => t !== tooltip);
+      this.remove(tooltip);
+      this.setTooltipHeights();
+    });
+    if (this.config.isLocal) {
+      this.tooltip.show();
+    }
+    this.setTooltipHeights();
+  }
 };
 
 // src/character/CharacterManager.ts
-import { Euler as Euler2, Group as Group2, Quaternion as Quaternion5, Vector3 as Vector38 } from "three";
+import { Euler as Euler2, Group as Group2, Quaternion as Quaternion5, Vector3 as Vector39 } from "three";
 
 // src/character/LocalController.ts
-import { Euler, Line3, Matrix4, Quaternion as Quaternion2, Ray, Raycaster as Raycaster2, Vector3 as Vector35 } from "three";
+import { Euler, Line3, Matrix4, Quaternion as Quaternion2, Ray, Raycaster as Raycaster2, Vector3 as Vector36 } from "three";
 
 // src/tweakpane/blades/characterControlsFolder.ts
 var characterControllerValues = {
@@ -1547,13 +1722,13 @@ var CharacterControlsFolder = class {
 };
 
 // src/character/LocalController.ts
-var downVector = new Vector35(0, -1, 0);
+var downVector = new Vector36(0, -1, 0);
 var LocalController = class {
   constructor(config) {
     this.config = config;
     this.capsuleInfo = {
       radius: 0.4,
-      segment: new Line3(new Vector35(), new Vector35(0, 1.05, 0))
+      segment: new Line3(new Vector36(), new Vector36(0, 1.05, 0))
     };
     this.gravity = -characterControllerValues.gravity;
     this.jumpForce = characterControllerValues.jumpForce;
@@ -1571,34 +1746,34 @@ var LocalController = class {
     this.groundRunControl = characterControllerValues.groundRunControl;
     this.baseControl = characterControllerValues.baseControlMultiplier;
     this.minimumSurfaceAngle = characterControllerValues.minimumSurfaceAngle;
-    this.latestPosition = new Vector35();
+    this.latestPosition = new Vector36();
     this.characterOnGround = false;
     this.coyoteTime = false;
     this.collisionDetectionSteps = 15;
     this.characterWasOnGround = false;
     this.characterAirborneSince = 0;
     this.currentHeight = 0;
-    this.currentSurfaceAngle = new Vector35();
-    this.characterVelocity = new Vector35();
-    this.vectorUp = new Vector35(0, 1, 0);
-    this.vectorDown = new Vector35(0, -1, 0);
+    this.currentSurfaceAngle = new Vector36();
+    this.characterVelocity = new Vector36();
+    this.vectorUp = new Vector36(0, 1, 0);
+    this.vectorDown = new Vector36(0, -1, 0);
     this.rotationOffset = 0;
     this.azimuthalAngle = 0;
     this.tempMatrix = new Matrix4();
     this.tempSegment = new Line3();
     this.tempQuaternion = new Quaternion2();
     this.tempEuler = new Euler();
-    this.tempVector = new Vector35();
-    this.tempVector2 = new Vector35();
-    this.tempVector3 = new Vector35();
+    this.tempVector = new Vector36();
+    this.tempVector2 = new Vector36();
+    this.tempVector3 = new Vector36();
     this.rayCaster = new Raycaster2();
     this.surfaceTempQuaternion = new Quaternion2();
     this.surfaceTempQuaternion2 = new Quaternion2();
-    this.surfaceTempVector1 = new Vector35();
-    this.surfaceTempVector2 = new Vector35();
-    this.surfaceTempVector3 = new Vector35();
-    this.surfaceTempVector4 = new Vector35();
-    this.surfaceTempVector5 = new Vector35();
+    this.surfaceTempVector1 = new Vector36();
+    this.surfaceTempVector2 = new Vector36();
+    this.surfaceTempVector3 = new Vector36();
+    this.surfaceTempVector4 = new Vector36();
+    this.surfaceTempVector5 = new Vector36();
     this.surfaceTempRay = new Ray();
     this.lastFrameSurfaceState = null;
     this.jumpPressed = false;
@@ -1666,17 +1841,17 @@ var LocalController = class {
     }
   }
   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
       );
     }
   }
@@ -1895,7 +2070,7 @@ var LocalController = class {
 };
 
 // src/character/RemoteController.ts
-import { Quaternion as Quaternion3, Vector3 as Vector36 } from "three";
+import { Quaternion as Quaternion3, Vector3 as Vector37 } from "three";
 var tempQuaternion = new Quaternion3();
 var RemoteController = class {
   constructor(config) {
@@ -1924,7 +2099,7 @@ var RemoteController = class {
   }
   updateFromNetwork(clientUpdate) {
     const { position, rotation, state } = clientUpdate;
-    this.config.character.position.lerp(new Vector36(position.x, position.y, position.z), 0.15);
+    this.config.character.position.lerp(new Vector37(position.x, position.y, position.z), 0.15);
     const rotationQuaternion = new Quaternion3(0, rotation.quaternionY, 0, rotation.quaternionW);
     this.config.character.quaternion.slerp(rotationQuaternion, 0.6);
     if (state !== this.currentAnimation) {
@@ -1935,7 +2110,7 @@ var RemoteController = class {
 };
 
 // src/character/url-position.ts
-import { Quaternion as Quaternion4, Vector3 as Vector37 } from "three";
+import { Quaternion as Quaternion4, Vector3 as Vector38 } from "three";
 function encodeCharacterAndCamera(character, camera) {
   return [
     ...toArray(character.position),
@@ -1948,11 +2123,11 @@ function decodeCharacterAndCamera(hash) {
   const values = hash.split(",").map(Number);
   return {
     character: {
-      position: new Vector37(values[0], values[1], values[2]),
+      position: new Vector38(values[0], values[1], values[2]),
       quaternion: new Quaternion4(values[3], values[4], values[5], values[6])
     },
     camera: {
-      position: new Vector37(values[7], values[8], values[9]),
+      position: new Vector38(values[7], values[8], values[9]),
       quaternion: new Quaternion4(values[10], values[11], values[12], values[13])
     }
   };
@@ -1962,16 +2137,17 @@ function decodeCharacterAndCamera(hash) {
 var CharacterManager = class {
   constructor(config) {
     this.config = config;
-    this.headTargetOffset = new Vector38(0, 1.3, 0);
+    this.headTargetOffset = new Vector39(0, 1.3, 0);
     this.localClientId = 0;
     this.remoteCharacters = /* @__PURE__ */ new Map();
     this.remoteCharacterControllers = /* @__PURE__ */ new Map();
     this.localCharacterSpawned = false;
     this.localCharacter = null;
     this.speakingCharacters = /* @__PURE__ */ new Map();
+    this.lastUpdateSentTime = 0;
     this.group = new Group2();
   }
-  spawnLocalCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+  spawnLocalCharacter(id, username, characterDescription, spawnPosition = new Vector39(), spawnRotation = new Euler2()) {
     const character = new Character({
       username,
       characterDescription,
@@ -2014,7 +2190,7 @@ var CharacterManager = class {
   setupTweakPane(tweakPane) {
     tweakPane.setupCharacterController(this.localController);
   }
-  spawnRemoteCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+  spawnRemoteCharacter(id, username, characterDescription, spawnPosition = new Vector39(), spawnRotation = new Euler2()) {
     const character = new Character({
       username,
       characterDescription,
@@ -2060,6 +2236,15 @@ var CharacterManager = class {
   setSpeakingCharacter(id, value) {
     this.speakingCharacters.set(id, value);
   }
+  addSelfChatBubble(message) {
+    if (this.localCharacter) {
+      this.localCharacter.addChatBubble(message);
+    }
+  }
+  addChatBubble(id, message) {
+    var _a;
+    (_a = this.remoteCharacters.get(id)) == null ? void 0 : _a.addChatBubble(message);
+  }
   respawnIfPresent(id) {
     const characterInfo = this.config.characterResolve(id);
     if (this.localCharacter && this.localClientId == id) {
@@ -2083,10 +2268,13 @@ var CharacterManager = class {
         );
       }
       this.localController.update();
-      if (this.config.timeManager.frame % 2 === 0) {
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      const timeSinceLastUpdate = currentTime - this.lastUpdateSentTime;
+      if (timeSinceLastUpdate > 30) {
+        this.lastUpdateSentTime = currentTime;
         this.config.sendUpdate(this.localController.networkState);
       }
-      const targetOffset = new Vector38();
+      const targetOffset = new Vector39();
       targetOffset.add(this.headTargetOffset).applyQuaternion(this.localCharacter.quaternion).add(this.localCharacter.position);
       this.config.cameraManager.setTarget(targetOffset);
       for (const [id, update] of this.config.remoteUserStates) {
@@ -2101,7 +2289,7 @@ var CharacterManager = class {
             id,
             characterInfo.username,
             characterInfo.characterDescription,
-            new Vector38(position.x, position.y, position.z)
+            new Vector39(position.x, position.y, position.z)
           );
         }
         const characterController = this.remoteCharacterControllers.get(id);
@@ -2197,35 +2385,42 @@ var CharacterModelLoader = class {
     }
   }
   async loadFromUrl(url, fileType, extension) {
-    if (["gltf", "glb"].includes(extension)) {
-      return new Promise(async (resolve, reject) => {
-        const modelLoadResult = await this.modelLoader.load(
-          url,
-          (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);
+    return new Promise(async (resolve, reject) => {
+      const modelLoadResult = await this.modelLoader.load(
+        url,
+        (loaded, total) => {
         }
-      });
-    } else {
-      console.error(`Error: can't recognize ${url} extension: ${extension}`);
-    }
+      );
+      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);
+      }
+    });
   }
 };
 
 // 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));
@@ -2247,10 +2442,16 @@ 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));
   }
@@ -2287,6 +2488,7 @@ var KeyInputManager = class {
   }
   dispose() {
     this.eventHandlerCollection.clear();
+    this.bindings.clear();
   }
 };
 
@@ -2487,11 +2689,15 @@ var VirtualJoystick = class _VirtualJoystick {
 // src/mml/MMLCompositionScene.ts
 import {
   InteractionManager,
-  MMLClickTrigger,
-  PromptManager,
   LoadingProgressManager,
-  MMLDocumentTimeManager
-} from "mml-web";
+  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) {
@@ -2499,21 +2705,54 @@ 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,
-      getRootContainer: () => this.group,
-      getCamera: () => this.config.camera,
+      getGraphicsAdapter() {
+        return graphicsAdapter;
+      },
+      hasGraphicsAdapter() {
+        return true;
+      },
       addCollider: (object, mElement) => {
         this.config.collisionsManager.addMeshesGroup(object, mElement);
       },
@@ -2551,7 +2790,11 @@ var MMLCompositionScene = class {
         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) {
@@ -3612,12 +3855,12 @@ import {
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
 // src/sun/Sun.ts
-import { CameraHelper, Color as Color5, DirectionalLight, Group as Group4, OrthographicCamera, Vector3 as Vector39 } from "three";
+import { CameraHelper, Color as Color5, DirectionalLight, Group as Group4, OrthographicCamera, Vector3 as Vector310 } from "three";
 var Sun = class extends Group4 {
   constructor() {
     super();
     this.debug = false;
-    this.sunOffset = new Vector39(
+    this.sunOffset = new Vector310(
       sunValues.sunPosition.sunAzimuthalAngle * (Math.PI / 180),
       sunValues.sunPosition.sunPolarAngle * (Math.PI / 180),
       100
@@ -3645,7 +3888,7 @@ var Sun = class extends Group4 {
     this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
     this.directionalLight.castShadow = true;
     this.setColor();
-    this.updateCharacterPosition(new Vector39(0, 0, 0));
+    this.updateCharacterPosition(new Vector310(0, 0, 0));
     this.add(this.directionalLight);
     if (this.debug === true && this.camHelper instanceof CameraHelper) {
       this.add(this.camHelper);
@@ -3683,7 +3926,7 @@ var Sun = class extends Group4 {
     if (!this.target)
       return;
     const distance = this.sunOffset.z;
-    const sphericalPosition = new Vector39(
+    const sphericalPosition = new Vector310(
       distance * Math.sin(polarAngle) * Math.cos(azimuthalAngle),
       distance * Math.cos(polarAngle),
       distance * Math.sin(polarAngle) * Math.sin(azimuthalAngle)
@@ -3858,7 +4101,7 @@ import {
   ShaderMaterial as ShaderMaterial4,
   Uniform as Uniform7,
   Vector2 as Vector26,
-  Vector3 as Vector313,
+  Vector3 as Vector314,
   WebGLMultipleRenderTargets,
   WebGLRenderTarget
 } from "three";
@@ -4003,7 +4246,7 @@ var DepthDownSample = {
 };
 
 // src/rendering/post-effects/n8-ssao/EffectCompositer.ts
-import { Matrix4 as Matrix43, Uniform as Uniform4, Vector2 as Vector23, Vector3 as Vector310 } from "three";
+import { Matrix4 as Matrix43, Uniform as Uniform4, Vector2 as Vector23, Vector3 as Vector311 } from "three";
 var EffectCompositer = {
   uniforms: {
     sceneDiffuse: new Uniform4(null),
@@ -4013,9 +4256,9 @@ var EffectCompositer = {
     viewMat: new Uniform4(new Matrix43()),
     projectionMatrixInv: new Uniform4(new Matrix43()),
     viewMatrixInv: new Uniform4(new Matrix43()),
-    cameraPos: new Uniform4(new Vector310()),
+    cameraPos: new Uniform4(new Vector311()),
     resolution: new Uniform4(new Vector23()),
-    color: new Uniform4(new Vector310()),
+    color: new Uniform4(new Vector311()),
     blueNoise: new Uniform4(null),
     downsampledDepth: new Uniform4(null),
     time: new Uniform4(0),
@@ -4266,7 +4509,7 @@ var EffectCompositer = {
 };
 
 // src/rendering/post-effects/n8-ssao/EffectShader.ts
-import { Matrix4 as Matrix44, Uniform as Uniform5, Vector2 as Vector24, Vector3 as Vector311 } from "three";
+import { Matrix4 as Matrix44, Uniform as Uniform5, Vector2 as Vector24, Vector3 as Vector312 } from "three";
 var EffectShader = {
   uniforms: {
     sceneDiffuse: new Uniform5(null),
@@ -4277,7 +4520,7 @@ var EffectShader = {
     projViewMat: new Uniform5(new Matrix44()),
     projectionMatrixInv: new Uniform5(new Matrix44()),
     viewMatrixInv: new Uniform5(new Matrix44()),
-    cameraPos: new Uniform5(new Vector311()),
+    cameraPos: new Uniform5(new Vector312()),
     resolution: new Uniform5(new Vector24()),
     time: new Uniform5(0),
     samples: new Uniform5([]),
@@ -4489,7 +4732,7 @@ var EffectShader = {
 import {
   BufferAttribute,
   BufferGeometry,
-  Mesh as Mesh4,
+  Mesh as Mesh3,
   OrthographicCamera as OrthographicCamera2,
   Sphere
 } from "three";
@@ -4505,7 +4748,7 @@ var FullScreenTriangle = class {
     this.geometry.boundingSphere = new Sphere();
     this.geometry.computeBoundingSphere = function() {
     };
-    this.mesh = new Mesh4(this.geometry, material);
+    this.mesh = new Mesh3(this.geometry, material);
     this.mesh.frustumCulled = false;
   }
   get material() {
@@ -4524,7 +4767,7 @@ var FullScreenTriangle = class {
 };
 
 // src/rendering/post-effects/n8-ssao/PoissionBlur.ts
-import { Matrix4 as Matrix45, Uniform as Uniform6, Vector2 as Vector25, Vector3 as Vector312 } from "three";
+import { Matrix4 as Matrix45, Uniform as Uniform6, Vector2 as Vector25, Vector3 as Vector313 } from "three";
 var PoissionBlur = {
   uniforms: {
     sceneDiffuse: new Uniform6(null),
@@ -4534,7 +4777,7 @@ var PoissionBlur = {
     viewMat: new Uniform6(new Matrix45()),
     projectionMatrixInv: new Uniform6(new Matrix45()),
     viewMatrixInv: new Uniform6(new Matrix45()),
-    cameraPos: new Uniform6(new Vector312()),
+    cameraPos: new Uniform6(new Vector313()),
     resolution: new Uniform6(new Vector25()),
     time: new Uniform6(0),
     r: new Uniform6(5),
@@ -4920,7 +5163,7 @@ var N8SSAOPass = class extends Pass {
       const x = r * Math.cos(theta);
       const y = r * Math.sin(theta);
       const z = Math.sqrt(1 - (x * x + y * y));
-      points.push(new Vector313(x, y, z));
+      points.push(new Vector314(x, y, z));
     }
     return points;
   }
@@ -5019,7 +5262,7 @@ var N8SSAOPass = class extends Pass {
     effectShaderUniforms.projViewMat.value = this.camera.projectionMatrix.clone().multiply(this.camera.matrixWorldInverse.clone());
     effectShaderUniforms.projectionMatrixInv.value = this.camera.projectionMatrixInverse;
     effectShaderUniforms.viewMatrixInv.value = this.camera.matrixWorld;
-    effectShaderUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector313());
+    effectShaderUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector314());
     effectShaderUniforms.resolution.value = this.configuration.halfRes ? this.r.clone().multiplyScalar(1 / 2).floor() : this.r;
     effectShaderUniforms.time.value = performance.now() / 1e3;
     effectShaderUniforms.samples.value = this.samples;
@@ -5048,7 +5291,7 @@ var N8SSAOPass = class extends Pass {
       poissonBlurUniforms.viewMat.value = this.camera.matrixWorldInverse;
       poissonBlurUniforms.projectionMatrixInv.value = this.camera.projectionMatrixInverse;
       poissonBlurUniforms.viewMatrixInv.value = this.camera.matrixWorld;
-      poissonBlurUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector313());
+      poissonBlurUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector314());
       poissonBlurUniforms.resolution.value = this.configuration.halfRes ? this.r.clone().multiplyScalar(1 / 2).floor() : this.r;
       poissonBlurUniforms.time.value = performance.now() / 1e3;
       poissonBlurUniforms.blueNoise.value = this.bluenoise;
@@ -5087,7 +5330,7 @@ var N8SSAOPass = class extends Pass {
     effectCompositerUniforms.tDiffuse.value = this.writeTargetInternal.texture;
     effectCompositerUniforms.color.value = this.c.copy(this.configuration.color).convertSRGBToLinear();
     effectCompositerUniforms.colorMultiply.value = this.configuration.colorMultiply;
-    effectCompositerUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector313());
+    effectCompositerUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector314());
     effectCompositerUniforms.fog.value = !!this.scene.fog;
     if (this.scene.fog) {
       if (this.scene.fog instanceof Fog && this.scene.fog.isFog === true) {
@@ -5152,7 +5395,7 @@ var N8SSAOPass = class extends Pass {
 var Composer = class {
   constructor({
     scene,
-    camera,
+    cameraManager,
     spawnSun = false,
     environmentConfiguration
   }) {
@@ -5166,8 +5409,8 @@ var Composer = class {
     this.sun = null;
     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",
@@ -5187,14 +5430,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,
@@ -5212,7 +5455,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) {
@@ -5221,7 +5468,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;
@@ -5234,8 +5486,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,
@@ -5250,7 +5502,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;
@@ -5259,7 +5511,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);
@@ -5346,8 +5598,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,
@@ -5376,11 +5628,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(
@@ -5522,11 +5775,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() {
@@ -5625,39 +5880,73 @@ var TimeManager = class {
 };
 
 // src/collisions/CollisionsManager.ts
+import { MMLCollisionTrigger } from "@mml-io/mml-web";
 import {
-  getRelativePositionAndRotationRelativeToObject,
-  MMLCollisionTrigger
-} from "mml-web";
-import {
-  Box3,
+  Box3 as Box32,
   Color as Color8,
   DoubleSide,
-  Euler as Euler4,
+  Euler as Euler5,
   Group as Group5,
   Line3 as Line32,
-  Matrix4 as Matrix46,
-  Mesh as Mesh5,
-  MeshBasicMaterial as MeshBasicMaterial3,
-  Quaternion as Quaternion6,
+  Matrix4 as Matrix47,
+  Mesh as Mesh4,
+  MeshBasicMaterial,
+  Quaternion as Quaternion7,
   Ray as Ray2,
-  Vector3 as Vector314
+  Vector3 as Vector316
 } 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 Vector315 } from "three";
+var tempContainerMatrix = new Matrix46();
+var tempTargetMatrix = new Matrix46();
+var tempPositionVector = new Vector315();
+var tempRotationEuler = new Euler4();
+var tempRotationQuaternion = new Quaternion6();
+var tempScaleVector = new Vector315();
+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 Vector316();
+    this.tempVector2 = new Vector316();
+    this.tempVector3 = new Vector316();
+    this.tempQuaternion = new Quaternion7();
     this.tempRay = new Ray2();
-    this.tempMatrix = new Matrix46();
-    this.tempMatrix2 = new Matrix46();
-    this.tempBox = new Box3();
-    this.tempEuler = new Euler4();
+    this.tempMatrix = new Matrix47();
+    this.tempMatrix2 = new Matrix47();
+    this.tempBox = new Box32();
+    this.tempEuler = new Euler5();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
@@ -5667,7 +5956,7 @@ var CollisionsManager = class {
   raycastFirst(ray) {
     let minimumDistance = null;
     let minimumHit = null;
-    let minimumNormal = new Vector314();
+    let minimumNormal = new Vector316();
     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);
@@ -5725,7 +6014,7 @@ var CollisionsManager = class {
     };
     if (this.debug) {
       newBufferGeometry.boundsTree = meshBVH;
-      const wireframeMesh = new Mesh5(newBufferGeometry, new MeshBasicMaterial3({ wireframe: true }));
+      const wireframeMesh = new Mesh4(newBufferGeometry, new MeshBasicMaterial({ wireframe: true }));
       const normalsHelper = new VertexNormalsHelper(wireframeMesh, 0.25, 65280);
       const visualizer = new MeshBVHHelper(wireframeMesh, 4);
       visualizer.edgeMaterial.color = new Color8("blue");
@@ -5808,7 +6097,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector314().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
+            collisionPosition = new Vector316().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;
@@ -5866,10 +6155,10 @@ import {
   FrontSide as FrontSide2,
   Group as Group6,
   LinearMipMapLinearFilter,
-  Mesh as Mesh6,
+  Mesh as Mesh5,
   MeshStandardMaterial as MeshStandardMaterial3,
   NearestFilter as NearestFilter2,
-  PlaneGeometry as PlaneGeometry2,
+  PlaneGeometry,
   RepeatWrapping as RepeatWrapping2
 } from "three";
 var canvas = document.createElement("canvas");
@@ -5886,7 +6175,7 @@ var GroundPlane = class extends Group6 {
     super();
     this.floorSize = 210;
     this.floorTexture = null;
-    this.floorGeometry = new PlaneGeometry2(this.floorSize, this.floorSize, 1, 1);
+    this.floorGeometry = new PlaneGeometry(this.floorSize, this.floorSize, 1, 1);
     this.floorMesh = null;
     this.floorMaterial = new MeshStandardMaterial3({
       color: 16777215,
@@ -5894,7 +6183,7 @@ var GroundPlane = class extends Group6 {
       metalness: 0.05,
       roughness: 0.95
     });
-    this.floorMesh = new Mesh6(this.floorGeometry, this.floorMaterial);
+    this.floorMesh = new Mesh5(this.floorGeometry, this.floorMaterial);
     this.floorMesh.receiveShadow = true;
     this.floorMesh.rotation.x = Math.PI * -0.5;
     this.add(this.floorMesh);
@@ -5910,59 +6199,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);
@@ -5971,6 +6335,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();
       }
@@ -5989,23 +6355,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";
@@ -6013,7 +6392,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";
@@ -6021,11 +6401,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 = () => {
@@ -6040,7 +6423,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(
@@ -6100,6 +6483,7 @@ export {
   Composer,
   ErrorScreen,
   GroundPlane,
+  Key,
   KeyInputManager,
   LoadingScreen,
   MMLCompositionScene,