@mml-io/3d-web-client-core 0.8.0 → 0.10.0

package/build/index.js

@@ -34,13 +34,51 @@ var round = (n, digits) => {
 var ease = (target, n, factor) => {
   return round((target - n) * factor, 5);
 };
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
 var remap = (value, minValue, maxValue, minScaledValue, maxScaledValue) => {
   return minScaledValue + (maxScaledValue - minScaledValue) * (value - minValue) / (maxValue - minValue);
 };
 
+// src/input/EventHandlerCollection.ts
+var EventHandlerCollection = class _EventHandlerCollection {
+  constructor() {
+    this.eventsByTarget = /* @__PURE__ */ new Map();
+  }
+  add(target, key, listener, options) {
+    target.addEventListener(key, listener, options);
+    let existingTarget = this.eventsByTarget.get(target);
+    if (existingTarget === void 0) {
+      existingTarget = /* @__PURE__ */ new Map();
+      this.eventsByTarget.set(target, existingTarget);
+    }
+    let existingKey = existingTarget.get(key);
+    if (existingKey === void 0) {
+      existingKey = /* @__PURE__ */ new Set();
+      existingTarget.set(key, existingKey);
+    }
+    existingKey.add(listener);
+    return this;
+  }
+  clear() {
+    this.eventsByTarget.forEach((keyMap, target) => {
+      keyMap.forEach((listenerSet, key) => {
+        listenerSet.forEach((listenerFunc) => {
+          target.removeEventListener(key, listenerFunc);
+        });
+      });
+    });
+    this.eventsByTarget.clear();
+  }
+  static create(initial) {
+    const instance = new _EventHandlerCollection();
+    if (initial !== void 0) {
+      initial.forEach(([target, key, listenerFunc, options]) => {
+        instance.add(target, key, listenerFunc, options);
+      });
+    }
+    return instance;
+  }
+};
+
 // src/tweakpane/tweakPaneActivity.ts
 var isTweakpaneActive = false;
 function setTweakpaneActive(status) {
@@ -52,7 +90,7 @@ function getTweakpaneActive() {
 
 // src/camera/CameraManager.ts
 var CameraManager = class {
-  constructor(collisionsManager) {
+  constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
     this.collisionsManager = collisionsManager;
     this.initialDistance = 3.3;
     this.minDistance = 0.1;
@@ -68,42 +106,43 @@ var CameraManager = class {
     this.targetDistance = this.initialDistance;
     this.distance = this.initialDistance;
     this.desiredDistance = this.initialDistance;
-    this.targetPhi = Math.PI / 2;
-    this.phi = Math.PI / 2;
-    this.targetTheta = -Math.PI / 2;
-    this.theta = -Math.PI / 2;
     this.dragging = false;
     this.target = new Vector32(0, 1.55, 0);
     this.hadTarget = false;
+    this.isLerping = false;
+    this.finalTarget = new Vector32();
+    this.lerpTarget = new Vector32();
+    this.lerpFactor = 0;
+    this.lerpDuration = 2.1;
+    this.phi = initialPhi;
+    this.targetPhi = initialPhi;
+    this.theta = initialTheta;
+    this.targetTheta = initialTheta;
     this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
     this.camera.position.set(0, 1.4, -this.initialDistance);
     this.rayCaster = new Raycaster();
-    document.addEventListener("mousedown", this.onMouseDown.bind(this));
-    document.addEventListener("mouseup", this.onMouseUp.bind(this));
-    document.addEventListener("mousemove", this.onMouseMove.bind(this));
-    document.addEventListener("wheel", this.onMouseWheel.bind(this));
-    window.addEventListener("resize", this.onResize.bind(this));
-  }
-  onResize() {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    this.camera.aspect = width / height;
-    this.camera.updateProjectionMatrix();
-  }
-  onMouseDown(_event) {
+    this.eventHandlerCollection = EventHandlerCollection.create([
+      [targetElement, "mousedown", this.onMouseDown.bind(this)],
+      [document, "mouseup", this.onMouseUp.bind(this)],
+      [document, "mousemove", this.onMouseMove.bind(this)],
+      [targetElement, "wheel", this.onMouseWheel.bind(this)]
+    ]);
+  }
+  onMouseDown() {
     this.dragging = true;
   }
   onMouseUp(_event) {
     this.dragging = false;
   }
   onMouseMove(event) {
-    if (!this.dragging || getTweakpaneActive() === true)
+    if (!this.dragging || getTweakpaneActive())
       return;
     if (this.targetTheta === null || this.targetPhi === null)
       return;
     this.targetTheta += event.movementX * 0.01;
     this.targetPhi -= event.movementY * 0.01;
     this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
+    event.preventDefault();
   }
   onMouseWheel(event) {
     const scrollAmount = event.deltaY * 1e-3;
@@ -113,14 +152,27 @@ var CameraManager = class {
       Math.min(this.maxDistance, this.targetDistance)
     );
     this.desiredDistance = this.targetDistance;
+    event.preventDefault();
   }
   setTarget(target) {
-    this.target.copy(target);
+    if (!this.isLerping) {
+      this.target.copy(target);
+    } else {
+      this.finalTarget.copy(target);
+      this.lerpTarget.copy(this.target);
+      this.lerpFactor = 0;
+    }
     if (!this.hadTarget) {
       this.hadTarget = true;
       this.reverseUpdateFromPositions();
     }
   }
+  setLerpedTarget(target, targetDistance) {
+    this.isLerping = true;
+    this.targetDistance = targetDistance;
+    this.desiredDistance = targetDistance;
+    this.setTarget(target);
+  }
   reverseUpdateFromPositions() {
     if (this.phi === null || this.theta == null)
       return;
@@ -148,9 +200,23 @@ var CameraManager = class {
       this.targetDistance += (this.desiredDistance - this.targetDistance) * this.dampingFactor * 4;
     }
   }
+  dispose() {
+    this.eventHandlerCollection.clear();
+  }
+  easeOutExpo(x) {
+    return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
+  }
+  updateAspect(aspect) {
+    this.camera.aspect = aspect;
+  }
   update() {
-    if (this.target === null)
-      return;
+    if (this.isLerping && this.lerpFactor < 1) {
+      this.lerpFactor += 0.01 / this.lerpDuration;
+      this.lerpFactor = Math.min(1, this.lerpFactor);
+      this.target.lerpVectors(this.lerpTarget, this.finalTarget, this.easeOutExpo(this.lerpFactor));
+    } else {
+      this.adjustCameraPosition();
+    }
     if (this.phi !== null && this.targetPhi !== null && this.theta !== null && this.targetTheta !== null) {
       this.distance += (this.targetDistance - this.distance) * this.dampingFactor * 0.21;
       this.phi += (this.targetPhi - this.phi) * this.dampingFactor;
@@ -165,13 +231,14 @@ var CameraManager = class {
         this.minFOV,
         this.maxFOV
       );
-      this.fov += ease(this.targetFOV, this.fov, 0.07);
+      this.fov += (this.targetFOV - this.fov) * this.dampingFactor;
       this.camera.fov = this.fov;
       this.camera.updateProjectionMatrix();
-      this.camera.updateMatrixWorld();
-      this.camera.position.set(x, clamp(y, 0.1, Infinity), z);
-      this.adjustCameraPosition();
+      this.camera.position.set(x, y, z);
       this.camera.lookAt(this.target);
+      if (this.isLerping && this.lerpFactor >= 1) {
+        this.isLerping = false;
+      }
     }
   }
 };
@@ -181,11 +248,11 @@ import { Color as Color3, Vector3 as Vector35 } from "three";
 
 // src/character/CharacterModel.ts
 import {
-  AnimationClip as AnimationClip2,
+  AnimationClip,
   AnimationMixer,
   LoopRepeat,
   MeshStandardMaterial,
-  Object3D as Object3D2
+  Object3D
 } from "three";
 
 // src/character/CharacterMaterial.ts
@@ -560,126 +627,11 @@ var AnimationState = /* @__PURE__ */ ((AnimationState2) => {
   return AnimationState2;
 })(AnimationState || {});
 
-// src/character/ModelLoader.ts
-import { LoadingManager } from "three";
-import { GLTFLoader as ThreeGLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-var CachedGLTFLoader = class extends ThreeGLTFLoader {
-  constructor(manager) {
-    super(manager);
-    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) {
-      console.log(`Loading cached ${url.split("/").pop()}`);
-      super.load(blobUrl, onLoad, onProgress, onError);
-    } else {
-      super.load(url, onLoad, onProgress, onError);
-    }
-  }
-};
-var LRUCache = class {
-  constructor(maxSize = 100) {
-    this.maxSize = maxSize;
-    this.cache = /* @__PURE__ */ new Map();
-  }
-  get(key) {
-    const item = this.cache.get(key);
-    if (item) {
-      this.cache.delete(key);
-      this.cache.set(key, item);
-    }
-    return item;
-  }
-  set(key, value) {
-    if (this.cache.size >= this.maxSize) {
-      const oldestKey = this.cache.keys().next().value;
-      this.cache.delete(oldestKey);
-    }
-    this.cache.set(key, value);
-  }
-};
-var _ModelLoader = class _ModelLoader {
-  constructor(maxCacheSize = 100) {
-    this.ongoingLoads = /* @__PURE__ */ new Map();
-    this.loadingManager = new LoadingManager();
-    this.gltfLoader = new CachedGLTFLoader(this.loadingManager);
-    this.modelCache = new LRUCache(maxCacheSize);
-  }
-  /* TODO: decide between below lazy initialization or eager on this file's bottom export */
-  static getInstance() {
-    if (!_ModelLoader.instance) {
-      _ModelLoader.instance = new _ModelLoader();
-    }
-    return _ModelLoader.instance;
-  }
-  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 {
-      console.log(`Loading ${fileUrl} from server`);
-      const ongoingLoad = this.ongoingLoads.get(fileUrl);
-      if (ongoingLoad)
-        return ongoingLoad;
-      const loadPromise = fetch(fileUrl).then((response) => response.blob()).then((blob) => {
-        const originalExtension = fileUrl.split(".").pop() || "";
-        this.modelCache.set(fileUrl, { blob, originalExtension });
-        const blobURL = URL.createObjectURL(blob);
-        this.ongoingLoads.delete(fileUrl);
-        return this.loadFromUrl(blobURL, fileType, originalExtension);
-      });
-      this.ongoingLoads.set(fileUrl, loadPromise);
-      return loadPromise;
-    }
-  }
-  async loadFromUrl(url, fileType, extension) {
-    if (["gltf", "glb"].includes(extension)) {
-      return new Promise((resolve, reject) => {
-        this.gltfLoader.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);
-          }
-        );
-      });
-    } else {
-      console.error(`Error: can't recognize ${url} extension: ${extension}`);
-    }
-  }
-};
-_ModelLoader.instance = null;
-var ModelLoader = _ModelLoader;
-var MODEL_LOADER = ModelLoader.getInstance();
-var ModelLoader_default = MODEL_LOADER;
-
 // src/character/CharacterModel.ts
 var CharacterModel = class {
-  constructor(characterDescription) {
+  constructor(characterDescription, characterModelLoader) {
     this.characterDescription = characterDescription;
-    /* TODO: pick between below eager instantiation or ModelLoader.getInstance() lazy one */
-    this.modelLoader = ModelLoader_default;
+    this.characterModelLoader = characterModelLoader;
     this.mesh = null;
     this.material = new CharacterMaterial();
     this.headBone = null;
@@ -757,9 +709,9 @@ var CharacterModel = class {
     const scale = this.characterDescription.modelScale;
     const extension = mainMeshUrl.split(".").pop();
     const name = mainMeshUrl.split("/").pop().replace(`.${extension}`, "");
-    const mainMesh = await this.modelLoader.load(mainMeshUrl, "model");
+    const mainMesh = await this.characterModelLoader.load(mainMeshUrl, "model");
     if (typeof mainMesh !== "undefined") {
-      this.mesh = new Object3D2();
+      this.mesh = new Object3D();
       const model = mainMesh;
       model.position.set(0, -0.4, 0);
       this.mesh.add(model);
@@ -771,8 +723,8 @@ var CharacterModel = class {
   async setAnimationFromFile(animationFileUrl, animationType) {
     return new Promise(async (resolve, reject) => {
       this.initAnimationMixer();
-      const animation = await this.modelLoader.load(animationFileUrl, "animation");
-      if (typeof animation !== "undefined" && animation instanceof AnimationClip2) {
+      const animation = await this.characterModelLoader.load(animationFileUrl, "animation");
+      if (typeof animation !== "undefined" && animation instanceof AnimationClip) {
         this.animations[animationType] = this.animationMixer.clipAction(animation);
         this.animations[animationType].stop();
         if (animationType === 0 /* idle */) {
@@ -1304,7 +1256,6 @@ var LocalController = class {
         this.characterVelocity.y = deltaTime * this.gravity;
       }
     } else if (this.jump && this.coyoteTime) {
-      console.log("coyoteJump");
       this.characterVelocity.y = this.jumpForce;
       this.canJump = false;
     } else {
@@ -1394,8 +1345,9 @@ var LocalController = class {
 
 // src/character/Character.ts
 var Character = class {
-  constructor(characterDescription, id, isLocal, modelLoadedCallback, collisionsManager, keyInputManager, cameraManager, timeManager, composer) {
+  constructor(characterDescription, characterModelLoader, id, isLocal, modelLoadedCallback, collisionsManager, keyInputManager, cameraManager, timeManager, composer) {
     this.characterDescription = characterDescription;
+    this.characterModelLoader = characterModelLoader;
     this.id = id;
     this.isLocal = isLocal;
     this.modelLoadedCallback = modelLoadedCallback;
@@ -1414,7 +1366,7 @@ var Character = class {
     this.load();
   }
   async load() {
-    this.model = new CharacterModel(this.characterDescription);
+    this.model = new CharacterModel(this.characterDescription, this.characterModelLoader);
     await this.model.init();
     if (this.tooltip === null) {
       this.tooltip = new CharacterTooltip(this.model.mesh);
@@ -1461,22 +1413,22 @@ var Character = class {
 };
 
 // src/character/CharacterManager.ts
-import { Group, Vector3 as Vector37 } from "three";
+import { Euler, Group, Quaternion as Quaternion4, Vector3 as Vector37 } from "three";
 
 // src/character/RemoteController.ts
 import {
   AnimationMixer as AnimationMixer2,
-  Object3D as Object3D5,
+  Object3D as Object3D4,
   Quaternion as Quaternion3,
   Vector3 as Vector36
 } from "three";
 var RemoteController = class {
-  constructor(character, id) {
+  constructor(character, characterModelLoader, id) {
     this.character = character;
+    this.characterModelLoader = characterModelLoader;
     this.id = id;
-    this.modelLoader = ModelLoader_default;
     this.characterModel = null;
-    this.animationMixer = new AnimationMixer2(new Object3D5());
+    this.animationMixer = new AnimationMixer2(new Object3D4());
     this.animations = /* @__PURE__ */ new Map();
     this.currentAnimation = 0 /* idle */;
     this.characterModel = this.character.model.mesh;
@@ -1497,7 +1449,7 @@ var RemoteController = class {
     this.animationMixer.update(deltaTime);
   }
   async setAnimationFromFile(animationType, fileName) {
-    const animation = await this.modelLoader.load(fileName, "animation");
+    const animation = await this.characterModelLoader.load(fileName, "animation");
     const animationAction = this.animationMixer.clipAction(animation);
     this.animations.set(animationType, animationAction);
     if (animationType === 0 /* idle */) {
@@ -1550,8 +1502,9 @@ function decodeCharacterAndCamera(hash, character, camera) {
   camera.quaternion.fromArray(values.slice(10, 14));
 }
 var CharacterManager = class {
-  constructor(composer, collisionsManager, cameraManager, timeManager, inputManager, clientStates, sendUpdate) {
+  constructor(composer, characterModelLoader, collisionsManager, cameraManager, timeManager, inputManager, clientStates, sendUpdate) {
     this.composer = composer;
+    this.characterModelLoader = characterModelLoader;
     this.collisionsManager = collisionsManager;
     this.cameraManager = cameraManager;
     this.timeManager = timeManager;
@@ -1581,11 +1534,12 @@ var CharacterManager = class {
       the mesh loading async (would allow us to show a nameplate where a remote
       user is before the asset loads).
   */
-  spawnCharacter(characterDescription, id, isLocal = false, spawnPosition = new Vector37()) {
+  spawnCharacter(characterDescription, id, isLocal = false, spawnPosition = new Vector37(), spawnRotation = new Euler()) {
     this.characterDescription = characterDescription;
     const characterLoadingPromise = new Promise((resolve) => {
       const character = new Character(
         characterDescription,
+        this.characterModelLoader,
         id,
         isLocal,
         () => {
@@ -1597,9 +1551,12 @@ var CharacterManager = class {
               this.cameraManager.camera
             );
           } else {
-            spawnPosition = getSpawnPositionInsideCircle(3, 30, id, 0.4);
+            spawnPosition = spawnPosition || getSpawnPositionInsideCircle(3, 30, id, 0.4);
             character.model.mesh.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
+            character.model.mesh.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
+            character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
             character.model.mesh.updateMatrixWorld();
+            const quaternion = new Quaternion4().setFromEuler(character.model.mesh.rotation);
             this.sendUpdate({
               id,
               position: {
@@ -1607,7 +1564,7 @@ var CharacterManager = class {
                 y: spawnPosition.y,
                 z: spawnPosition.z
               },
-              rotation: { quaternionY: 0, quaternionW: 1 },
+              rotation: { quaternionY: quaternion.y, quaternionW: quaternion.w },
               state: 0 /* idle */
             });
           }
@@ -1624,7 +1581,7 @@ var CharacterManager = class {
             (_e = this.character.tooltip) == null ? void 0 : _e.setText(`${id}`);
           } else {
             this.remoteCharacters.set(id, character);
-            const remoteController = new RemoteController(character, id);
+            const remoteController = new RemoteController(character, this.characterModelLoader, id);
             remoteController.setAnimationFromFile(
               0 /* idle */,
               characterDescription.idleAnimationFileUrl
@@ -1747,19 +1704,143 @@ 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) {
+    super(manager);
+    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) {
+      console.log(`Loading cached ${url.split("/").pop()}`);
+      super.load(blobUrl, onLoad, onProgress, onError);
+    } else {
+      super.load(url, onLoad, onProgress, onError);
+    }
+  }
+};
+var LRUCache = class {
+  constructor(maxSize = 100) {
+    this.maxSize = maxSize;
+    this.cache = /* @__PURE__ */ new Map();
+  }
+  get(key) {
+    const item = this.cache.get(key);
+    if (item) {
+      this.cache.delete(key);
+      this.cache.set(key, item);
+    }
+    return item;
+  }
+  set(key, value) {
+    if (this.cache.size >= this.maxSize) {
+      const oldestKey = this.cache.keys().next().value;
+      this.cache.delete(oldestKey);
+    }
+    this.cache.set(key, value);
+  }
+};
+var _CharacterModelLoader = class _CharacterModelLoader {
+  constructor(maxCacheSize = 100) {
+    this.ongoingLoads = /* @__PURE__ */ new Map();
+    this.loadingManager = new LoadingManager();
+    this.gltfLoader = new CachedGLTFLoader(this.loadingManager);
+    this.modelCache = new LRUCache(maxCacheSize);
+  }
+  /* TODO: decide between below lazy initialization or eager on this file's bottom export */
+  static getInstance() {
+    if (!_CharacterModelLoader.instance) {
+      _CharacterModelLoader.instance = new _CharacterModelLoader();
+    }
+    return _CharacterModelLoader.instance;
+  }
+  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 {
+      console.log(`Loading ${fileUrl} from server`);
+      const ongoingLoad = this.ongoingLoads.get(fileUrl);
+      if (ongoingLoad)
+        return ongoingLoad;
+      const loadPromise = fetch(fileUrl).then((response) => response.blob()).then((blob) => {
+        const originalExtension = fileUrl.split(".").pop() || "";
+        this.modelCache.set(fileUrl, { blob, originalExtension });
+        const blobURL = URL.createObjectURL(blob);
+        this.ongoingLoads.delete(fileUrl);
+        return this.loadFromUrl(blobURL, fileType, originalExtension);
+      });
+      this.ongoingLoads.set(fileUrl, loadPromise);
+      return loadPromise;
+    }
+  }
+  async loadFromUrl(url, fileType, extension) {
+    if (["gltf", "glb"].includes(extension)) {
+      return new Promise((resolve, reject) => {
+        this.gltfLoader.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);
+          }
+        );
+      });
+    } else {
+      console.error(`Error: can't recognize ${url} extension: ${extension}`);
+    }
+  }
+};
+_CharacterModelLoader.instance = null;
+var CharacterModelLoader = _CharacterModelLoader;
+var MODEL_LOADER = CharacterModelLoader.getInstance();
+
 // src/input/KeyInputManager.ts
 var KeyInputManager = class {
-  constructor() {
+  constructor(shouldCaptureKeyPress = () => true) {
+    this.shouldCaptureKeyPress = shouldCaptureKeyPress;
     this.keys = /* @__PURE__ */ new Map();
-    document.addEventListener("keydown", this.onKeyDown.bind(this));
-    document.addEventListener("keyup", this.onKeyUp.bind(this));
-    window.addEventListener("blur", this.handleUnfocus.bind(this));
+    this.eventHandlerCollection = new EventHandlerCollection();
+    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));
   }
   handleUnfocus(_event) {
     this.keys.clear();
   }
   onKeyDown(event) {
-    this.keys.set(event.key.toLowerCase(), true);
+    if (this.shouldCaptureKeyPress()) {
+      if (event.key.length === 2 && event.key[0] === "F") {
+        return;
+      }
+      if (event.metaKey) {
+        return;
+      }
+      this.keys.set(event.key.toLowerCase(), true);
+      event.preventDefault();
+    }
   }
   onKeyUp(event) {
     this.keys.set(event.key.toLowerCase(), false);
@@ -1768,36 +1849,34 @@ var KeyInputManager = class {
     return this.keys.get(key) || false;
   }
   isMovementKeyPressed() {
-    return ["w", "a", "s", "d"].some((key) => this.isKeyPressed(key));
+    return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
   }
   get forward() {
-    return this.isKeyPressed("w");
+    return this.isKeyPressed("w" /* W */);
   }
   get backward() {
-    return this.isKeyPressed("s");
+    return this.isKeyPressed("s" /* S */);
   }
   get left() {
-    return this.isKeyPressed("a");
+    return this.isKeyPressed("a" /* A */);
   }
   get right() {
-    return this.isKeyPressed("d");
+    return this.isKeyPressed("d" /* D */);
   }
   get run() {
-    return this.isKeyPressed("shift");
+    return this.isKeyPressed("shift" /* SHIFT */);
   }
   get jump() {
-    return this.isKeyPressed(" ");
+    return this.isKeyPressed(" " /* SPACE */);
   }
   get anyDirection() {
     return this.isMovementKeyPressed();
   }
   get conflictingDirection() {
-    return this.isKeyPressed("w") && this.isKeyPressed("s") || this.isKeyPressed("a") && this.isKeyPressed("d");
+    return this.isKeyPressed("w" /* W */) && this.isKeyPressed("s" /* S */) || this.isKeyPressed("a" /* A */) && this.isKeyPressed("d" /* D */);
   }
   dispose() {
-    document.removeEventListener("keydown", this.onKeyDown.bind(this));
-    document.removeEventListener("keyup", this.onKeyDown.bind(this));
-    window.removeEventListener("blur", this.handleUnfocus.bind(this));
+    this.eventHandlerCollection.clear();
   }
 };
 
@@ -1805,23 +1884,26 @@ var KeyInputManager = class {
 import {
   InteractionManager,
   MMLClickTrigger,
-  PromptManager,
-  registerCustomElementsToWindow,
-  setGlobalMScene
+  PromptManager
 } from "mml-web";
 import { Group as Group2 } from "three";
 var MMLCompositionScene = class {
-  constructor(renderer, scene, camera, audioListener, collisionsManager, getUserPositionAndRotation, documentAddresses) {
+  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;
-    this.debug = false;
+    this.chatProbes = /* @__PURE__ */ new Set();
     this.group = new Group2();
-    this.promptManager = PromptManager.init(document.body);
-    const { interactionListener } = InteractionManager.init(document.body, this.camera, this.scene);
+    this.promptManager = PromptManager.init(targetElement);
+    const { interactionListener, interactionManager } = InteractionManager.init(
+      targetElement,
+      this.camera,
+      this.scene
+    );
+    this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.mmlScene = {
       getAudioListener: () => this.audioListener,
@@ -1848,59 +1930,82 @@ var MMLCompositionScene = class {
       removeInteraction: (interaction) => {
         this.interactionListener.removeInteraction(interaction);
       },
+      addChatProbe: (chatProbe) => {
+        this.chatProbes.add(chatProbe);
+      },
+      updateChatProbe: () => {
+      },
+      removeChatProbe: (chatProbe) => {
+        this.chatProbes.delete(chatProbe);
+      },
       prompt: (promptProps, callback) => {
         this.promptManager.prompt(promptProps, callback);
       }
     };
-    setGlobalMScene(this.mmlScene);
-    registerCustomElementsToWindow(window);
-    this.clickTrigger = MMLClickTrigger.init(document, this.mmlScene);
-    if (this.debug) {
-      console.log(this.clickTrigger);
-    }
-    for (const address of documentAddresses) {
-      const frameElement = document.createElement("m-frame");
-      frameElement.setAttribute("src", address);
-      document.body.appendChild(frameElement);
+    this.clickTrigger = MMLClickTrigger.init(targetElement, this.mmlScene);
+  }
+  onChatMessage(message) {
+    for (const chatProbe of this.chatProbes) {
+      chatProbe.trigger(message);
     }
   }
+  dispose() {
+    this.promptManager.dispose();
+    this.clickTrigger.dispose();
+    this.interactionManager.dispose();
+  }
 };
 
-// src/rendering/composer.ts
-import { N8AOPostPass } from "n8ao";
-import {
-  EffectComposer as EffectComposer2,
-  RenderPass,
-  EffectPass as EffectPass2,
-  FXAAEffect,
-  ShaderPass,
-  BloomEffect,
-  SSAOEffect as SSAOEffect2,
-  BlendFunction as BlendFunction2,
-  TextureEffect,
-  ToneMappingEffect,
-  SMAAEffect,
-  SMAAPreset,
-  EdgeDetectionMode,
-  PredicationMode,
-  NormalPass as NormalPass2
-} from "postprocessing";
-import {
-  AmbientLight,
-  Color as Color6,
-  Fog,
-  HalfFloatType,
-  LinearSRGBColorSpace,
-  LoadingManager as LoadingManager2,
-  PMREMGenerator,
-  Scene as Scene3,
-  Vector2 as Vector22,
-  WebGLRenderer as WebGLRenderer2
-} from "three";
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
+// src/tweakpane/TweakPane.ts
+import * as EssentialsPlugin from "@tweakpane/plugin-essentials";
+import { Pane } from "tweakpane";
 
-// src/sun/Sun.ts
-import { CameraHelper, Color as Color4, DirectionalLight, Group as Group3, OrthographicCamera, Vector3 as Vector38 } from "three";
+// src/tweakpane/blades/bcsFolder.ts
+var bcsValues = {
+  brightness: 0,
+  contrast: 1.25,
+  saturation: 1
+};
+var bcsOptions = {
+  brightness: {
+    amount: { min: -1, max: 1, step: 0.01 }
+  },
+  contrast: {
+    amount: { min: 0, max: 2, step: 0.01 }
+  },
+  saturation: {
+    amount: { min: 0, max: 2, step: 0.01 }
+  }
+};
+var BrightnessContrastSaturationFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.folder = parentFolder.addFolder({
+      title: "brightness / contrast / sat",
+      expanded: expand
+    });
+    this.folder.addBinding(bcsValues, "brightness", bcsOptions.brightness.amount);
+    this.folder.addBinding(bcsValues, "contrast", bcsOptions.contrast.amount);
+    this.folder.addBinding(bcsValues, "saturation", bcsOptions.saturation.amount);
+  }
+  setupChangeEvent(brightnessContrastSaturation) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "brightness":
+          brightnessContrastSaturation.uniforms.brightness.value = e.value;
+          break;
+        case "contrast":
+          brightnessContrastSaturation.uniforms.contrast.value = e.value;
+          break;
+        case "saturation":
+          brightnessContrastSaturation.uniforms.saturation.value = e.value;
+          break;
+      }
+    });
+  }
+};
 
 // src/tweakpane/blades/environmentFolder.ts
 var sunValues = {
@@ -2057,135 +2162,6 @@ var EnvironmentFolder = class {
   }
 };
 
-// src/sun/Sun.ts
-var Sun = class extends Group3 {
-  constructor() {
-    super();
-    this.debug = false;
-    this.sunOffset = new Vector38(
-      39 * (Math.PI / 180),
-      50 * (Math.PI / 180),
-      100
-    );
-    this.shadowResolution = 8192;
-    this.shadowCamFrustum = 50;
-    this.camHelper = null;
-    this.target = null;
-    this.shadowCamera = new OrthographicCamera(
-      -this.shadowCamFrustum,
-      this.shadowCamFrustum,
-      this.shadowCamFrustum,
-      -this.shadowCamFrustum,
-      0.1,
-      200
-    );
-    if (this.debug === true) {
-      this.camHelper = new CameraHelper(this.shadowCamera);
-    }
-    this.directionalLight = new DirectionalLight(16777215, 0.5);
-    this.directionalLight.shadow.normalBias = 0.05;
-    this.directionalLight.shadow.radius = 1.5;
-    this.directionalLight.shadow.camera = this.shadowCamera;
-    this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
-    this.directionalLight.castShadow = true;
-    this.setColor();
-    this.updateCharacterPosition(new Vector38(0, 0, 0));
-    this.add(this.directionalLight);
-    if (this.debug === true && this.camHelper instanceof CameraHelper) {
-      this.add(this.camHelper);
-    }
-  }
-  updateCharacterPosition(position) {
-    if (!position)
-      return;
-    this.target = position;
-    this.setSunPosition(this.sunOffset.x, this.sunOffset.y);
-  }
-  setAzimuthalAngle(angle) {
-    if (this.sunOffset)
-      this.sunOffset.x = angle;
-    if (this.target)
-      this.updateCharacterPosition(this.target);
-  }
-  setPolarAngle(angle) {
-    if (this.sunOffset)
-      this.sunOffset.y = angle;
-    if (this.target)
-      this.updateCharacterPosition(this.target);
-  }
-  setIntensity(intensity) {
-    this.directionalLight.intensity = intensity;
-  }
-  setColor() {
-    this.directionalLight.color = new Color4().setRGB(
-      sunValues.sunColor.r,
-      sunValues.sunColor.g,
-      sunValues.sunColor.b
-    );
-  }
-  setSunPosition(azimuthalAngle, polarAngle) {
-    if (!this.target)
-      return;
-    const distance = this.sunOffset.z;
-    const sphericalPosition = new Vector38(
-      distance * Math.sin(polarAngle) * Math.cos(azimuthalAngle),
-      distance * Math.cos(polarAngle),
-      distance * Math.sin(polarAngle) * Math.sin(azimuthalAngle)
-    );
-    const newSunPosition = this.target.clone().add(sphericalPosition);
-    this.directionalLight.position.set(newSunPosition.x, newSunPosition.y, newSunPosition.z);
-    this.directionalLight.target.position.copy(this.target.clone());
-    this.directionalLight.target.updateMatrixWorld();
-  }
-};
-
-// src/tweakpane/blades/bcsFolder.ts
-var bcsValues = {
-  brightness: 0,
-  contrast: 1.25,
-  saturation: 1
-};
-var bcsOptions = {
-  brightness: {
-    amount: { min: -1, max: 1, step: 0.01 }
-  },
-  contrast: {
-    amount: { min: 0, max: 2, step: 0.01 }
-  },
-  saturation: {
-    amount: { min: 0, max: 2, step: 0.01 }
-  }
-};
-var BrightnessContrastSaturationFolder = class {
-  constructor(parentFolder, expand = false) {
-    this.folder = parentFolder.addFolder({
-      title: "brightness / contrast / sat",
-      expanded: expand
-    });
-    this.folder.addBinding(bcsValues, "brightness", bcsOptions.brightness.amount);
-    this.folder.addBinding(bcsValues, "contrast", bcsOptions.contrast.amount);
-    this.folder.addBinding(bcsValues, "saturation", bcsOptions.saturation.amount);
-  }
-  setupChangeEvent(brightnessContrastSaturation) {
-    this.folder.on("change", (e) => {
-      const target = e.target.key;
-      if (!target)
-        return;
-      switch (target) {
-        case "brightness":
-          brightnessContrastSaturation.uniforms.brightness.value = e.value;
-          break;
-        case "contrast":
-          brightnessContrastSaturation.uniforms.contrast.value = e.value;
-          break;
-        case "saturation":
-          brightnessContrastSaturation.uniforms.saturation.value = e.value;
-          break;
-      }
-    });
-  }
-};
-
 // src/tweakpane/blades/postExtrasFolder.ts
 var extrasValues = {
   grain: 0.055,
@@ -2310,9 +2286,52 @@ var RendererFolder = class {
   }
 };
 
+// src/tweakpane/blades/rendererStatsFolder.ts
+var RendererStatsFolder = class {
+  constructor(parentFolder, expanded = true) {
+    this.statsData = {
+      triangles: "0",
+      geometries: "0",
+      textures: "0",
+      shaders: "0",
+      postPasses: "0",
+      drawCalls: "0",
+      rawDeltaTime: "0",
+      deltaTime: "0",
+      FPS: "0"
+    };
+    this.folder = parentFolder.addFolder({ title: "renderStats", expanded });
+    this.performance = this.folder.addFolder({ title: "performance", expanded: true });
+    this.defails = this.folder.addFolder({ title: "pipeline details", expanded: false });
+    this.folder.addBlade({ view: "separator" });
+    this.performance.addBinding(this.statsData, "FPS", { readonly: true });
+    this.performance.addBinding(this.statsData, "deltaTime", { readonly: true });
+    this.performance.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
+    this.defails.addBinding(this.statsData, "triangles", { readonly: true });
+    this.defails.addBinding(this.statsData, "geometries", { readonly: true });
+    this.defails.addBinding(this.statsData, "textures", { readonly: true });
+    this.defails.addBinding(this.statsData, "shaders", { readonly: true });
+    this.defails.addBinding(this.statsData, "postPasses", { readonly: true });
+    this.defails.addBinding(this.statsData, "drawCalls", { readonly: true });
+  }
+  update(renderer, composer, timeManager) {
+    const { geometries, textures } = renderer.info.memory;
+    const { triangles, calls } = renderer.info.render;
+    this.statsData.triangles = triangles.toString();
+    this.statsData.geometries = geometries.toString();
+    this.statsData.textures = textures.toString();
+    this.statsData.shaders = renderer.info.programs.length.toString();
+    this.statsData.postPasses = composer.passes.length.toString();
+    this.statsData.drawCalls = calls.toString();
+    this.statsData.rawDeltaTime = (Math.round(timeManager.rawDeltaTime * 1e5) / 1e5).toString();
+    this.statsData.deltaTime = (Math.round(timeManager.deltaTime * 1e5) / 1e5).toString();
+    this.statsData.FPS = timeManager.fps.toString();
+  }
+};
+
 // src/tweakpane/blades/ssaoFolder.ts
 import { BlendFunction } from "postprocessing";
-import { Color as Color5 } from "three";
+import { Color as Color4 } from "three";
 var ppssaoValues = {
   enabled: false,
   blendFunction: BlendFunction.MULTIPLY,
@@ -2504,7 +2523,7 @@ var SSAOFolder = class {
         }
         case "color": {
           const value = e.value;
-          ppssaoEffect.color = new Color5().setRGB(value.r, value.g, value.b);
+          ppssaoEffect.color = new Color4().setRGB(value.r, value.g, value.b);
           break;
         }
         default: {
@@ -2544,7 +2563,7 @@ var SSAOFolder = class {
           break;
         case "color":
           const value = e.value;
-          n8aopass.configuration.color = new Color5().setRGB(value.r, value.g, value.b);
+          n8aopass.configuration.color = new Color4().setRGB(value.r, value.g, value.b);
           break;
         default:
           break;
@@ -2637,53 +2656,6 @@ var ToneMappingFolder = class {
   }
 };
 
-// src/tweakpane/TweakPane.ts
-import * as EssentialsPlugin from "@tweakpane/plugin-essentials";
-import { Pane } from "tweakpane";
-
-// src/tweakpane/blades/rendererStatsFolder.ts
-var RendererStatsFolder = class {
-  constructor(parentFolder, expanded = true) {
-    this.statsData = {
-      triangles: "0",
-      geometries: "0",
-      textures: "0",
-      shaders: "0",
-      postPasses: "0",
-      drawCalls: "0",
-      rawDeltaTime: "0",
-      deltaTime: "0",
-      FPS: "0"
-    };
-    this.folder = parentFolder.addFolder({ title: "renderStats", expanded });
-    this.performance = this.folder.addFolder({ title: "performance", expanded: true });
-    this.defails = this.folder.addFolder({ title: "pipeline details", expanded: false });
-    this.folder.addBlade({ view: "separator" });
-    this.performance.addBinding(this.statsData, "FPS", { readonly: true });
-    this.performance.addBinding(this.statsData, "deltaTime", { readonly: true });
-    this.performance.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
-    this.defails.addBinding(this.statsData, "triangles", { readonly: true });
-    this.defails.addBinding(this.statsData, "geometries", { readonly: true });
-    this.defails.addBinding(this.statsData, "textures", { readonly: true });
-    this.defails.addBinding(this.statsData, "shaders", { readonly: true });
-    this.defails.addBinding(this.statsData, "postPasses", { readonly: true });
-    this.defails.addBinding(this.statsData, "drawCalls", { readonly: true });
-  }
-  update(renderer, composer, timeManager) {
-    const { geometries, textures } = renderer.info.memory;
-    const { triangles, calls } = renderer.info.render;
-    this.statsData.triangles = triangles.toString();
-    this.statsData.geometries = geometries.toString();
-    this.statsData.textures = textures.toString();
-    this.statsData.shaders = renderer.info.programs.length.toString();
-    this.statsData.postPasses = composer.passes.length.toString();
-    this.statsData.drawCalls = calls.toString();
-    this.statsData.rawDeltaTime = (Math.round(timeManager.rawDeltaTime * 1e5) / 1e5).toString();
-    this.statsData.deltaTime = (Math.round(timeManager.deltaTime * 1e5) / 1e5).toString();
-    this.statsData.FPS = timeManager.fps.toString();
-  }
-};
-
 // src/tweakpane/tweakPaneStyle.ts
 var tweakPaneStyle = `
 :root {
@@ -2882,6 +2854,122 @@ var TweakPane = class {
   }
 };
 
+// src/rendering/composer.ts
+import { N8AOPostPass } from "n8ao";
+import {
+  EffectComposer as EffectComposer2,
+  RenderPass,
+  EffectPass as EffectPass2,
+  FXAAEffect,
+  ShaderPass,
+  BloomEffect,
+  SSAOEffect as SSAOEffect2,
+  BlendFunction as BlendFunction2,
+  TextureEffect,
+  ToneMappingEffect,
+  SMAAEffect,
+  SMAAPreset,
+  EdgeDetectionMode,
+  PredicationMode,
+  NormalPass as NormalPass2
+} from "postprocessing";
+import {
+  AmbientLight,
+  Color as Color6,
+  Fog,
+  HalfFloatType,
+  LinearSRGBColorSpace,
+  LoadingManager as LoadingManager2,
+  PMREMGenerator,
+  Scene as Scene3,
+  Vector2 as Vector22,
+  WebGLRenderer as WebGLRenderer2
+} from "three";
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
+
+// src/sun/Sun.ts
+import { CameraHelper, Color as Color5, DirectionalLight, Group as Group3, OrthographicCamera, Vector3 as Vector38 } from "three";
+var Sun = class extends Group3 {
+  constructor() {
+    super();
+    this.debug = false;
+    this.sunOffset = new Vector38(
+      39 * (Math.PI / 180),
+      50 * (Math.PI / 180),
+      100
+    );
+    this.shadowResolution = 8192;
+    this.shadowCamFrustum = 50;
+    this.camHelper = null;
+    this.target = null;
+    this.shadowCamera = new OrthographicCamera(
+      -this.shadowCamFrustum,
+      this.shadowCamFrustum,
+      this.shadowCamFrustum,
+      -this.shadowCamFrustum,
+      0.1,
+      200
+    );
+    if (this.debug === true) {
+      this.camHelper = new CameraHelper(this.shadowCamera);
+    }
+    this.directionalLight = new DirectionalLight(16777215, 0.5);
+    this.directionalLight.shadow.normalBias = 0.05;
+    this.directionalLight.shadow.radius = 1.5;
+    this.directionalLight.shadow.camera = this.shadowCamera;
+    this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
+    this.directionalLight.castShadow = true;
+    this.setColor();
+    this.updateCharacterPosition(new Vector38(0, 0, 0));
+    this.add(this.directionalLight);
+    if (this.debug === true && this.camHelper instanceof CameraHelper) {
+      this.add(this.camHelper);
+    }
+  }
+  updateCharacterPosition(position) {
+    if (!position)
+      return;
+    this.target = position;
+    this.setSunPosition(this.sunOffset.x, this.sunOffset.y);
+  }
+  setAzimuthalAngle(angle) {
+    if (this.sunOffset)
+      this.sunOffset.x = angle;
+    if (this.target)
+      this.updateCharacterPosition(this.target);
+  }
+  setPolarAngle(angle) {
+    if (this.sunOffset)
+      this.sunOffset.y = angle;
+    if (this.target)
+      this.updateCharacterPosition(this.target);
+  }
+  setIntensity(intensity) {
+    this.directionalLight.intensity = intensity;
+  }
+  setColor() {
+    this.directionalLight.color = new Color5().setRGB(
+      sunValues.sunColor.r,
+      sunValues.sunColor.g,
+      sunValues.sunColor.b
+    );
+  }
+  setSunPosition(azimuthalAngle, polarAngle) {
+    if (!this.target)
+      return;
+    const distance = this.sunOffset.z;
+    const sphericalPosition = new Vector38(
+      distance * Math.sin(polarAngle) * Math.cos(azimuthalAngle),
+      distance * Math.cos(polarAngle),
+      distance * Math.sin(polarAngle) * Math.sin(azimuthalAngle)
+    );
+    const newSunPosition = this.target.clone().add(sphericalPosition);
+    this.directionalLight.position.set(newSunPosition.x, newSunPosition.y, newSunPosition.z);
+    this.directionalLight.target.position.copy(this.target.clone());
+    this.directionalLight.target.updateMatrixWorld();
+  }
+};
+
 // src/rendering/post-effects/bright-contrast-sat.ts
 import { ShaderMaterial, Uniform } from "three";
 
@@ -3029,8 +3117,8 @@ var GaussGrainEffect = new ShaderMaterial2({
 // src/rendering/composer.ts
 var Composer = class {
   constructor(scene, camera, spawnSun = false) {
-    this.width = window.innerWidth;
-    this.height = window.innerHeight;
+    this.width = 1;
+    this.height = 1;
     this.resolution = new Vector22(this.width, this.height);
     this.isEnvHDRI = false;
     this.bcs = BrightnessContrastSaturation;
@@ -3055,11 +3143,9 @@ var Composer = class {
     this.renderer.toneMappingExposure = rendererValues.exposure;
     this.setAmbientLight();
     this.setFog();
-    document.body.appendChild(this.renderer.domElement);
-    this.composer = new EffectComposer2(this.renderer, {
+    this.effectComposer = new EffectComposer2(this.renderer, {
       frameBufferType: HalfFloatType
     });
-    this.tweakPane = new TweakPane(this.renderer, this.scene, this.composer);
     this.renderPass = new RenderPass(this.scene, this.camera);
     this.normalPass = new NormalPass2(this.scene, this.camera);
     this.normalPass.enabled = ppssaoValues.enabled;
@@ -3128,26 +3214,33 @@ var Composer = class {
     this.bcs.uniforms.saturation.value = bcsValues.saturation;
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
     this.smaaPass = new EffectPass2(this.camera, this.smaaEffect);
-    this.composer.addPass(this.renderPass);
+    this.effectComposer.addPass(this.renderPass);
     if (ppssaoValues.enabled) {
-      this.composer.addPass(this.normalPass);
-      this.composer.addPass(this.ppssaoPass);
+      this.effectComposer.addPass(this.normalPass);
+      this.effectComposer.addPass(this.ppssaoPass);
     }
     if (n8ssaoValues.enabled) {
-      this.composer.addPass(this.n8aopass);
-    }
-    this.composer.addPass(this.fxaaPass);
-    this.composer.addPass(this.smaaPass);
-    this.composer.addPass(this.bloomPass);
-    this.composer.addPass(this.toneMappingPass);
-    this.composer.addPass(this.bcsPass);
-    this.composer.addPass(this.gaussGrainPass);
+      this.effectComposer.addPass(this.n8aopass);
+    }
+    this.effectComposer.addPass(this.fxaaPass);
+    this.effectComposer.addPass(this.smaaPass);
+    this.effectComposer.addPass(this.bloomPass);
+    this.effectComposer.addPass(this.toneMappingPass);
+    this.effectComposer.addPass(this.bcsPass);
+    this.effectComposer.addPass(this.gaussGrainPass);
     if (this.spawnSun === true) {
       this.sun = new Sun();
       this.scene.add(this.sun);
     }
-    this.tweakPane.setupRenderPane(
-      this.composer,
+    this.resizeListener = () => {
+      this.fitContainer();
+    };
+    window.addEventListener("resize", this.resizeListener, false);
+    this.fitContainer();
+  }
+  setupTweakPane(tweakPane) {
+    tweakPane.setupRenderPane(
+      this.effectComposer,
       this.normalPass,
       this.ppssaoEffect,
       this.ppssaoPass,
@@ -3163,14 +3256,32 @@ var Composer = class {
       this.setAmbientLight.bind(this),
       this.setFog.bind(this)
     );
-    window.addEventListener("resize", () => this.updateProjection());
-    this.updateProjection();
   }
-  updateProjection() {
-    this.width = window.innerWidth;
-    this.height = innerHeight;
-    this.resolution = new Vector22(this.width, this.height);
-    this.composer.setSize(this.width, this.height);
+  dispose() {
+    window.removeEventListener("resize", this.resizeListener);
+  }
+  fitContainer() {
+    if (!this) {
+      console.error("Composer not initialized");
+      return;
+    }
+    const parentElement = this.renderer.domElement.parentNode;
+    if (!parentElement) {
+      return;
+    }
+    this.width = parentElement.clientWidth;
+    this.height = parentElement.clientHeight;
+    this.camera.aspect = this.width / this.height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.resolution.set(
+      this.width * window.devicePixelRatio,
+      this.height * window.devicePixelRatio
+    );
+    this.effectComposer.setSize(
+      this.width / window.devicePixelRatio,
+      this.height / window.devicePixelRatio
+    );
     this.renderPass.setSize(this.width, this.height);
     if (ppssaoValues.enabled) {
       this.normalPass.setSize(this.width, this.height);
@@ -3187,20 +3298,14 @@ var Composer = class {
     this.gaussGrainPass.setSize(this.width, this.height);
     this.renderer.setSize(this.width, this.height);
   }
-  isTweakPaneVisible() {
-    return this.tweakPane.guiVisible;
-  }
   render(timeManager) {
     this.renderer.info.reset();
     this.normalPass.texture.needsUpdate = true;
     this.gaussGrainEffect.uniforms.resolution.value = this.resolution;
     this.gaussGrainEffect.uniforms.time.value = timeManager.time;
     this.gaussGrainEffect.uniforms.alpha.value = 1;
-    this.composer.render();
+    this.effectComposer.render();
     this.renderer.render(this.postPostScene, this.camera);
-    if (this.tweakPane.guiVisible) {
-      this.tweakPane.updateStats(timeManager);
-    }
   }
   useHDRI(url, fromFile = false) {
     if (this.isEnvHDRI && fromFile === false || !this.renderer)
@@ -3332,7 +3437,7 @@ import {
   Box3,
   Color as Color7,
   DoubleSide,
-  Euler,
+  Euler as Euler2,
   Group as Group4,
   Line3 as Line32,
   Matrix4 as Matrix42,
@@ -3354,7 +3459,7 @@ var CollisionsManager = class {
     this.tempMatrix = new Matrix42();
     this.tempMatrix2 = new Matrix42();
     this.tempBox = new Box3();
-    this.tempEuler = new Euler();
+    this.tempEuler = new Euler2();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
@@ -3547,11 +3652,13 @@ export {
   AnimationState,
   CameraManager,
   CharacterManager,
+  CharacterModelLoader,
   CollisionsManager,
   Composer,
   KeyInputManager,
   MMLCompositionScene,
   Sun,
-  TimeManager
+  TimeManager,
+  TweakPane
 };
 //# sourceMappingURL=index.js.map