@mml-io/3d-web-client-core 0.0.0-experimental-19bc481-20241121 → 0.0.0-experimental-b74fd73-20250121

package/build/camera/CameraManager.d.ts

@@ -5,6 +5,9 @@ export declare class CameraManager {
     private targetElement;
     private collisionsManager;
     readonly camera: PerspectiveCamera;
+    private flyCamera;
+    private orbitControls;
+    private isMainCameraActive;
     initialDistance: number;
     minDistance: number;
     maxDistance: number;
@@ -37,6 +40,8 @@ export declare class CameraManager {
     private lerpDuration;
     private activePointers;
     constructor(targetElement: HTMLElement, collisionsManager: CollisionsManager, initialPhi?: number, initialTheta?: number);
+    private createEventHandlers;
+    private disposeEventHandlers;
     private preventDefaultAndStopPropagation;
     setupTweakPane(tweakPane: TweakPane): void;
     private onPointerDown;
@@ -54,6 +59,8 @@ export declare class CameraManager {
     private easeOutExpo;
     updateAspect(aspect: number): void;
     recomputeFoV(immediately?: boolean): void;
+    toggleFlyCamera(): void;
+    get activeCamera(): PerspectiveCamera;
     update(): void;
     hasActiveInput(): boolean;
 }

package/build/character/CharacterManager.d.ts

@@ -1,4 +1,4 @@
-import { PositionAndRotation } from "mml-web";
+import { PositionAndRotation } from "@mml-io/mml-web";
 import { Euler, Group, Vector3 } from "three";
 import { CameraManager } from "../camera/CameraManager";
 import { CollisionsManager } from "../collisions/CollisionsManager";

package/build/collisions/CollisionsManager.d.ts

@@ -1,4 +1,4 @@
-import { MElement } from "mml-web";
+import { MElement } from "@mml-io/mml-web";
 import { Group, Line3, Matrix4, Ray, Scene, Vector3 } from "three";
 import { MeshBVH } from "three-mesh-bvh";
 export type CollisionMeshState = {

package/build/collisions/getRelativePositionAndRotationRelativeToObject.d.ts

@@ -0,0 +1,3 @@
+import { PositionAndRotation } from "@mml-io/mml-web";
+import { Object3D } from "three";
+export declare function getRelativePositionAndRotationRelativeToObject(positionAndRotation: PositionAndRotation, container: Object3D): PositionAndRotation;

package/build/index.d.ts

@@ -5,7 +5,7 @@ export * from "./character/url-position";
 export * from "./helpers/math-helpers";
 export { CharacterModelLoader } from "./character/CharacterModelLoader";
 export { CharacterState, AnimationState } from "./character/CharacterState";
-export { KeyInputManager } from "./input/KeyInputManager";
+export { Key, KeyInputManager } from "./input/KeyInputManager";
 export { VirtualJoystick } from "./input/VirtualJoystick";
 export { MMLCompositionScene } from "./mml/MMLCompositionScene";
 export { TweakPane } from "./tweakpane/TweakPane";

package/build/index.js

@@ -1,5 +1,6 @@
 // src/camera/CameraManager.ts
 import { PerspectiveCamera, Raycaster, Vector3 as Vector32 } from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 // src/helpers/math-helpers.ts
 import { Quaternion, Vector3, Vector4 } from "three";
@@ -218,6 +219,7 @@ var CameraManager = class {
   constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
     this.targetElement = targetElement;
     this.collisionsManager = collisionsManager;
+    this.isMainCameraActive = true;
     this.initialDistance = camValues.initialDistance;
     this.minDistance = camValues.minDistance;
     this.maxDistance = camValues.maxDistance;
@@ -248,19 +250,36 @@ var CameraManager = class {
     this.targetPhi = this.phi;
     this.theta = initialTheta;
     this.targetTheta = this.theta;
-    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
+    const aspect = window.innerWidth / window.innerHeight;
+    this.camera = new PerspectiveCamera(this.fov, aspect, 0.1, 400);
     this.camera.position.set(0, 1.4, -this.initialDistance);
+    this.camera.name = "MainCamera";
+    this.flyCamera = new PerspectiveCamera(this.initialFOV, aspect, 0.1, 400);
+    this.flyCamera.name = "FlyCamera";
+    this.flyCamera.position.copy(this.camera.position);
+    this.flyCamera.name = "FlyCamera";
+    this.orbitControls = new OrbitControls(this.flyCamera, this.targetElement);
+    this.orbitControls.enableDamping = true;
+    this.orbitControls.dampingFactor = 0.05;
+    this.orbitControls.enablePan = true;
+    this.orbitControls.enabled = false;
     this.rayCaster = new Raycaster();
+    this.createEventHandlers();
+  }
+  createEventHandlers() {
     this.eventHandlerCollection = EventHandlerCollection.create([
-      [targetElement, "pointerdown", this.onPointerDown.bind(this)],
-      [targetElement, "gesturestart", this.preventDefaultAndStopPropagation.bind(this)],
+      [this.targetElement, "pointerdown", this.onPointerDown.bind(this)],
+      [this.targetElement, "gesturestart", this.preventDefaultAndStopPropagation.bind(this)],
+      [this.targetElement, "wheel", this.onMouseWheel.bind(this)],
+      [this.targetElement, "contextmenu", this.onContextMenu.bind(this)],
       [document, "pointerup", this.onPointerUp.bind(this)],
       [document, "pointercancel", this.onPointerUp.bind(this)],
-      [document, "pointermove", this.onPointerMove.bind(this)],
-      [targetElement, "wheel", this.onMouseWheel.bind(this)],
-      [targetElement, "contextmenu", this.onContextMenu.bind(this)]
+      [document, "pointermove", this.onPointerMove.bind(this)]
     ]);
   }
+  disposeEventHandlers() {
+    this.eventHandlerCollection.clear();
+  }
   preventDefaultAndStopPropagation(evt) {
     evt.preventDefault();
     evt.stopPropagation();
@@ -391,7 +410,8 @@ var CameraManager = class {
     }
   }
   dispose() {
-    this.eventHandlerCollection.clear();
+    this.disposeEventHandlers();
+    this.orbitControls.dispose();
     document.body.style.cursor = "";
   }
   easeOutExpo(x) {
@@ -399,6 +419,7 @@ var CameraManager = class {
   }
   updateAspect(aspect) {
     this.camera.aspect = aspect;
+    this.flyCamera.aspect = aspect;
   }
   recomputeFoV(immediately = false) {
     this.targetFOV = remap(
@@ -412,7 +433,31 @@ var CameraManager = class {
       this.fov = this.targetFOV;
     }
   }
+  toggleFlyCamera() {
+    this.isMainCameraActive = !this.isMainCameraActive;
+    this.orbitControls.enabled = !this.isMainCameraActive;
+    if (!this.isMainCameraActive) {
+      this.updateAspect(window.innerWidth / window.innerHeight);
+      this.flyCamera.position.copy(this.camera.position);
+      this.flyCamera.rotation.copy(this.camera.rotation);
+      const target = new Vector32();
+      this.camera.getWorldDirection(target);
+      target.multiplyScalar(this.targetDistance).add(this.camera.position);
+      this.orbitControls.target.copy(target);
+      this.orbitControls.update();
+      this.disposeEventHandlers();
+    } else {
+      this.createEventHandlers();
+    }
+  }
+  get activeCamera() {
+    return this.isMainCameraActive ? this.camera : this.flyCamera;
+  }
   update() {
+    if (!this.isMainCameraActive) {
+      this.orbitControls.update();
+      return;
+    }
     if (this.isLerping && this.lerpFactor < 1) {
       this.lerpFactor += 0.01 / this.lerpDuration;
       this.lerpFactor = Math.min(1, this.lerpFactor);
@@ -1666,17 +1711,17 @@ var LocalController = class {
     }
   }
   updateAzimuthalAngle() {
-    const camToModelDistance = this.config.cameraManager.camera.position.distanceTo(
+    const camToModelDistance = this.config.cameraManager.activeCamera.position.distanceTo(
       this.config.character.position
     );
     const isCameraFirstPerson = camToModelDistance < 2;
     if (isCameraFirstPerson) {
-      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.config.cameraManager.camera.quaternion);
+      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.config.cameraManager.activeCamera.quaternion);
       this.azimuthalAngle = Math.atan2(cameraForward.x, cameraForward.z);
     } else {
       this.azimuthalAngle = Math.atan2(
-        this.config.cameraManager.camera.position.x - this.config.character.position.x,
-        this.config.cameraManager.camera.position.z - this.config.character.position.z
+        this.config.cameraManager.activeCamera.position.x - this.config.character.position.x,
+        this.config.cameraManager.activeCamera.position.z - this.config.character.position.z
       );
     }
   }
@@ -2221,11 +2266,22 @@ var CharacterModelLoader = class {
 };
 
 // src/input/KeyInputManager.ts
+var Key = /* @__PURE__ */ ((Key2) => {
+  Key2["W"] = "w";
+  Key2["A"] = "a";
+  Key2["S"] = "s";
+  Key2["D"] = "d";
+  Key2["SHIFT"] = "shift";
+  Key2["SPACE"] = " ";
+  Key2["C"] = "c";
+  return Key2;
+})(Key || {});
 var KeyInputManager = class {
   constructor(shouldCaptureKeyPress = () => true) {
     this.shouldCaptureKeyPress = shouldCaptureKeyPress;
     this.keys = /* @__PURE__ */ new Map();
     this.eventHandlerCollection = new EventHandlerCollection();
+    this.bindings = /* @__PURE__ */ new Map();
     this.eventHandlerCollection.add(document, "keydown", this.onKeyDown.bind(this));
     this.eventHandlerCollection.add(document, "keyup", this.onKeyUp.bind(this));
     this.eventHandlerCollection.add(window, "blur", this.handleUnfocus.bind(this));
@@ -2247,10 +2303,16 @@ var KeyInputManager = class {
   }
   onKeyUp(event) {
     this.keys.set(event.key.toLowerCase(), false);
+    if (this.bindings.has(event.key.toLowerCase())) {
+      this.bindings.get(event.key.toLowerCase())();
+    }
   }
   isKeyPressed(key) {
     return this.keys.get(key) || false;
   }
+  createKeyBinding(key, callback) {
+    this.bindings.set(key, callback);
+  }
   isMovementKeyPressed() {
     return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
   }
@@ -2287,6 +2349,7 @@ var KeyInputManager = class {
   }
   dispose() {
     this.eventHandlerCollection.clear();
+    this.bindings.clear();
   }
 };
 
@@ -2487,11 +2550,15 @@ var VirtualJoystick = class _VirtualJoystick {
 // src/mml/MMLCompositionScene.ts
 import {
   InteractionManager,
-  MMLClickTrigger,
-  PromptManager,
   LoadingProgressManager,
-  MMLDocumentTimeManager
-} from "mml-web";
+  MMLDocumentTimeManager,
+  PromptManager
+} from "@mml-io/mml-web";
+import {
+  ThreeJSClickTrigger,
+  ThreeJSGraphicsInterface,
+  ThreeJSInteractionAdapter
+} from "@mml-io/mml-web-threejs";
 import { Group as Group3 } from "three";
 var MMLCompositionScene = class {
   constructor(config) {
@@ -2499,21 +2566,55 @@ var MMLCompositionScene = class {
     this.chatProbes = /* @__PURE__ */ new Set();
     this.group = new Group3();
     this.promptManager = PromptManager.init(this.config.targetElement);
+    const graphicsAdapter = {
+      collisionType: null,
+      containerType: null,
+      getGraphicsAdapterFactory: () => {
+        return ThreeJSGraphicsInterface;
+      },
+      getRootContainer: () => {
+        return this.group;
+      },
+      interactionShouldShowDistance(interaction) {
+        return ThreeJSInteractionAdapter.interactionShouldShowDistance(
+          interaction,
+          this.config.camera,
+          this.config.scene
+        );
+      },
+      dispose() {
+      },
+      getAudioListener: () => {
+        return config.audioListener;
+      },
+      getCamera: () => {
+        return config.camera;
+      },
+      getThreeScene: () => {
+        return config.scene;
+      },
+      getUserPositionAndRotation: () => {
+        return this.config.getUserPositionAndRotation();
+      }
+    };
     const { interactionListener, interactionManager } = InteractionManager.init(
       this.config.targetElement,
-      this.config.camera,
-      this.config.scene
+      (interaction) => {
+        return graphicsAdapter.interactionShouldShowDistance(interaction);
+      }
     );
     this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.loadingProgressManager = new LoadingProgressManager();
     this.documentTimeManager = new MMLDocumentTimeManager();
     this.mmlScene = {
-      getAudioListener: () => this.config.audioListener,
-      getRenderer: () => this.config.renderer,
-      getThreeScene: () => this.config.scene,
+      getGraphicsAdapter() {
+        return graphicsAdapter;
+      },
+      hasGraphicsAdapter() {
+        return true;
+      },
       getRootContainer: () => this.group,
-      getCamera: () => this.config.camera,
       addCollider: (object, mElement) => {
         this.config.collisionsManager.addMeshesGroup(object, mElement);
       },
@@ -2551,7 +2652,11 @@ var MMLCompositionScene = class {
         return this.loadingProgressManager;
       }
     };
-    this.clickTrigger = MMLClickTrigger.init(this.config.targetElement, this.mmlScene);
+    this.clickTrigger = ThreeJSClickTrigger.init(
+      this.config.targetElement,
+      this.group,
+      this.config.camera
+    );
   }
   onChatMessage(message) {
     for (const chatProbe of this.chatProbes) {
@@ -5152,7 +5257,7 @@ var N8SSAOPass = class extends Pass {
 var Composer = class {
   constructor({
     scene,
-    camera,
+    cameraManager,
     spawnSun = false,
     environmentConfiguration
   }) {
@@ -5166,8 +5271,8 @@ var Composer = class {
     this.sun = null;
     var _a, _b;
     this.scene = scene;
+    this.cameraManager = cameraManager;
     this.postPostScene = new Scene4();
-    this.camera = camera;
     this.spawnSun = spawnSun;
     this.renderer = new WebGLRenderer4({
       powerPreference: "high-performance",
@@ -5187,14 +5292,14 @@ var Composer = class {
     this.effectComposer = new EffectComposer2(this.renderer, {
       frameBufferType: HalfFloatType2
     });
-    this.renderPass = new RenderPass(this.scene, this.camera);
-    this.normalPass = new NormalPass2(this.scene, this.camera);
+    this.renderPass = new RenderPass(this.scene, this.cameraManager.activeCamera);
+    this.normalPass = new NormalPass2(this.scene, this.cameraManager.activeCamera);
     this.normalPass.enabled = ppssaoValues.enabled;
     this.normalTextureEffect = new TextureEffect({
       blendFunction: BlendFunction2.SKIP,
       texture: this.normalPass.texture
     });
-    this.ppssaoEffect = new SSAOEffect2(this.camera, this.normalPass.texture, {
+    this.ppssaoEffect = new SSAOEffect2(this.cameraManager.activeCamera, this.normalPass.texture, {
       blendFunction: ppssaoValues.blendFunction,
       distanceScaling: ppssaoValues.distanceScaling,
       depthAwareUpsampling: ppssaoValues.depthAwareUpsampling,
@@ -5212,7 +5317,11 @@ var Composer = class {
       worldProximityThreshold: ppssaoValues.worldProximityThreshold,
       worldProximityFalloff: ppssaoValues.worldProximityFalloff
     });
-    this.ppssaoPass = new EffectPass2(this.camera, this.ppssaoEffect, this.normalTextureEffect);
+    this.ppssaoPass = new EffectPass2(
+      this.cameraManager.activeCamera,
+      this.ppssaoEffect,
+      this.normalTextureEffect
+    );
     this.ppssaoPass.enabled = ppssaoValues.enabled;
     this.fxaaEffect = new FXAAEffect();
     if ((_a = environmentConfiguration == null ? void 0 : environmentConfiguration.postProcessing) == null ? void 0 : _a.bloomIntensity) {
@@ -5221,7 +5330,12 @@ var Composer = class {
     this.bloomEffect = new BloomEffect({
       intensity: extrasValues.bloom
     });
-    this.n8aopass = new N8SSAOPass(this.scene, this.camera, this.width, this.height);
+    this.n8aopass = new N8SSAOPass(
+      this.scene,
+      this.cameraManager.activeCamera,
+      this.width,
+      this.height
+    );
     this.n8aopass.configuration.aoRadius = n8ssaoValues.aoRadius;
     this.n8aopass.configuration.distanceFalloff = n8ssaoValues.distanceFalloff;
     this.n8aopass.configuration.intensity = n8ssaoValues.intensity;
@@ -5234,8 +5348,8 @@ var Composer = class {
     this.n8aopass.configuration.denoiseSamples = n8ssaoValues.denoiseSamples;
     this.n8aopass.configuration.denoiseRadius = n8ssaoValues.denoiseRadius;
     this.n8aopass.enabled = n8ssaoValues.enabled;
-    this.fxaaPass = new EffectPass2(this.camera, this.fxaaEffect);
-    this.bloomPass = new EffectPass2(this.camera, this.bloomEffect);
+    this.fxaaPass = new EffectPass2(this.cameraManager.activeCamera, this.fxaaEffect);
+    this.bloomPass = new EffectPass2(this.cameraManager.activeCamera, this.bloomEffect);
     this.toneMappingEffect = new ToneMappingEffect({
       mode: toneMappingValues.mode,
       resolution: toneMappingValues.resolution,
@@ -5250,7 +5364,7 @@ var Composer = class {
       edgeDetectionMode: EdgeDetectionMode.COLOR,
       predicationMode: PredicationMode.DEPTH
     });
-    this.toneMappingPass = new EffectPass2(this.camera, this.toneMappingEffect);
+    this.toneMappingPass = new EffectPass2(this.cameraManager.activeCamera, this.toneMappingEffect);
     this.toneMappingPass.enabled = rendererValues.toneMapping === 5 || rendererValues.toneMapping === 0 ? true : false;
     this.bcsPass = new ShaderPass(this.bcs, "tDiffuse");
     this.bcs.uniforms.brightness.value = bcsValues.brightness;
@@ -5259,7 +5373,7 @@ var Composer = class {
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
     this.gaussGrainEffect.uniforms.amount.value = extrasValues.grain;
     this.gaussGrainEffect.uniforms.alpha.value = 1;
-    this.smaaPass = new EffectPass2(this.camera, this.smaaEffect);
+    this.smaaPass = new EffectPass2(this.cameraManager.activeCamera, this.smaaEffect);
     this.effectComposer.addPass(this.renderPass);
     if (ppssaoValues.enabled) {
       this.effectComposer.addPass(this.normalPass);
@@ -5346,8 +5460,8 @@ var Composer = class {
     }
     this.width = parentElement.clientWidth;
     this.height = parentElement.clientHeight;
-    this.camera.aspect = this.width / this.height;
-    this.camera.updateProjectionMatrix();
+    this.cameraManager.activeCamera.aspect = this.width / this.height;
+    this.cameraManager.activeCamera.updateProjectionMatrix();
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.resolution.set(
       this.width * window.devicePixelRatio,
@@ -5376,11 +5490,12 @@ var Composer = class {
   }
   render(timeManager) {
     this.renderer.info.reset();
+    this.renderPass.mainCamera = this.cameraManager.activeCamera;
     this.normalPass.texture.needsUpdate = true;
     this.gaussGrainEffect.uniforms.time.value = timeManager.time;
     this.effectComposer.render();
     this.renderer.clearDepth();
-    this.renderer.render(this.postPostScene, this.camera);
+    this.renderer.render(this.postPostScene, this.cameraManager.activeCamera);
   }
   updateSkyboxRotation() {
     this.scene.backgroundRotation = new Euler3(
@@ -5627,39 +5742,73 @@ var TimeManager = class {
 };
 
 // src/collisions/CollisionsManager.ts
-import {
-  getRelativePositionAndRotationRelativeToObject,
-  MMLCollisionTrigger
-} from "mml-web";
+import { MMLCollisionTrigger } from "@mml-io/mml-web";
 import {
   Box3,
   Color as Color8,
   DoubleSide,
-  Euler as Euler4,
+  Euler as Euler5,
   Group as Group5,
   Line3 as Line32,
-  Matrix4 as Matrix46,
+  Matrix4 as Matrix47,
   Mesh as Mesh5,
   MeshBasicMaterial as MeshBasicMaterial3,
-  Quaternion as Quaternion6,
+  Quaternion as Quaternion7,
   Ray as Ray2,
-  Vector3 as Vector314
+  Vector3 as Vector315
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
 import { MeshBVH, MeshBVHHelper } from "three-mesh-bvh";
+
+// src/collisions/getRelativePositionAndRotationRelativeToObject.ts
+import { Euler as Euler4, Matrix4 as Matrix46, Quaternion as Quaternion6, Vector3 as Vector314 } from "three";
+var tempContainerMatrix = new Matrix46();
+var tempTargetMatrix = new Matrix46();
+var tempPositionVector = new Vector314();
+var tempRotationEuler = new Euler4();
+var tempRotationQuaternion = new Quaternion6();
+var tempScaleVector = new Vector314();
+function getRelativePositionAndRotationRelativeToObject(positionAndRotation, container) {
+  const { x, y, z } = positionAndRotation.position;
+  const { x: rx, y: ry, z: rz } = positionAndRotation.rotation;
+  container.updateWorldMatrix(true, false);
+  tempContainerMatrix.copy(container.matrixWorld).invert();
+  tempPositionVector.set(x, y, z);
+  tempRotationEuler.set(rx, ry, rz);
+  tempRotationQuaternion.setFromEuler(tempRotationEuler);
+  tempScaleVector.set(1, 1, 1);
+  tempTargetMatrix.compose(tempPositionVector, tempRotationQuaternion, tempScaleVector);
+  tempTargetMatrix.premultiply(tempContainerMatrix);
+  tempTargetMatrix.decompose(tempPositionVector, tempRotationQuaternion, tempScaleVector);
+  tempRotationEuler.setFromQuaternion(tempRotationQuaternion);
+  return {
+    position: {
+      x: tempPositionVector.x,
+      y: tempPositionVector.y,
+      z: tempPositionVector.z
+    },
+    rotation: {
+      x: tempRotationEuler.x,
+      y: tempRotationEuler.y,
+      z: tempRotationEuler.z
+    }
+  };
+}
+
+// src/collisions/CollisionsManager.ts
 var CollisionsManager = class {
   constructor(scene) {
     this.debug = false;
-    this.tempVector = new Vector314();
-    this.tempVector2 = new Vector314();
-    this.tempVector3 = new Vector314();
-    this.tempQuaternion = new Quaternion6();
+    this.tempVector = new Vector315();
+    this.tempVector2 = new Vector315();
+    this.tempVector3 = new Vector315();
+    this.tempQuaternion = new Quaternion7();
     this.tempRay = new Ray2();
-    this.tempMatrix = new Matrix46();
-    this.tempMatrix2 = new Matrix46();
+    this.tempMatrix = new Matrix47();
+    this.tempMatrix2 = new Matrix47();
     this.tempBox = new Box3();
-    this.tempEuler = new Euler4();
+    this.tempEuler = new Euler5();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
@@ -5669,7 +5818,7 @@ var CollisionsManager = class {
   raycastFirst(ray) {
     let minimumDistance = null;
     let minimumHit = null;
-    let minimumNormal = new Vector314();
+    let minimumNormal = new Vector315();
     for (const [, collisionMeshState] of this.collisionMeshState) {
       this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
       const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
@@ -5810,7 +5959,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector314().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
+            collisionPosition = new Vector315().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;
@@ -5912,7 +6061,7 @@ var GroundPlane = class extends Group6 {
 };
 
 // src/loading-screen/LoadingScreen.ts
-import { LoadingProgressManager as LoadingProgressManager2 } from "mml-web";
+import { LoadingProgressManager as LoadingProgressManager2 } from "@mml-io/mml-web";
 var LoadingScreen = class {
   constructor(loadingProgressManager, config) {
     this.loadingProgressManager = loadingProgressManager;
@@ -6196,6 +6345,7 @@ export {
   Composer,
   ErrorScreen,
   GroundPlane,
+  Key,
   KeyInputManager,
   LoadingScreen,
   MMLCompositionScene,