Refactor camera zoom to use smooth, stepped transitions for perspective and orthographic views

src/viewport-three/viewport-host.ts

@@ -9619,26 +9619,38 @@ export class ViewportHost {
     event.preventDefault();
 
     if (this.viewMode === "perspective") {
-      this.cameraSpherical.radius = Math.min(
+      this.targetPerspectiveCameraRadius = this.clampPerspectiveCameraRadius(
-        MAX_CAMERA_DISTANCE,
+        (this.targetPerspectiveCameraRadius ?? this.cameraSpherical.radius) *
-        Math.max(
+          Math.exp(event.deltaY * ZOOM_SPEED)
-          MIN_CAMERA_DISTANCE,
-          this.cameraSpherical.radius * Math.exp(event.deltaY * ZOOM_SPEED)
-        )
       );
+      const nextRadius = this.stepSmoothZoomValue(
+        this.cameraSpherical.radius,
+        this.targetPerspectiveCameraRadius,
+        SMOOTH_ZOOM_IMMEDIATE_RESPONSE
+      );
+      this.cameraSpherical.radius = nextRadius.value;
+      if (nextRadius.done) {
+        this.targetPerspectiveCameraRadius = null;
+      }
       this.applyPerspectiveCameraPose();
       this.emitCameraStateChange();
       return;
     }
 
-    this.orthographicCamera.zoom = Math.min(
+    this.targetOrthographicCameraZoom = this.clampOrthographicCameraZoom(
-      MAX_ORTHOGRAPHIC_ZOOM,
+      (this.targetOrthographicCameraZoom ?? this.orthographicCamera.zoom) *
-      Math.max(
+        Math.exp(-event.deltaY * ZOOM_SPEED)
-        MIN_ORTHOGRAPHIC_ZOOM,
-        this.orthographicCamera.zoom * Math.exp(-event.deltaY * ZOOM_SPEED)
-      )
     );
-    this.orthographicCamera.updateProjectionMatrix();
+    const nextZoom = this.stepSmoothZoomValue(
+      this.orthographicCamera.zoom,
+      this.targetOrthographicCameraZoom,
+      SMOOTH_ZOOM_IMMEDIATE_RESPONSE
+    );
+    this.orthographicCamera.zoom = nextZoom.value;
+    if (nextZoom.done) {
+      this.targetOrthographicCameraZoom = null;
+    }
+    this.applyOrthographicCameraPose();
     this.emitCameraStateChange();
   };