@mml-io/3d-web-client-core 0.0.0-experimental-e5a5229-20231107 → 0.0.0-experimental-e21a271-20231108

package/build/camera/CameraManager.d.ts

@@ -26,14 +26,22 @@ export declare class CameraManager {
     private hadTarget;
     private rayCaster;
     private eventHandlerCollection;
+    private isLerping;
+    private finalTarget;
+    private lerpTarget;
+    private lerpFactor;
+    private lerpDuration;
     constructor(targetElement: HTMLElement, collisionsManager: CollisionsManager, initialPhi?: number, initialTheta?: number);
     private onMouseDown;
     private onMouseUp;
     private onMouseMove;
     private onMouseWheel;
     setTarget(target: Vector3): void;
+    setLerpedTarget(target: Vector3, targetDistance: number): void;
     private reverseUpdateFromPositions;
     adjustCameraPosition(): void;
     dispose(): void;
+    private easeOutExpo;
+    updateAspect(aspect: number): void;
     update(): void;
 }

package/build/index.js

@@ -34,9 +34,6 @@ 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);
 };
@@ -112,6 +109,11 @@ var CameraManager = class {
     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;
@@ -153,12 +155,24 @@ var CameraManager = class {
     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;
@@ -189,9 +203,20 @@ var CameraManager = class {
   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;
@@ -206,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;
+      }
     }
   }
 };