@mml-io/3d-web-client-core 0.0.0-experimental-8e179c2-20240414 → 0.0.0-experimental-b2c739e-20240426

package/build/index.js

@@ -83,8 +83,9 @@ var EventHandlerCollection = class _EventHandlerCollection {
 };
 
 // src/input/VirtualJoystick.ts
-var _VirtualJoystick = class _VirtualJoystick {
-  constructor(attrs) {
+var VirtualJoystick = class _VirtualJoystick {
+  constructor(holderElement, attrs) {
+    this.holderElement = holderElement;
     this.left = false;
     this.right = false;
     this.up = false;
@@ -107,7 +108,23 @@ var _VirtualJoystick = class _VirtualJoystick {
     this.width = attrs.width || this.radius * 2 + this.inner_radius * 2;
     this.height = attrs.height || this.radius * 2 + this.inner_radius * 2;
     this.mouse_support = this.checkTouch() || attrs.mouse_support === true;
-    this.initializeJoystick();
+    this.div = document.createElement("div");
+    const divStyle = this.div.style;
+    divStyle.display = this.checkTouch() || this.mouse_support ? "visible" : "none";
+    divStyle.position = "fixed";
+    if (this.anchor === "left") {
+      divStyle.left = `${this.x}px`;
+    } else {
+      divStyle.right = `${this.x}px`;
+    }
+    divStyle.bottom = `${this.y}px`;
+    divStyle.width = `${this.width}px`;
+    divStyle.height = `${this.height}px`;
+    divStyle.zIndex = "10000";
+    divStyle.overflow = "hidden";
+    this.holderElement.appendChild(this.div);
+    this.setupBaseAndControl();
+    this.bindEvents();
   }
   static checkForTouch() {
     try {
@@ -117,38 +134,9 @@ var _VirtualJoystick = class _VirtualJoystick {
       return false;
     }
   }
-  static isTouchOnJoystick(touch) {
-    if (!_VirtualJoystick.JOYSTICK_DIV) {
-      return false;
-    }
-    const divRect = _VirtualJoystick.JOYSTICK_DIV.getBoundingClientRect();
-    return touch.clientX >= divRect.left && touch.clientX <= divRect.right && touch.clientY >= divRect.top && touch.clientY <= divRect.bottom;
-  }
   checkTouch() {
     return _VirtualJoystick.checkForTouch();
   }
-  initializeJoystick() {
-    if (!_VirtualJoystick.JOYSTICK_DIV) {
-      this.div = document.createElement("div");
-      const divStyle = this.div.style;
-      divStyle.display = this.checkTouch() || this.mouse_support ? "visible" : "none";
-      divStyle.position = "fixed";
-      if (this.anchor === "left") {
-        divStyle.left = `${this.x}px`;
-      } else {
-        divStyle.right = `${this.x}px`;
-      }
-      divStyle.bottom = `${this.y}px`;
-      divStyle.width = `${this.width}px`;
-      divStyle.height = `${this.height}px`;
-      divStyle.zIndex = "10000";
-      divStyle.overflow = "hidden";
-      document.body.appendChild(this.div);
-      _VirtualJoystick.JOYSTICK_DIV = this.div;
-    }
-    this.setupBaseAndControl();
-    this.bindEvents();
-  }
   setupBaseAndControl() {
     this.base = document.createElement("span");
     let divStyle = this.base.style;
@@ -188,6 +176,7 @@ var _VirtualJoystick = class _VirtualJoystick {
   }
   handleTouchStart(evt) {
     evt.preventDefault();
+    evt.stopPropagation();
     if (evt.touches) {
       const touch = evt.touches[0];
       this.updateControlAndDirection(touch);
@@ -195,6 +184,7 @@ var _VirtualJoystick = class _VirtualJoystick {
   }
   handleTouchMove(evt) {
     evt.preventDefault();
+    evt.stopPropagation();
     if (evt.touches.length > 0) {
       const touch = evt.touches[0];
       this.updateControlAndDirection(touch);
@@ -202,11 +192,13 @@ var _VirtualJoystick = class _VirtualJoystick {
   }
   handleMouseDown(evt) {
     evt.preventDefault();
+    evt.stopPropagation();
     this.updateControlAndDirection(evt);
   }
   handleMouseMove(evt) {
     if (evt.buttons === 1) {
       evt.preventDefault();
+      evt.stopPropagation();
       this.updateControlAndDirection(evt);
     }
   }
@@ -242,8 +234,6 @@ var _VirtualJoystick = class _VirtualJoystick {
     return dx > 0 && Math.abs(dy) <= 2 * Math.abs(dx);
   }
 };
-_VirtualJoystick.JOYSTICK_DIV = null;
-var VirtualJoystick = _VirtualJoystick;
 
 // src/tweakpane/tweakPaneActivity.ts
 var isTweakpaneActive = false;
@@ -313,11 +303,9 @@ var CameraManager = class {
   }
   onTouchStart(evt) {
     Array.from(evt.touches).forEach((touch) => {
-      if (!VirtualJoystick.isTouchOnJoystick(touch)) {
-        this.dragging = true;
-        this.lastTouchX = touch.clientX;
-        this.lastTouchY = touch.clientY;
-      }
+      this.dragging = true;
+      this.lastTouchX = touch.clientX;
+      this.lastTouchY = touch.clientY;
     });
   }
   onTouchMove(evt) {
@@ -325,7 +313,7 @@ var CameraManager = class {
       return;
     }
     evt.preventDefault();
-    const touch = Array.from(evt.touches).find((t) => !VirtualJoystick.isTouchOnJoystick(t));
+    const touch = Array.from(evt.touches).find((t) => true);
     if (touch) {
       const dx = touch.clientX - this.lastTouchX;
       const dy = touch.clientY - this.lastTouchY;
@@ -340,9 +328,7 @@ var CameraManager = class {
   }
   onTouchEnd(evt) {
     if (this.dragging) {
-      const touchEnded = Array.from(evt.changedTouches).some(
-        (t) => !VirtualJoystick.isTouchOnJoystick(t)
-      );
+      const touchEnded = Array.from(evt.changedTouches).some((t) => true);
       if (touchEnded) {
         this.dragging = false;
       }
@@ -478,9 +464,9 @@ import { Color as Color3, Group, Vector3 as Vector34 } from "three";
 // src/character/CharacterModel.ts
 import {
   MMLCharacter,
-  ModelLoader,
   parseMMLDescription
 } from "@mml-io/3d-web-avatar";
+import { ModelLoader } from "@mml-io/model-loader";
 import {
   AnimationClip,
   AnimationMixer,
@@ -634,13 +620,9 @@ var CharacterFolder = class {
 
 // src/character/CharacterMaterial.ts
 var CharacterMaterial = class extends MeshStandardMaterial {
-  constructor(isLocal, cameraManager, characterId, originalMaterial, colorOverride) {
+  constructor(config) {
     super();
-    this.isLocal = isLocal;
-    this.cameraManager = cameraManager;
-    this.characterId = characterId;
-    this.originalMaterial = originalMaterial;
-    this.colorOverride = colorOverride;
+    this.config = config;
     this.uniforms = {
       discardAll: { value: 1 },
       diffuseColor: { value: new Color() },
@@ -649,12 +631,12 @@ var CharacterMaterial = class extends MeshStandardMaterial {
     this.colorsCube216 = [];
     this.targetAlpha = 1;
     this.currentAlpha = 1;
-    this.copy(this.originalMaterial);
+    this.copy(this.config.originalMaterial);
     this.generateColorCube();
-    this.color = this.colorOverride || this.colorsCube216[this.characterId];
+    this.color = this.config.colorOverride || this.colorsCube216[this.config.characterId];
     this.envMapIntensity = characterValues.envMapIntensity;
     this.transparent = true;
-    this.side = this.originalMaterial.side;
+    this.side = this.config.originalMaterial.side;
     this.onBeforeCompile = (shader) => {
       this.uniforms = UniformsUtils.clone(shader.uniforms);
       this.uniforms.nearClip = { value: 0.01 };
@@ -730,16 +712,16 @@ var CharacterMaterial = class extends MeshStandardMaterial {
     }
   }
   update() {
-    if (this.isLocal) {
-      this.targetAlpha = this.cameraManager.targetDistance < 0.4 ? 0 : 1;
+    if (this.config.isLocal) {
+      this.targetAlpha = this.config.cameraManager.targetDistance < 0.4 ? 0 : 1;
       this.currentAlpha += ease(this.targetAlpha, this.currentAlpha, 0.07);
       if (this.currentAlpha > 0.999) {
         this.currentAlpha = 1;
-        this.cameraManager.minPolarAngle = Math.PI * 0.25;
+        this.config.cameraManager.minPolarAngle = Math.PI * 0.25;
       }
       if (this.currentAlpha < 1e-3) {
         this.currentAlpha = 0;
-        this.cameraManager.minPolarAngle = Math.PI * 0.35;
+        this.config.cameraManager.minPolarAngle = Math.PI * 0.35;
       }
       this.uniforms.discardAll.value = this.currentAlpha === 0 ? 1 : 0;
       if (this.currentAlpha !== this.opacity) {
@@ -770,14 +752,9 @@ var AnimationState = /* @__PURE__ */ ((AnimationState2) => {
 })(AnimationState || {});
 
 // src/character/CharacterModel.ts
-var CharacterModel = class {
-  constructor(characterDescription, animationConfig, characterModelLoader, cameraManager, characterId, isLocal) {
-    this.characterDescription = characterDescription;
-    this.animationConfig = animationConfig;
-    this.characterModelLoader = characterModelLoader;
-    this.cameraManager = cameraManager;
-    this.characterId = characterId;
-    this.isLocal = isLocal;
+var _CharacterModel = class _CharacterModel {
+  constructor(config) {
+    this.config = config;
     this.mesh = null;
     this.headBone = null;
     this.materials = /* @__PURE__ */ new Map();
@@ -787,16 +764,22 @@ var CharacterModel = class {
   }
   async init() {
     await this.loadMainMesh();
-    await this.setAnimationFromFile(this.animationConfig.idleAnimationFileUrl, 0 /* idle */);
     await this.setAnimationFromFile(
-      this.animationConfig.jogAnimationFileUrl,
+      this.config.animationConfig.idleAnimationFileUrl,
+      0 /* idle */
+    );
+    await this.setAnimationFromFile(
+      this.config.animationConfig.jogAnimationFileUrl,
       1 /* walking */
     );
     await this.setAnimationFromFile(
-      this.animationConfig.sprintAnimationFileUrl,
+      this.config.animationConfig.sprintAnimationFileUrl,
       2 /* running */
     );
-    await this.setAnimationFromFile(this.animationConfig.airAnimationFileUrl, 4 /* air */);
+    await this.setAnimationFromFile(
+      this.config.animationConfig.airAnimationFileUrl,
+      4 /* air */
+    );
     this.applyCustomMaterials();
   }
   applyCustomMaterials() {
@@ -809,18 +792,18 @@ var CharacterModel = class {
         if (this.materials.has(originalMaterial.name)) {
           asMesh.material = this.materials.get(originalMaterial.name);
         } else {
-          const material = originalMaterial.name === "body_replaceable_color" ? new CharacterMaterial(
-            this.isLocal,
-            this.cameraManager,
-            this.characterId,
+          const material = originalMaterial.name === "body_replaceable_color" ? new CharacterMaterial({
+            isLocal: this.config.isLocal,
+            cameraManager: this.config.cameraManager,
+            characterId: this.config.characterId,
             originalMaterial
-          ) : new CharacterMaterial(
-            this.isLocal,
-            this.cameraManager,
-            this.characterId,
+          }) : new CharacterMaterial({
+            isLocal: this.config.isLocal,
+            cameraManager: this.config.cameraManager,
+            characterId: this.config.characterId,
             originalMaterial,
-            originalMaterial.color
-          );
+            colorOverride: originalMaterial.color
+          });
           this.materials.set(originalMaterial.name, material);
           asMesh.material = material;
         }
@@ -847,7 +830,7 @@ var CharacterModel = class {
     var _a, _b;
     if (((_a = mmlCharacterDescription.base) == null ? void 0 : _a.url.length) === 0) {
       throw new Error(
-        "ERROR: An MML Character Description was provided but it's not a valid <m-character> string, or a valid URL"
+        "ERROR: An MML Character Description was provided, but it's not a valid <m-character> string, or a valid URL"
       );
     }
     let mergedCharacter = null;
@@ -855,27 +838,30 @@ var CharacterModel = class {
       const characterBase = ((_b = mmlCharacterDescription.base) == null ? void 0 : _b.url) || null;
       if (characterBase) {
         this.mmlCharacterDescription = mmlCharacterDescription;
-        const mmlCharacter = new MMLCharacter(new ModelLoader());
+        const mmlCharacter = new MMLCharacter(_CharacterModel.ModelLoader);
         mergedCharacter = await mmlCharacter.mergeBodyParts(
           characterBase,
           mmlCharacterDescription.parts
         );
         if (mergedCharacter) {
-          return mergedCharacter.children[0].children[0];
+          return mergedCharacter;
         }
       }
     }
   }
   async loadCharacterFromDescription() {
-    if (this.characterDescription.meshFileUrl) {
-      return await this.characterModelLoader.load(this.characterDescription.meshFileUrl, "model") || null;
+    if (this.config.characterDescription.meshFileUrl) {
+      return await this.config.characterModelLoader.load(
+        this.config.characterDescription.meshFileUrl,
+        "model"
+      ) || null;
     }
     let mmlCharacterSource;
-    if (this.characterDescription.mmlCharacterUrl) {
-      const res = await fetch(this.characterDescription.mmlCharacterUrl);
+    if (this.config.characterDescription.mmlCharacterUrl) {
+      const res = await fetch(this.config.characterDescription.mmlCharacterUrl);
       mmlCharacterSource = await res.text();
-    } else if (this.characterDescription.mmlCharacterString) {
-      mmlCharacterSource = this.characterDescription.mmlCharacterString;
+    } else if (this.config.characterDescription.mmlCharacterString) {
+      mmlCharacterSource = this.config.characterDescription.mmlCharacterString;
     } else {
       throw new Error(
         "ERROR: No Character Description was provided. Specify one of meshFileUrl, mmlCharacterUrl or mmlCharacterString"
@@ -917,7 +903,7 @@ var CharacterModel = class {
   }
   async setAnimationFromFile(animationFileUrl, animationType) {
     return new Promise(async (resolve, reject) => {
-      const animation = await this.characterModelLoader.load(animationFileUrl, "animation");
+      const animation = await this.config.characterModelLoader.load(animationFileUrl, "animation");
       const cleanAnimation = this.cleanAnimationClips(this.mesh, animation);
       if (typeof animation !== "undefined" && cleanAnimation instanceof AnimationClip) {
         this.animations[animationType] = this.animationMixer.clipAction(cleanAnimation);
@@ -956,6 +942,8 @@ var CharacterModel = class {
     }
   }
 };
+_CharacterModel.ModelLoader = new ModelLoader();
+var CharacterModel = _CharacterModel;
 
 // src/character/CharacterSpeakingIndicator.ts
 import {
@@ -1116,27 +1104,27 @@ function CanvasText(message, options) {
   const padding = options.paddingPx || 0;
   const font = options.font || "Arial";
   const fontString = (options.bold ? "bold " : "") + fontsize + "px " + font;
-  const canvas = document.createElement("canvas");
-  const ct = canvas.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ct = canvas2.getContext("2d");
   const textAlign = options.alignment ?? "left";
   if (options.dimensions) {
-    canvas.width = options.dimensions.width;
-    canvas.height = options.dimensions.height;
-    ct.clearRect(0, 0, canvas.width, canvas.height);
+    canvas2.width = options.dimensions.width;
+    canvas2.height = options.dimensions.height;
+    ct.clearRect(0, 0, canvas2.width, canvas2.height);
     ct.font = fontString;
     ct.textAlign = textAlign;
     ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
     ct.lineWidth = 0;
-    ct.fillRect(0, 0, canvas.width, canvas.height);
+    ct.fillRect(0, 0, canvas2.width, canvas2.height);
     ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
     ct.font = fontString;
     printAtWordWrap(
       ct,
       message,
-      getTextAlignOffset(textAlign, canvas.width),
+      getTextAlignOffset(textAlign, canvas2.width),
       fontsize,
       fontsize,
-      canvas.width,
+      canvas2.width,
       padding,
       textAlign
     );
@@ -1145,28 +1133,28 @@ function CanvasText(message, options) {
     const metrics = ct.measureText(message);
     const textWidth = metrics.width;
     const textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
-    canvas.width = textWidth + padding * 2;
-    canvas.height = textHeight + padding;
-    ct.clearRect(0, 0, canvas.width, canvas.height);
+    canvas2.width = textWidth + padding * 2;
+    canvas2.height = textHeight + padding;
+    ct.clearRect(0, 0, canvas2.width, canvas2.height);
     ct.font = fontString;
     ct.textAlign = textAlign;
     ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
     ct.lineWidth = 0;
-    ct.fillRect(0, 0, canvas.width, canvas.height);
+    ct.fillRect(0, 0, canvas2.width, canvas2.height);
     ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
     ct.font = fontString;
     ct.fillText(message, padding + getTextAlignOffset(textAlign, textWidth), textHeight);
   }
-  return canvas;
+  return canvas2;
 }
 function THREECanvasTextTexture(text, options) {
-  const canvas = CanvasText(text, options);
-  const texture = new Texture2(canvas);
+  const canvas2 = CanvasText(text, options);
+  const texture = new Texture2(canvas2);
   texture.minFilter = LinearFilter;
   texture.magFilter = LinearFilter;
   texture.format = RGBAFormat;
   texture.needsUpdate = true;
-  return { texture, width: canvas.width, height: canvas.height };
+  return { texture, width: canvas2.width, height: canvas2.height };
 }
 
 // src/character/CharacterTooltip.ts
@@ -1175,20 +1163,19 @@ var defaultLabelColor = new Color2(0);
 var defaultFontColor = new Color2(16777215);
 var defaultLabelAlignment = "center" /* center */;
 var defaultLabelFontSize = 8;
-var defaultLabelPadding = 0;
+var defaultLabelPadding = 8;
 var defaultLabelWidth = 0.25;
 var defaultLabelHeight = 0.1;
 var defaultLabelCastShadows = true;
 var tooltipGeometry = new PlaneGeometry(1, 1, 1, 1);
 var CharacterTooltip = class extends Mesh3 {
-  constructor() {
+  constructor(configArg) {
     super(tooltipGeometry);
     this.visibleOpacity = 0.85;
     this.targetOpacity = 0;
     this.fadingSpeed = 0.02;
     this.secondsToFadeOut = 10;
-    this.props = {
-      content: "",
+    this.config = {
       alignment: defaultLabelAlignment,
       width: defaultLabelWidth,
       height: defaultLabelHeight,
@@ -1196,7 +1183,8 @@ var CharacterTooltip = class extends Mesh3 {
       padding: defaultLabelPadding,
       color: defaultLabelColor,
       fontColor: defaultFontColor,
-      castShadows: defaultLabelCastShadows
+      castShadows: defaultLabelCastShadows,
+      ...configArg
     };
     this.tooltipMaterial = new MeshBasicMaterial2({
       map: null,
@@ -1217,25 +1205,21 @@ var CharacterTooltip = class extends Mesh3 {
     }
     const { texture, width, height } = THREECanvasTextTexture(content, {
       bold: true,
-      fontSize: this.props.fontSize * fontScale,
-      paddingPx: this.props.padding,
+      fontSize: this.config.fontSize * fontScale,
+      paddingPx: this.config.padding,
       textColorRGB255A1: {
-        r: this.props.fontColor.r * 255,
-        g: this.props.fontColor.g * 255,
-        b: this.props.fontColor.b * 255,
+        r: this.config.fontColor.r * 255,
+        g: this.config.fontColor.g * 255,
+        b: this.config.fontColor.b * 255,
         a: 1
       },
       backgroundColorRGB255A1: {
-        r: this.props.color.r * 255,
-        g: this.props.color.g * 255,
-        b: this.props.color.b * 255,
+        r: this.config.color.r * 255,
+        g: this.config.color.g * 255,
+        b: this.config.color.b * 255,
         a: 1
       },
-      dimensions: {
-        width: this.props.width * (100 * fontScale),
-        height: this.props.height * (100 * fontScale)
-      },
-      alignment: this.props.alignment
+      alignment: this.config.alignment
     });
     this.tooltipMaterial.map = texture;
     this.tooltipMaterial.map.magFilter = LinearFilter2;
@@ -1246,7 +1230,8 @@ var CharacterTooltip = class extends Mesh3 {
     this.position.y = 1.4;
   }
   setText(text, temporary = false) {
-    this.redrawText(text);
+    const sanitizedText = text.replace(/(\r\n|\n|\r)/gm, "");
+    this.redrawText(sanitizedText);
     this.visible = true;
     this.targetOpacity = this.visibleOpacity;
     if (temporary) {
@@ -1287,39 +1272,43 @@ var CharacterTooltip = class extends Mesh3 {
 
 // src/character/Character.ts
 var Character = class extends Group {
-  constructor(characterDescription, animationConfig, characterModelLoader, characterId, modelLoadedCallback, cameraManager, composer, isLocal) {
+  constructor(config) {
     super();
-    this.characterDescription = characterDescription;
-    this.animationConfig = animationConfig;
-    this.characterModelLoader = characterModelLoader;
-    this.characterId = characterId;
-    this.modelLoadedCallback = modelLoadedCallback;
-    this.cameraManager = cameraManager;
-    this.composer = composer;
-    this.isLocal = isLocal;
+    this.config = config;
     this.model = null;
     this.color = new Color3();
-    this.tooltip = null;
     this.speakingIndicator = null;
     this.tooltip = new CharacterTooltip();
+    this.tooltip.setText(this.config.username, this.config.isLocal);
     this.add(this.tooltip);
+    this.load().then(() => {
+      this.config.modelLoadedCallback();
+    });
+  }
+  updateCharacter(username, characterDescription) {
+    this.config.username = username;
+    this.config.characterDescription = characterDescription;
     this.load();
+    this.tooltip.setText(username, this.config.isLocal);
   }
   async load() {
-    this.model = new CharacterModel(
-      this.characterDescription,
-      this.animationConfig,
-      this.characterModelLoader,
-      this.cameraManager,
-      this.characterId,
-      this.isLocal
-    );
+    const previousModel = this.model;
+    this.model = new CharacterModel({
+      characterDescription: this.config.characterDescription,
+      animationConfig: this.config.animationConfig,
+      characterModelLoader: this.config.characterModelLoader,
+      cameraManager: this.config.cameraManager,
+      characterId: this.config.characterId,
+      isLocal: this.config.isLocal
+    });
     await this.model.init();
+    if (previousModel && previousModel.mesh) {
+      this.remove(previousModel.mesh);
+    }
     this.add(this.model.mesh);
     if (this.speakingIndicator === null) {
-      this.speakingIndicator = new CharacterSpeakingIndicator(this.composer.postPostScene);
+      this.speakingIndicator = new CharacterSpeakingIndicator(this.config.composer.postPostScene);
     }
-    this.modelLoadedCallback();
   }
   updateAnimation(targetAnimation) {
     var _a;
@@ -1330,14 +1319,14 @@ var Character = class extends Group {
     if (!this.model)
       return;
     if (this.tooltip) {
-      this.tooltip.update(this.cameraManager.camera);
+      this.tooltip.update(this.config.cameraManager.camera);
     }
     if (this.speakingIndicator) {
       this.speakingIndicator.setTime(time);
       if (this.model.mesh && this.model.headBone) {
         this.speakingIndicator.setBillboarding(
           (_a = this.model.headBone) == null ? void 0 : _a.getWorldPosition(new Vector34()),
-          this.cameraManager.camera
+          this.config.cameraManager.camera
         );
       }
     }
@@ -1364,13 +1353,8 @@ var baseControl = 200;
 var collisionDetectionSteps = 15;
 var minimumSurfaceAngle = 0.9;
 var LocalController = class {
-  constructor(character, id, collisionsManager, keyInputManager, cameraManager, timeManager) {
-    this.character = character;
-    this.id = id;
-    this.collisionsManager = collisionsManager;
-    this.keyInputManager = keyInputManager;
-    this.cameraManager = cameraManager;
-    this.timeManager = timeManager;
+  constructor(config) {
+    this.config = config;
     this.capsuleInfo = {
       radius: 0.4,
       segment: new Line3(new Vector35(), new Vector35(0, 1.05, 0))
@@ -1408,53 +1392,54 @@ var LocalController = class {
     this.surfaceTempRay = new Ray();
     this.lastFrameSurfaceState = null;
     this.networkState = {
-      id: this.id,
+      id: this.config.id,
       position: { x: 0, y: 0, z: 0 },
       rotation: { quaternionY: 0, quaternionW: 1 },
       state: 0 /* idle */
     };
   }
   updateControllerState() {
-    this.forward = this.keyInputManager.forward;
-    this.backward = this.keyInputManager.backward;
-    this.left = this.keyInputManager.left;
-    this.right = this.keyInputManager.right;
-    this.run = this.keyInputManager.run;
-    this.jump = this.keyInputManager.jump;
-    this.anyDirection = this.keyInputManager.anyDirection;
-    this.conflictingDirections = this.keyInputManager.conflictingDirection;
+    var _a, _b, _c, _d, _e;
+    this.forward = this.config.keyInputManager.forward || ((_a = this.config.virtualJoystick) == null ? void 0 : _a.up) || false;
+    this.backward = this.config.keyInputManager.backward || ((_b = this.config.virtualJoystick) == null ? void 0 : _b.down) || false;
+    this.left = this.config.keyInputManager.left || ((_c = this.config.virtualJoystick) == null ? void 0 : _c.left) || false;
+    this.right = this.config.keyInputManager.right || ((_d = this.config.virtualJoystick) == null ? void 0 : _d.right) || false;
+    this.run = this.config.keyInputManager.run;
+    this.jump = this.config.keyInputManager.jump;
+    this.anyDirection = this.config.keyInputManager.anyDirection || ((_e = this.config.virtualJoystick) == null ? void 0 : _e.hasDirection) || false;
+    this.conflictingDirections = this.config.keyInputManager.conflictingDirection;
   }
   update() {
     this.updateControllerState();
-    this.rayCaster.set(this.character.position, this.vectorDown);
-    const firstRaycastHit = this.collisionsManager.raycastFirst(this.rayCaster.ray);
+    this.rayCaster.set(this.config.character.position, this.vectorDown);
+    const firstRaycastHit = this.config.collisionsManager.raycastFirst(this.rayCaster.ray);
     if (firstRaycastHit !== null) {
       this.currentHeight = firstRaycastHit[0];
       this.currentSurfaceAngle.copy(firstRaycastHit[1]);
     }
     if (this.anyDirection || !this.characterOnGround) {
       const targetAnimation = this.getTargetAnimation();
-      this.character.updateAnimation(targetAnimation);
+      this.config.character.updateAnimation(targetAnimation);
     } else {
-      this.character.updateAnimation(0 /* idle */);
+      this.config.character.updateAnimation(0 /* idle */);
     }
     if (this.anyDirection) {
       this.updateRotation();
     }
     for (let i = 0; i < collisionDetectionSteps; i++) {
       this.updatePosition(
-        this.timeManager.deltaTime,
-        this.timeManager.deltaTime / collisionDetectionSteps,
+        this.config.timeManager.deltaTime,
+        this.config.timeManager.deltaTime / collisionDetectionSteps,
         i
       );
     }
-    if (this.character.position.y < 0) {
+    if (this.config.character.position.y < 0) {
       this.resetPosition();
     }
     this.updateNetworkState();
   }
   getTargetAnimation() {
-    if (!this.character)
+    if (!this.config.character)
       return 0 /* idle */;
     const jumpHeight = this.characterVelocity.y > 0 ? 0.2 : 1.8;
     if (this.currentHeight > jumpHeight && !this.characterOnGround) {
@@ -1487,22 +1472,22 @@ var LocalController = class {
     }
   }
   updateAzimuthalAngle() {
-    const camToModelDistance = this.cameraManager.camera.position.distanceTo(
-      this.character.position
+    const camToModelDistance = this.config.cameraManager.camera.position.distanceTo(
+      this.config.character.position
     );
     const isCameraFirstPerson = camToModelDistance < 2;
     if (isCameraFirstPerson) {
-      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.cameraManager.camera.quaternion);
+      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.config.cameraManager.camera.quaternion);
       this.azimuthalAngle = Math.atan2(cameraForward.x, cameraForward.z);
     } else {
       this.azimuthalAngle = Math.atan2(
-        this.cameraManager.camera.position.x - this.character.position.x,
-        this.cameraManager.camera.position.z - this.character.position.z
+        this.config.cameraManager.camera.position.x - this.config.character.position.x,
+        this.config.cameraManager.camera.position.z - this.config.character.position.z
       );
     }
   }
   computeAngularDifference(rotationQuaternion) {
-    return 2 * Math.acos(Math.abs(this.character.quaternion.dot(rotationQuaternion)));
+    return 2 * Math.acos(Math.abs(this.config.character.quaternion.dot(rotationQuaternion)));
   }
   updateRotation() {
     this.updateRotationOffset();
@@ -1514,8 +1499,8 @@ var LocalController = class {
     const angularDifference = this.computeAngularDifference(rotationQuaternion);
     const desiredTime = 0.07;
     const angularSpeed = angularDifference / desiredTime;
-    const frameRotation = angularSpeed * this.timeManager.deltaTime;
-    this.character.quaternion.rotateTowards(rotationQuaternion, frameRotation);
+    const frameRotation = angularSpeed * this.config.timeManager.deltaTime;
+    this.config.character.quaternion.rotateTowards(rotationQuaternion, frameRotation);
   }
   applyControls(deltaTime) {
     const resistance = this.characterOnGround ? groundResistance : airResistance;
@@ -1567,31 +1552,31 @@ var LocalController = class {
     }
     acceleration.add(controlAcceleration);
     this.characterVelocity.addScaledVector(acceleration, deltaTime);
-    this.character.position.addScaledVector(this.characterVelocity, deltaTime);
+    this.config.character.position.addScaledVector(this.characterVelocity, deltaTime);
   }
   updatePosition(deltaTime, stepDeltaTime, iter) {
     this.applyControls(stepDeltaTime);
     if (iter === 0) {
-      const lastMovement = this.getMovementFromSurfaces(this.character.position, deltaTime);
+      const lastMovement = this.getMovementFromSurfaces(this.config.character.position, deltaTime);
       if (lastMovement) {
-        this.character.position.add(lastMovement.position);
-        const asQuaternion = this.tempQuaternion.setFromEuler(this.character.rotation);
+        this.config.character.position.add(lastMovement.position);
+        const asQuaternion = this.tempQuaternion.setFromEuler(this.config.character.rotation);
         const lastMovementEuler = this.tempEuler.setFromQuaternion(lastMovement.rotation);
         lastMovementEuler.x = 0;
         lastMovementEuler.z = 0;
         lastMovement.rotation.setFromEuler(lastMovementEuler);
         asQuaternion.multiply(lastMovement.rotation);
-        this.character.rotation.setFromQuaternion(asQuaternion);
+        this.config.character.rotation.setFromQuaternion(asQuaternion);
       }
     }
-    this.character.updateMatrixWorld();
+    this.config.character.updateMatrixWorld();
     const avatarSegment = this.tempSegment;
     avatarSegment.copy(this.capsuleInfo.segment);
-    avatarSegment.start.applyMatrix4(this.character.matrixWorld).applyMatrix4(this.tempMatrix);
-    avatarSegment.end.applyMatrix4(this.character.matrixWorld).applyMatrix4(this.tempMatrix);
+    avatarSegment.start.applyMatrix4(this.config.character.matrixWorld).applyMatrix4(this.tempMatrix);
+    avatarSegment.end.applyMatrix4(this.config.character.matrixWorld).applyMatrix4(this.tempMatrix);
     const positionBeforeCollisions = this.tempVector.copy(avatarSegment.start);
-    this.collisionsManager.applyColliders(avatarSegment, this.capsuleInfo.radius);
-    this.character.position.copy(avatarSegment.start);
+    this.config.collisionsManager.applyColliders(avatarSegment, this.capsuleInfo.radius);
+    this.config.character.position.copy(avatarSegment.start);
     const deltaCollisionPosition = avatarSegment.start.sub(positionBeforeCollisions);
     this.characterOnGround = deltaCollisionPosition.y > 0;
     if (this.characterWasOnGround && !this.characterOnGround) {
@@ -1636,7 +1621,7 @@ var LocalController = class {
     }
     newPosition.setY(newPosition.y + 0.05);
     const ray = this.surfaceTempRay.set(newPosition, downVector);
-    const hit = this.collisionsManager.raycastFirst(ray);
+    const hit = this.config.collisionsManager.raycastFirst(ray);
     if (hit && hit[0] < 0.8) {
       const currentCollisionMeshState = hit[2];
       this.lastFrameSurfaceState = [
@@ -1655,53 +1640,61 @@ var LocalController = class {
     return lastMovement;
   }
   updateNetworkState() {
-    const characterQuaternion = this.character.getWorldQuaternion(this.tempQuaternion);
+    const characterQuaternion = this.config.character.getWorldQuaternion(this.tempQuaternion);
     this.networkState = {
-      id: this.id,
+      id: this.config.id,
       position: {
-        x: this.character.position.x,
-        y: this.character.position.y,
-        z: this.character.position.z
+        x: this.config.character.position.x,
+        y: this.config.character.position.y,
+        z: this.config.character.position.z
       },
       rotation: { quaternionY: characterQuaternion.y, quaternionW: characterQuaternion.w },
-      state: this.character.getCurrentAnimation()
+      state: this.config.character.getCurrentAnimation()
     };
   }
   resetPosition() {
     this.characterVelocity.y = 0;
-    this.character.position.y = 3;
+    this.config.character.position.y = 3;
     this.characterOnGround = false;
   }
 };
 
 // src/character/RemoteController.ts
 import { Quaternion as Quaternion3, Vector3 as Vector36 } from "three";
+var tempQuaternion = new Quaternion3();
 var RemoteController = class {
-  constructor(character, id) {
-    this.character = character;
-    this.id = id;
+  constructor(config) {
+    this.config = config;
     this.currentAnimation = 0 /* idle */;
     this.networkState = {
-      id: this.id,
-      position: { x: 0, y: 0, z: 0 },
-      rotation: { quaternionY: 0, quaternionW: 1 },
+      id: this.config.id,
+      position: {
+        x: this.config.character.position.x,
+        y: this.config.character.position.y,
+        z: this.config.character.position.z
+      },
+      rotation: {
+        quaternionY: tempQuaternion.setFromEuler(this.config.character.rotation).y,
+        quaternionW: 1
+      },
       state: this.currentAnimation
     };
   }
   update(clientUpdate, time, deltaTime) {
-    if (!this.character)
+    if (!this.config.character) {
       return;
+    }
     this.updateFromNetwork(clientUpdate);
-    this.character.update(time, deltaTime);
+    this.config.character.update(time, deltaTime);
   }
   updateFromNetwork(clientUpdate) {
     const { position, rotation, state } = clientUpdate;
-    this.character.position.lerp(new Vector36(position.x, position.y, position.z), 0.15);
+    this.config.character.position.lerp(new Vector36(position.x, position.y, position.z), 0.15);
     const rotationQuaternion = new Quaternion3(0, rotation.quaternionY, 0, rotation.quaternionW);
-    this.character.quaternion.slerp(rotationQuaternion, 0.6);
+    this.config.character.quaternion.slerp(rotationQuaternion, 0.6);
     if (state !== this.currentAnimation) {
       this.currentAnimation = state;
-      this.character.updateAnimation(state);
+      this.config.character.updateAnimation(state);
     }
   }
 };
@@ -1732,20 +1725,11 @@ function decodeCharacterAndCamera(hash) {
 
 // src/character/CharacterManager.ts
 var CharacterManager = class {
-  constructor(composer, characterModelLoader, collisionsManager, cameraManager, timeManager, keyInputManager, clientStates, sendUpdate, animationConfig, characterDescription) {
-    this.composer = composer;
-    this.characterModelLoader = characterModelLoader;
-    this.collisionsManager = collisionsManager;
-    this.cameraManager = cameraManager;
-    this.timeManager = timeManager;
-    this.keyInputManager = keyInputManager;
-    this.clientStates = clientStates;
-    this.sendUpdate = sendUpdate;
-    this.animationConfig = animationConfig;
-    this.characterDescription = characterDescription;
+  constructor(config) {
+    this.config = config;
     this.updateLocationHash = true;
     this.headTargetOffset = new Vector38(0, 1.3, 0);
-    this.id = 0;
+    this.localClientId = 0;
     this.remoteCharacters = /* @__PURE__ */ new Map();
     this.remoteCharacterControllers = /* @__PURE__ */ new Map();
     this.localCharacterSpawned = false;
@@ -1753,21 +1737,21 @@ var CharacterManager = class {
     this.speakingCharacters = /* @__PURE__ */ new Map();
     this.group = new Group2();
   }
-  spawnLocalCharacter(characterDescription, id, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
-    var _a;
-    const character = new Character(
+  spawnLocalCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+    const character = new Character({
+      username,
       characterDescription,
-      this.animationConfig,
-      this.characterModelLoader,
-      id,
-      () => {
+      animationConfig: this.config.animationConfig,
+      characterModelLoader: this.config.characterModelLoader,
+      characterId: id,
+      modelLoadedCallback: () => {
       },
-      this.cameraManager,
-      this.composer,
-      true
-    );
+      cameraManager: this.config.cameraManager,
+      composer: this.config.composer,
+      isLocal: true
+    });
     const quaternion = new Quaternion5().setFromEuler(character.rotation);
-    this.sendUpdate({
+    this.config.sendUpdate({
       id,
       position: {
         x: spawnPosition.x,
@@ -1777,41 +1761,40 @@ var CharacterManager = class {
       rotation: { quaternionY: quaternion.y, quaternionW: quaternion.w },
       state: 0 /* idle */
     });
-    this.id = id;
+    this.localClientId = id;
     this.localCharacter = character;
-    this.localController = new LocalController(
-      this.localCharacter,
-      this.id,
-      this.collisionsManager,
-      this.keyInputManager,
-      this.cameraManager,
-      this.timeManager
-    );
+    this.localController = new LocalController({
+      character: this.localCharacter,
+      id: this.localClientId,
+      collisionsManager: this.config.collisionsManager,
+      keyInputManager: this.config.keyInputManager,
+      virtualJoystick: this.config.virtualJoystick,
+      cameraManager: this.config.cameraManager,
+      timeManager: this.config.timeManager
+    });
     this.localCharacter.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
     this.localCharacter.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
-    (_a = character.tooltip) == null ? void 0 : _a.setText(`${id}`, true);
     this.group.add(character);
     this.localCharacterSpawned = true;
   }
-  spawnRemoteCharacter(characterDescription, id, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
-    var _a;
-    const character = new Character(
+  spawnRemoteCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+    const character = new Character({
+      username,
       characterDescription,
-      this.animationConfig,
-      this.characterModelLoader,
-      id,
-      () => {
+      animationConfig: this.config.animationConfig,
+      characterModelLoader: this.config.characterModelLoader,
+      characterId: id,
+      modelLoadedCallback: () => {
       },
-      this.cameraManager,
-      this.composer,
-      false
-    );
+      cameraManager: this.config.cameraManager,
+      composer: this.config.composer,
+      isLocal: false
+    });
     this.remoteCharacters.set(id, character);
-    const remoteController = new RemoteController(character, id);
-    remoteController.character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
-    remoteController.character.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
+    character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
+    character.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
+    const remoteController = new RemoteController({ character, id });
     this.remoteCharacterControllers.set(id, remoteController);
-    (_a = character.tooltip) == null ? void 0 : _a.setText(`${id}`);
     this.group.add(character);
   }
   getLocalCharacterPositionAndRotation() {
@@ -1840,50 +1823,71 @@ var CharacterManager = class {
   setSpeakingCharacter(id, value) {
     this.speakingCharacters.set(id, value);
   }
+  respawnIfPresent(id) {
+    const characterInfo = this.config.characterResolve(id);
+    if (this.localCharacter && this.localClientId == id) {
+      this.localCharacter.updateCharacter(
+        characterInfo.username,
+        characterInfo.characterDescription
+      );
+    }
+    const remoteCharacter = this.remoteCharacters.get(id);
+    if (remoteCharacter) {
+      remoteCharacter.updateCharacter(characterInfo.username, characterInfo.characterDescription);
+    }
+  }
   update() {
     var _a, _b, _c;
     if (this.localCharacter) {
-      this.localCharacter.update(this.timeManager.time, this.timeManager.deltaTime);
-      if (this.speakingCharacters.has(this.id)) {
-        (_a = this.localCharacter.speakingIndicator) == null ? void 0 : _a.setSpeaking(this.speakingCharacters.get(this.id));
+      this.localCharacter.update(this.config.timeManager.time, this.config.timeManager.deltaTime);
+      if (this.speakingCharacters.has(this.localClientId)) {
+        (_a = this.localCharacter.speakingIndicator) == null ? void 0 : _a.setSpeaking(
+          this.speakingCharacters.get(this.localClientId)
+        );
       }
       this.localController.update();
-      if (this.timeManager.frame % 2 === 0) {
-        this.sendUpdate(this.localController.networkState);
+      if (this.config.timeManager.frame % 2 === 0) {
+        this.config.sendUpdate(this.localController.networkState);
       }
       const targetOffset = new Vector38();
       targetOffset.add(this.headTargetOffset).applyQuaternion(this.localCharacter.quaternion).add(this.localCharacter.position);
-      this.cameraManager.setTarget(targetOffset);
-      for (const [id, update] of this.clientStates) {
+      this.config.cameraManager.setTarget(targetOffset);
+      for (const [id, update] of this.config.remoteUserStates) {
         if (this.remoteCharacters.has(id) && this.speakingCharacters.has(id)) {
           const character = this.remoteCharacters.get(id);
           (_b = character == null ? void 0 : character.speakingIndicator) == null ? void 0 : _b.setSpeaking(this.speakingCharacters.get(id));
         }
         const { position } = update;
         if (!this.remoteCharacters.has(id) && this.localCharacterSpawned === true) {
+          const characterInfo = this.config.characterResolve(id);
           this.spawnRemoteCharacter(
-            this.characterDescription,
             id,
+            characterInfo.username,
+            characterInfo.characterDescription,
             new Vector38(position.x, position.y, position.z)
           );
         }
         const characterController = this.remoteCharacterControllers.get(id);
         if (characterController) {
-          characterController.update(update, this.timeManager.time, this.timeManager.deltaTime);
+          characterController.update(
+            update,
+            this.config.timeManager.time,
+            this.config.timeManager.deltaTime
+          );
         }
       }
       for (const [id, character] of this.remoteCharacters) {
-        if (!this.clientStates.has(id)) {
+        if (!this.config.remoteUserStates.has(id)) {
           (_c = character.speakingIndicator) == null ? void 0 : _c.dispose();
           this.group.remove(character);
           this.remoteCharacters.delete(id);
           this.remoteCharacterControllers.delete(id);
         }
       }
-      if (this.updateLocationHash && this.timeManager.frame % 60 === 0) {
+      if (this.updateLocationHash && this.config.timeManager.frame % 60 === 0) {
         window.location.hash = encodeCharacterAndCamera(
           this.localCharacter,
-          this.cameraManager.camera
+          this.config.cameraManager.camera
         );
       }
     }
@@ -1891,32 +1895,7 @@ var CharacterManager = class {
 };
 
 // src/character/CharacterModelLoader.ts
-import { LoadingManager } from "three";
-import { GLTFLoader as ThreeGLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-var CachedGLTFLoader = class extends ThreeGLTFLoader {
-  constructor(manager, debug = false) {
-    super(manager);
-    this.debug = debug;
-    this.blobCache = /* @__PURE__ */ new Map();
-  }
-  setBlobUrl(originalUrl, blobUrl) {
-    this.blobCache.set(originalUrl, blobUrl);
-  }
-  getBlobUrl(originalUrl) {
-    return this.blobCache.get(originalUrl);
-  }
-  load(url, onLoad, onProgress, onError) {
-    const blobUrl = this.getBlobUrl(url);
-    if (blobUrl) {
-      if (this.debug === true) {
-        console.log(`Loading cached ${url.split("/").pop()}`);
-      }
-      super.load(blobUrl, onLoad, onProgress, onError);
-    } else {
-      super.load(url, onLoad, onProgress, onError);
-    }
-  }
-};
+import { ModelLoader as ModelLoader2 } from "@mml-io/model-loader";
 var LRUCache = class {
   constructor(maxSize = 100) {
     this.maxSize = maxSize;
@@ -1941,16 +1920,13 @@ var LRUCache = class {
 var CharacterModelLoader = class {
   constructor(maxCacheSize = 100, debug = false) {
     this.debug = debug;
+    this.modelLoader = new ModelLoader2();
     this.ongoingLoads = /* @__PURE__ */ new Map();
-    this.loadingManager = new LoadingManager();
-    this.gltfLoader = new CachedGLTFLoader(this.loadingManager, this.debug);
     this.modelCache = new LRUCache(maxCacheSize);
   }
   async load(fileUrl, fileType) {
     const cachedModel = this.modelCache.get(fileUrl);
     if (cachedModel) {
-      const blobURL = URL.createObjectURL(cachedModel.blob);
-      this.gltfLoader.setBlobUrl(fileUrl, blobURL);
       return this.loadFromUrl(fileUrl, fileType, cachedModel.originalExtension);
     } else {
       if (this.debug === true) {
@@ -1978,26 +1954,21 @@ var CharacterModelLoader = class {
   }
   async loadFromUrl(url, fileType, extension) {
     if (["gltf", "glb"].includes(extension)) {
-      return new Promise((resolve, reject) => {
-        this.gltfLoader.load(
+      return new Promise(async (resolve, reject) => {
+        const modelLoadResult = await this.modelLoader.load(
           url,
-          (object) => {
-            if (fileType === "model") {
-              resolve(object.scene);
-            } else if (fileType === "animation") {
-              resolve(object.animations[0]);
-            } else {
-              const error = `Trying to load unknown ${fileType} type of element from file ${url}`;
-              console.error(error);
-              reject(error);
-            }
-          },
-          void 0,
-          (error) => {
-            console.error(`Error loading GL(B|TF) from ${url}: ${error}`);
-            reject(error);
+          (loaded, total) => {
           }
         );
+        if (fileType === "model") {
+          resolve(modelLoadResult.group);
+        } else if (fileType === "animation") {
+          resolve(modelLoadResult.animations[0]);
+        } else {
+          const error = `Trying to load unknown ${fileType} type of element from file ${url}`;
+          console.error(error);
+          reject(error);
+        }
       });
     } else {
       console.error(`Error: can't recognize ${url} extension: ${extension}`);
@@ -2011,17 +1982,9 @@ var KeyInputManager = class {
     this.shouldCaptureKeyPress = shouldCaptureKeyPress;
     this.keys = /* @__PURE__ */ new Map();
     this.eventHandlerCollection = new EventHandlerCollection();
-    this.directionJoystick = null;
     this.eventHandlerCollection.add(document, "keydown", this.onKeyDown.bind(this));
     this.eventHandlerCollection.add(document, "keyup", this.onKeyUp.bind(this));
     this.eventHandlerCollection.add(window, "blur", this.handleUnfocus.bind(this));
-    this.directionJoystick = new VirtualJoystick({
-      radius: 70,
-      inner_radius: 20,
-      x: 70,
-      y: 0,
-      mouse_support: false
-    });
   }
   handleUnfocus(_event) {
     this.keys.clear();
@@ -2045,19 +2008,19 @@ var KeyInputManager = class {
     return this.keys.get(key) || false;
   }
   isMovementKeyPressed() {
-    return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key)) || this.directionJoystick.hasDirection;
+    return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
   }
   get forward() {
-    return this.isKeyPressed("w" /* W */) || this.directionJoystick.up;
+    return this.isKeyPressed("w" /* W */);
   }
   get backward() {
-    return this.isKeyPressed("s" /* S */) || this.directionJoystick.down;
+    return this.isKeyPressed("s" /* S */);
   }
   get left() {
-    return this.isKeyPressed("a" /* A */) || this.directionJoystick.left;
+    return this.isKeyPressed("a" /* A */);
   }
   get right() {
-    return this.isKeyPressed("d" /* D */) || this.directionJoystick.right;
+    return this.isKeyPressed("d" /* D */);
   }
   get run() {
     return this.isKeyPressed("shift" /* SHIFT */);
@@ -2085,40 +2048,35 @@ import {
 } from "mml-web";
 import { Group as Group3 } from "three";
 var MMLCompositionScene = class {
-  constructor(targetElement, renderer, scene, camera, audioListener, collisionsManager, getUserPositionAndRotation) {
-    this.renderer = renderer;
-    this.scene = scene;
-    this.camera = camera;
-    this.audioListener = audioListener;
-    this.collisionsManager = collisionsManager;
-    this.getUserPositionAndRotation = getUserPositionAndRotation;
+  constructor(config) {
+    this.config = config;
     this.chatProbes = /* @__PURE__ */ new Set();
     this.group = new Group3();
-    this.promptManager = PromptManager.init(targetElement);
+    this.promptManager = PromptManager.init(this.config.targetElement);
     const { interactionListener, interactionManager } = InteractionManager.init(
-      targetElement,
-      this.camera,
-      this.scene
+      this.config.targetElement,
+      this.config.camera,
+      this.config.scene
     );
     this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.loadingProgressManager = new LoadingProgressManager();
     this.mmlScene = {
-      getAudioListener: () => this.audioListener,
-      getRenderer: () => this.renderer,
-      getThreeScene: () => this.scene,
+      getAudioListener: () => this.config.audioListener,
+      getRenderer: () => this.config.renderer,
+      getThreeScene: () => this.config.scene,
       getRootContainer: () => this.group,
-      getCamera: () => this.camera,
+      getCamera: () => this.config.camera,
       addCollider: (object, mElement) => {
-        this.collisionsManager.addMeshesGroup(object, mElement);
+        this.config.collisionsManager.addMeshesGroup(object, mElement);
       },
       updateCollider: (object) => {
-        this.collisionsManager.updateMeshesGroup(object);
+        this.config.collisionsManager.updateMeshesGroup(object);
       },
       removeCollider: (object) => {
-        this.collisionsManager.removeMeshesGroup(object);
+        this.config.collisionsManager.removeMeshesGroup(object);
       },
-      getUserPositionAndRotation: this.getUserPositionAndRotation,
+      getUserPositionAndRotation: this.config.getUserPositionAndRotation,
       addInteraction: (interaction) => {
         this.interactionListener.addInteraction(interaction);
       },
@@ -2143,7 +2101,7 @@ var MMLCompositionScene = class {
         return this.loadingProgressManager;
       }
     };
-    this.clickTrigger = MMLClickTrigger.init(targetElement, this.mmlScene);
+    this.clickTrigger = MMLClickTrigger.init(this.config.targetElement, this.mmlScene);
   }
   onChatMessage(message) {
     for (const chatProbe of this.chatProbes) {
@@ -2214,7 +2172,7 @@ var sunValues = {
     sunAzimuthalAngle: 214.5,
     sunPolarAngle: -41.5
   },
-  sunIntensity: 1,
+  sunIntensity: 2,
   sunColor: { r: 1, g: 1, b: 1 }
 };
 var sunOptions = {
@@ -2226,7 +2184,7 @@ var sunOptions = {
 };
 var envValues = {
   ambientLight: {
-    ambientLightIntensity: 0.05,
+    ambientLightIntensity: 0.1,
     ambientLightColor: { r: 1, g: 1, b: 1 }
   },
   fog: {
@@ -2742,6 +2700,10 @@ var SSAOFolder = class {
         case "enabled":
           if (e.value === true) {
             composer.addPass(n8aopass, this.postProcessingSSAOIndex + 2);
+            composer.passes[this.postProcessingSSAOIndex + 2].setSize(
+              window.innerWidth,
+              window.innerHeight
+            );
           } else {
             composer.removePass(n8aopass);
           }
@@ -2942,16 +2904,26 @@ var tweakPaneStyle = `
 
 // src/tweakpane/TweakPane.ts
 var TweakPane = class {
-  constructor(renderer, scene, composer) {
+  constructor(holderElement, renderer, scene, composer) {
+    this.holderElement = holderElement;
     this.renderer = renderer;
     this.scene = scene;
     this.composer = composer;
     this.saveVisibilityInLocalStorage = true;
     this.guiVisible = false;
-    const appWrapper = document.getElementById("app");
     const tweakPaneWrapper = document.createElement("div");
-    tweakPaneWrapper.id = "tweakpane-panel";
-    appWrapper.appendChild(tweakPaneWrapper);
+    tweakPaneWrapper.style.position = "fixed";
+    tweakPaneWrapper.style.width = "400px";
+    tweakPaneWrapper.style.height = "100%";
+    tweakPaneWrapper.style.top = "0px";
+    tweakPaneWrapper.style.right = "calc(-50vw)";
+    tweakPaneWrapper.style.zIndex = "99";
+    tweakPaneWrapper.style.overflow = "auto";
+    tweakPaneWrapper.style.backgroundColor = "rgba(0, 0, 0, 0.66)";
+    tweakPaneWrapper.style.paddingLeft = "5px";
+    tweakPaneWrapper.style.boxShadow = "-7px 0px 12px rgba(0, 0, 0, 0.5)";
+    tweakPaneWrapper.style.transition = "right cubic-bezier(0.83, 0, 0.17, 1) 0.7s";
+    holderElement.appendChild(tweakPaneWrapper);
     this.gui = new Pane({ container: tweakPaneWrapper });
     this.gui.registerPlugin(EssentialsPlugin);
     if (this.saveVisibilityInLocalStorage) {
@@ -3077,6 +3049,7 @@ var TweakPane = class {
 };
 
 // src/rendering/composer.ts
+import { HDRJPGLoader } from "@monogrid/gainmap-js";
 import {
   EffectComposer as EffectComposer2,
   RenderPass,
@@ -3100,12 +3073,13 @@ import {
   Fog as Fog2,
   HalfFloatType as HalfFloatType2,
   LinearSRGBColorSpace,
-  LoadingManager as LoadingManager2,
+  LoadingManager,
   PMREMGenerator,
   SRGBColorSpace,
   Scene as Scene4,
   Vector2 as Vector27,
-  WebGLRenderer as WebGLRenderer4
+  WebGLRenderer as WebGLRenderer4,
+  EquirectangularReflectionMapping
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
@@ -3135,7 +3109,7 @@ var Sun = class extends Group4 {
     if (this.debug === true) {
       this.camHelper = new CameraHelper(this.shadowCamera);
     }
-    this.directionalLight = new DirectionalLight(16777215, 0.5);
+    this.directionalLight = new DirectionalLight(16777215);
     this.directionalLight.intensity = sunValues.sunIntensity;
     this.directionalLight.shadow.normalBias = 0.01;
     this.directionalLight.shadow.radius = 0.02;
@@ -4840,11 +4814,30 @@ var Composer = class {
     this.effectComposer.render();
     this.renderer.render(this.postPostScene, this.camera);
   }
+  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.background = envMap;
+        this.scene.backgroundIntensity = rendererValues.bgIntensity;
+        this.isEnvHDRI = true;
+        hdrJpgEquirectangularMap.dispose();
+        pmremGenerator.dispose();
+      }
+      hdrJpg.dispose();
+    });
+  }
   useHDRI(url, fromFile = false) {
     if (this.isEnvHDRI && fromFile === false || !this.renderer)
       return;
     const pmremGenerator = new PMREMGenerator(this.renderer);
-    new RGBELoader(new LoadingManager2()).load(
+    new RGBELoader(new LoadingManager()).load(
       url,
       (texture) => {
         const envMap = pmremGenerator.fromEquirectangular(texture).texture;
@@ -4870,7 +4863,7 @@ var Composer = class {
       return;
     const fileInput = document.createElement("input");
     fileInput.type = "file";
-    fileInput.accept = ".hdr";
+    fileInput.accept = ".hdr,.jpg";
     fileInput.addEventListener("change", () => {
       var _a;
       const file = (_a = fileInput.files) == null ? void 0 : _a[0];
@@ -4878,9 +4871,16 @@ var Composer = class {
         console.log("no file");
         return;
       }
+      const extension = file.name.split(".").pop();
       const fileURL = URL.createObjectURL(file);
       if (fileURL) {
-        this.useHDRI(fileURL, true);
+        if (extension === "hdr") {
+          this.useHDRI(fileURL, true);
+        } else if (extension === "jpg") {
+          this.useHDRJPG(fileURL);
+        } else {
+          console.error(`Unrecognized extension for HDR file ${file.name}`);
+        }
         URL.revokeObjectURL(fileURL);
         document.body.removeChild(fileInput);
       }
@@ -5195,6 +5195,200 @@ var CollisionsManager = class {
     this.collisionTrigger.setCurrentCollisions(reportedCollidingElements);
   }
 };
+
+// src/ground-plane/GroundPlane.ts
+import {
+  CanvasTexture,
+  CircleGeometry as CircleGeometry2,
+  FrontSide as FrontSide2,
+  Group as Group6,
+  LinearMipMapLinearFilter,
+  Mesh as Mesh6,
+  MeshStandardMaterial as MeshStandardMaterial3,
+  NearestFilter as NearestFilter2,
+  RepeatWrapping as RepeatWrapping2
+} from "three";
+var canvas = document.createElement("canvas");
+canvas.width = 2;
+canvas.height = 2;
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "#C0C0C0";
+ctx.fillRect(0, 0, 2, 2);
+ctx.fillStyle = "#808080";
+ctx.fillRect(0, 0, 1, 1);
+ctx.fillRect(1, 1, 1, 1);
+var GroundPlane = class extends Group6 {
+  constructor() {
+    super();
+    this.floorSize = 210;
+    this.floorTexture = null;
+    this.floorGeometry = new CircleGeometry2(this.floorSize, this.floorSize);
+    this.floorMesh = null;
+    this.floorMaterial = new MeshStandardMaterial3({
+      color: 16777215,
+      side: FrontSide2,
+      metalness: 0.05,
+      roughness: 0.95
+    });
+    this.floorMesh = new Mesh6(this.floorGeometry, this.floorMaterial);
+    this.floorMesh.receiveShadow = true;
+    this.floorMesh.rotation.x = Math.PI * -0.5;
+    this.add(this.floorMesh);
+    this.floorTexture = new CanvasTexture(canvas);
+    this.floorTexture.wrapS = RepeatWrapping2;
+    this.floorTexture.wrapT = RepeatWrapping2;
+    this.floorTexture.magFilter = NearestFilter2;
+    this.floorTexture.minFilter = LinearMipMapLinearFilter;
+    this.floorTexture.repeat.set(this.floorSize / 1.5, this.floorSize / 1.5);
+    this.floorMaterial.map = this.floorTexture;
+    this.floorMaterial.needsUpdate = true;
+  }
+};
+
+// src/loading-screen/LoadingScreen.ts
+import { LoadingProgressManager as LoadingProgressManager2 } from "mml-web";
+var LoadingScreen = class {
+  constructor(loadingProgressManager) {
+    this.loadingProgressManager = loadingProgressManager;
+    this.hasCompleted = false;
+    this.element = document.createElement("div");
+    this.element.style.position = "absolute";
+    this.element.style.top = "0";
+    this.element.style.left = "0";
+    this.element.style.width = "100%";
+    this.element.style.height = "100%";
+    this.element.style.background = "linear-gradient(45deg, #28284B 0%, #303056 100%)";
+    this.element.style.color = "white";
+    this.element.addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
+    this.element.addEventListener("mousedown", (event) => {
+      event.stopPropagation();
+    });
+    this.element.addEventListener("mousemove", (event) => {
+      event.stopPropagation();
+    });
+    this.element.addEventListener("mouseup", (event) => {
+      event.stopPropagation();
+    });
+    this.loadingBannerText = document.createElement("div");
+    this.loadingBannerText.textContent = "Loading...";
+    this.loadingBannerText.style.position = "absolute";
+    this.loadingBannerText.style.display = "flex";
+    this.loadingBannerText.style.top = "0";
+    this.loadingBannerText.style.left = "0";
+    this.loadingBannerText.style.width = "100%";
+    this.loadingBannerText.style.height = "100%";
+    this.loadingBannerText.style.color = "white";
+    this.loadingBannerText.style.fontSize = "80px";
+    this.loadingBannerText.style.fontWeight = "bold";
+    this.loadingBannerText.style.fontFamily = "sans-serif";
+    this.loadingBannerText.style.alignItems = "center";
+    this.loadingBannerText.style.justifyContent = "center";
+    this.element.append(this.loadingBannerText);
+    this.progressDebugViewHolder = document.createElement("div");
+    this.progressDebugViewHolder.style.display = "flex";
+    this.progressDebugViewHolder.style.position = "absolute";
+    this.progressDebugViewHolder.style.maxHeight = "calc(100% - 74px)";
+    this.progressDebugViewHolder.style.left = "0";
+    this.progressDebugViewHolder.style.bottom = "74px";
+    this.progressDebugViewHolder.style.width = "100%";
+    this.progressDebugViewHolder.style.justifyContent = "center";
+    this.element.append(this.progressDebugViewHolder);
+    this.progressDebugView = document.createElement("div");
+    this.progressDebugView.style.backgroundColor = "rgba(128, 128, 128, 0.25)";
+    this.progressDebugView.style.border = "1px solid black";
+    this.progressDebugView.style.maxWidth = "100%";
+    this.progressDebugView.style.overflow = "auto";
+    this.progressDebugViewHolder.append(this.progressDebugView);
+    this.debugCheckbox = document.createElement("input");
+    this.debugCheckbox.type = "checkbox";
+    this.debugCheckbox.checked = false;
+    this.debugCheckbox.addEventListener("change", () => {
+      this.progressDebugElement.style.display = this.debugCheckbox.checked ? "block" : "none";
+      if (this.hasCompleted) {
+        this.dispose();
+      }
+    });
+    this.debugLabel = document.createElement("label");
+    this.debugLabel.textContent = "Debug loading";
+    this.debugLabel.style.fontFamily = "sans-serif";
+    this.debugLabel.style.padding = "5px";
+    this.debugLabel.style.display = "inline-block";
+    this.debugLabel.style.userSelect = "none";
+    this.debugLabel.append(this.debugCheckbox);
+    this.progressDebugView.append(this.debugLabel);
+    this.progressDebugElement = document.createElement("pre");
+    this.progressDebugElement.style.margin = "0";
+    this.progressDebugElement.style.display = this.debugCheckbox.checked ? "block" : "none";
+    this.progressDebugView.append(this.progressDebugElement);
+    this.progressBarHolder = document.createElement("div");
+    this.progressBarHolder.style.display = "flex";
+    this.progressBarHolder.style.alignItems = "center";
+    this.progressBarHolder.style.justifyContent = "center";
+    this.progressBarHolder.style.position = "absolute";
+    this.progressBarHolder.style.bottom = "20px";
+    this.progressBarHolder.style.left = "0";
+    this.progressBarHolder.style.width = "100%";
+    this.element.append(this.progressBarHolder);
+    this.progressBarBackground = document.createElement("div");
+    this.progressBarBackground.style.position = "relative";
+    this.progressBarBackground.style.width = "500px";
+    this.progressBarBackground.style.maxWidth = "80%";
+    this.progressBarBackground.style.backgroundColor = "gray";
+    this.progressBarBackground.style.height = "50px";
+    this.progressBarBackground.style.lineHeight = "50px";
+    this.progressBarBackground.style.borderRadius = "25px";
+    this.progressBarBackground.style.border = "2px solid white";
+    this.progressBarBackground.style.overflow = "hidden";
+    this.progressBarHolder.append(this.progressBarBackground);
+    this.progressBar = document.createElement("div");
+    this.progressBar.style.position = "absolute";
+    this.progressBar.style.top = "0";
+    this.progressBar.style.left = "0";
+    this.progressBar.style.width = "0";
+    this.progressBar.style.height = "100%";
+    this.progressBar.style.backgroundColor = "#0050a4";
+    this.progressBarBackground.append(this.progressBar);
+    this.loadingStatusText = document.createElement("div");
+    this.loadingStatusText.style.position = "absolute";
+    this.loadingStatusText.style.top = "0";
+    this.loadingStatusText.style.left = "0";
+    this.loadingStatusText.style.width = "100%";
+    this.loadingStatusText.style.height = "100%";
+    this.loadingStatusText.style.color = "white";
+    this.loadingStatusText.style.textAlign = "center";
+    this.loadingStatusText.style.verticalAlign = "middle";
+    this.loadingStatusText.style.fontFamily = "sans-serif";
+    this.loadingStatusText.style.fontWeight = "bold";
+    this.loadingStatusText.textContent = "Loading...";
+    this.progressBarBackground.append(this.loadingStatusText);
+    this.loadingCallback = () => {
+      const [loadingRatio, completedLoading] = this.loadingProgressManager.toRatio();
+      if (completedLoading) {
+        if (!this.hasCompleted) {
+          this.hasCompleted = true;
+          if (!this.debugCheckbox.checked) {
+            this.dispose();
+          }
+        }
+        this.loadingStatusText.textContent = "Completed";
+        this.progressBar.style.width = "100%";
+      } else {
+        this.loadingStatusText.textContent = `Loading... ${(loadingRatio * 100).toFixed(2)}%`;
+        this.progressBar.style.width = `${loadingRatio * 100}%`;
+      }
+      this.progressDebugElement.textContent = LoadingProgressManager2.LoadingProgressSummaryToString(
+        this.loadingProgressManager.toSummary()
+      );
+    };
+    this.loadingProgressManager.addProgressCallback(this.loadingCallback);
+  }
+  dispose() {
+    this.loadingProgressManager.removeProgressCallback(this.loadingCallback);
+    this.element.remove();
+  }
+};
 export {
   AnimationState,
   CameraManager,
@@ -5202,11 +5396,14 @@ export {
   CharacterModelLoader,
   CollisionsManager,
   Composer,
+  GroundPlane,
   KeyInputManager,
+  LoadingScreen,
   MMLCompositionScene,
   Sun,
   TimeManager,
   TweakPane,
+  VirtualJoystick,
   clamp,
   decodeCharacterAndCamera,
   ease,