@mml-io/3d-web-client-core 0.0.0-experimental-19bc481-20241121 → 0.0.0-experimental-16d1b9c-20241218

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/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();
   }
 };
 
@@ -5152,7 +5215,7 @@ var N8SSAOPass = class extends Pass {
 var Composer = class {
   constructor({
     scene,
-    camera,
+    cameraManager,
     spawnSun = false,
     environmentConfiguration
   }) {
@@ -5166,8 +5229,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 +5250,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 +5275,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 +5288,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 +5306,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 +5322,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 +5331,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 +5418,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 +5448,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(
@@ -6196,6 +6269,7 @@ export {
   Composer,
   ErrorScreen,
   GroundPlane,
+  Key,
   KeyInputManager,
   LoadingScreen,
   MMLCompositionScene,