feat(MouseCameraTrackballFirstPersonManipulator): Animate mouse movem…

…ents

Each mouse movement is now broken up into 20 animation steps. This makes the camera movements appear
much smoother. Perhaps we should calculate the number of animation steps in the future, but for now,
this seems to be working well.

Sources/Interaction/Manipulators/MouseCameraTrackballFirstPersonManipulator/index.js

@@ -40,14 +40,15 @@ function vtkMouseCameraTrackballFirstPersonManipulator(publicAPI, model) {
       return;
     }
 
+    // TODO: at some point, these should perhaps be done in
+    // RenderWindowInteractor instead of here.
     canvas.requestPointerLock();
     document.addEventListener('mousemove', publicAPI.onPointerLockMove);
 
     document.addEventListener(
       'pointerlockchange',
       publicAPI.endPointerLockMode
     );
-    interactor.requestAnimation(ANIMATION_REQUESTER);
   };
 
   //--------------------------------------------------------------------------
@@ -61,8 +62,8 @@ function vtkMouseCameraTrackballFirstPersonManipulator(publicAPI, model) {
       return;
     }
 
-    interactor.cancelAnimation(ANIMATION_REQUESTER);
-
+    // TODO: at some point, these should perhaps be done in
+    // RenderWindowInteractor instead of here.
     document.removeEventListener('mousemove', publicAPI.onPointerLockMove);
     document.removeEventListener(
       'pointerlockchange',
@@ -107,17 +108,37 @@ function vtkMouseCameraTrackballFirstPersonManipulator(publicAPI, model) {
 
     const camera = renderer.getActiveCamera();
 
-    // It might be nice if we update all of these at the same time so
-    // that camera.modified() doesn't get emitted multiple times.
-    camera.yaw(yaw);
-    camera.pitch(pitch);
-    camera.orthogonalizeViewUp();
-
-    renderer.resetCameraClippingRange();
-
-    if (interactor.getLightFollowCamera()) {
-      renderer.updateLightsGeometryToFollowCamera();
-    }
+    // We need to pick a number of steps here that is not too few
+    // (or the camera will be jittery) and not too many (or the
+    // animations will take too long).
+    // Perhaps this should be calculated?
+    const numSteps = 20;
+    const yawStep = yaw / numSteps;
+    const pitchStep = pitch / numSteps;
+
+    const now = performance.now().toString();
+    const animationRequester = `${ANIMATION_REQUESTER}.${now}`;
+
+    let curStep = 0;
+    let intervalId = null;
+    const performStep = () => {
+      camera.yaw(yawStep);
+      camera.pitch(pitchStep);
+      camera.orthogonalizeViewUp();
+      curStep += 1;
+      if (curStep === numSteps) {
+        clearInterval(intervalId);
+        renderer.resetCameraClippingRange();
+
+        if (interactor.getLightFollowCamera()) {
+          renderer.updateLightsGeometryToFollowCamera();
+        }
+        interactor.cancelAnimation(animationRequester);
+      }
+    };
+
+    interactor.requestAnimation(animationRequester);
+    intervalId = setInterval(performStep, 1);
   };
 }