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

package/build/camera/CameraManager.d.ts

@@ -26,14 +26,23 @@ export declare class CameraManager {
     private hadTarget;
     private rayCaster;
     private eventHandlerCollection;
+    private isLerping;
+    private finalTarget;
+    private lerpTarget;
+    private lerpFactor;
+    private lerpDuration;
+    private fixedOnTarget;
     constructor(targetElement: HTMLElement, collisionsManager: CollisionsManager, initialPhi?: number, initialTheta?: number);
     private onMouseDown;
     private onMouseUp;
     private onMouseMove;
     private onMouseWheel;
     setTarget(target: Vector3): void;
+    setLerpedTarget(target: Vector3): 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,12 @@ 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.fixedOnTarget = false;
     this.phi = initialPhi;
     this.targetPhi = initialPhi;
     this.theta = initialTheta;
@@ -135,6 +138,7 @@ var CameraManager = class {
   onMouseMove(event) {
     if (!this.dragging || getTweakpaneActive())
       return;
+    this.fixedOnTarget = false;
     if (this.targetTheta === null || this.targetPhi === null)
       return;
     this.targetTheta += event.movementX * 0.01;
@@ -143,6 +147,7 @@ var CameraManager = class {
     event.preventDefault();
   }
   onMouseWheel(event) {
+    this.fixedOnTarget = false;
     const scrollAmount = event.deltaY * 1e-3;
     this.targetDistance += scrollAmount;
     this.targetDistance = Math.max(
@@ -153,12 +158,23 @@ 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) {
+    this.isLerping = true;
+    this.fixedOnTarget = true;
+    this.setTarget(target);
+  }
   reverseUpdateFromPositions() {
     if (this.phi === null || this.theta == null)
       return;
@@ -189,9 +205,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 if (!this.fixedOnTarget) {
+      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 +233,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;
+      }
     }
   }
 };