fix camera zooming

Author: julerex

client/src/camera/CameraController.ts

@@ -33,6 +33,7 @@ export class CameraController {
     private readonly camera: THREE.PerspectiveCamera;
     private rotation: CameraRotation = { theta: 0, phi: 0.5 };
     private distance: number = 10;
+    private targetDistance: number = 10;
     private anchored: boolean = false;
     private focusPoint: THREE.Vector3 | null = null;
 
@@ -41,6 +42,8 @@ export class CameraController {
     private readonly maxDistance: number = 50;
     private readonly rotationSpeed: number = 0.02;
     private readonly freeMoveSpeed: number = 0.5;
+    private readonly zoomSpeed: number = 0.0025;
+    private readonly zoomLerp: number = 0.18;
 
     constructor(aspectRatio: number) {
         this.camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 10000);
@@ -75,8 +78,11 @@ export class CameraController {
     }
 
     public adjustZoom(delta: number): void {
-        this.distance += delta;
-        this.distance = Math.max(this.minDistance, Math.min(this.maxDistance, this.distance));
+        // Use exponential scaling for consistent feel across small/large wheel deltas:
+        // delta > 0 => zoom out (increase distance), delta < 0 => zoom in.
+        const factor = Math.exp(delta * this.zoomSpeed);
+        this.targetDistance *= factor;
+        this.targetDistance = Math.max(this.minDistance, Math.min(this.maxDistance, this.targetDistance));
     }
 
     public adjustRotation(deltaTheta: number, deltaPhi: number): void {
@@ -90,6 +96,9 @@ export class CameraController {
     public update(player: Player | null, input: InputManager): void {
         if (!player) return;
 
+        // Smoothly approach the zoom target each frame.
+        this.distance = THREE.MathUtils.lerp(this.distance, this.targetDistance, this.zoomLerp);
+
         // Handle arrow keys and Q/E for horizontal camera rotation
         if (input.isKeyPressed('arrowleft') || input.isKeyPressed('q')) {
             this.rotation.theta += this.rotationSpeed;
@@ -159,5 +168,8 @@ export class CameraController {
     public setInitialPosition(player: Player): void {
         const pos = player.mesh.position;
         this.camera.position.set(pos.x, pos.y + 5, pos.z + 10);
+        // Keep zoom state consistent with initial placement.
+        this.distance = this.camera.position.distanceTo(new THREE.Vector3(pos.x, pos.y, pos.z));
+        this.targetDistance = this.distance;
     }
 }

client/src/commit_time.txt

@@ -1 +1 @@
-2026-01-14T20:41:29.540Z
+2026-01-14T20:48:25.803Z

client/src/input/InputManager.ts

@@ -87,7 +87,8 @@ export class InputManager {
         document.addEventListener('mousedown', this.handleMouseDown);
         document.addEventListener('mousemove', this.handleMouseMove);
         document.addEventListener('mouseup', this.handleMouseUp);
-        document.addEventListener('wheel', this.handleWheel);
+        // Note: wheel listeners are often passive by default in browsers; set passive:false so we can prevent scrolling.
+        document.addEventListener('wheel', this.handleWheel, { passive: false });
         document.addEventListener('contextmenu', this.handleContextMenu);
     }
 
@@ -131,8 +132,22 @@ export class InputManager {
     };
 
     private handleWheel = (e: WheelEvent): void => {
+        // Prevent the page from scrolling while zooming the camera.
+        e.preventDefault();
+
+        // Normalize wheel delta to roughly "pixels" across devices:
+        // - DOM_DELTA_PIXEL (0): already pixels
+        // - DOM_DELTA_LINE (1): convert lines to pixels
+        // - DOM_DELTA_PAGE (2): convert pages to viewport height
+        let delta = e.deltaY;
+        if (e.deltaMode === 1) {
+            delta *= 16;
+        } else if (e.deltaMode === 2) {
+            delta *= window.innerHeight;
+        }
+
         for (const callback of this.onWheelCallbacks) {
-            callback(e.deltaY);
+            callback(delta);
         }
     };