feat: Modified the vector calculation for camera control

xiangechen · Aug 7, 2024 · abb6ac1 · abb6ac1
1 parent 1705c39
commit abb6ac1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/chili-three/src/cameraController.ts b/packages/chili-three/src/cameraController.ts
@@ -54,7 +54,7 @@ export class CameraController implements ICameraController {
     }
 
     pan(dx: number, dy: number): void {
-        let ratio = 0.002 * this._target.distanceTo(this._position);
+        let ratio = 0.0015 * this._target.distanceTo(this._position);
         let direction = this._target.clone().sub(this._position).normalize();
         let hor = direction.clone().cross(this._up).normalize();
         let ver = hor.clone().cross(direction).normalize();

diff --git a/packages/chili-three/src/threeViewEventHandler.ts b/packages/chili-three/src/threeViewEventHandler.ts
@@ -12,6 +12,7 @@ const MIDDLE = 4;
 export class ThreeViewHandler implements IEventHandler {
     private _lastDown: MouseDownData | undefined;
     private _clearDownId: number | undefined;
+    private _offsetPoint: { x: number; y: number } | undefined;
 
     canRotate: boolean = true;
 
@@ -28,12 +29,18 @@ export class ThreeViewHandler implements IEventHandler {
         if (event.buttons !== MIDDLE) {
             return;
         }
+        let [dx, dy] = [0, 0];
+        if (this._offsetPoint) {
+            dx = event.offsetX - this._offsetPoint.x;
+            dy = event.offsetY - this._offsetPoint.y;
+            this._offsetPoint = { x: event.offsetX, y: event.offsetY };
+        }
         if (event.shiftKey && this.canRotate) {
-            view.cameraController.rotate(event.movementX, event.movementY);
+            view.cameraController.rotate(dx, dy);
         } else if (!event.shiftKey) {
-            view.cameraController.pan(event.movementX, event.movementY);
+            view.cameraController.pan(dx, dy);
         }
-        if (event.movementX !== 0 && event.movementY !== 0) this._lastDown = undefined;
+        if (dx !== 0 && dy !== 0) this._lastDown = undefined;
         view.update();
     }
 
@@ -49,6 +56,7 @@ export class ThreeViewHandler implements IEventHandler {
                 time: Date.now(),
                 key: event.buttons,
             };
+            this._offsetPoint = { x: event.offsetX, y: event.offsetY };
         }
     }
 
@@ -70,6 +78,7 @@ export class ThreeViewHandler implements IEventHandler {
                 this._clearDownId = undefined;
             }, 500);
         }
+        this._offsetPoint = undefined;
     }
 
     keyDown(view: IView, event: KeyboardEvent): void {}