如何在 Tween/动画期间/之后避免相机跳跃？答案

【问题标题】：How to avoid camera jumps during/after Tween/animation?如何在 Tween/动画期间/之后避免相机跳跃？
【发布时间】：2016-04-18 17:59:38
【问题描述】：

我在 THREE.js 中创建相机补间时遇到了一些麻烦，特别是在动画的结尾和开头，似乎总是有一个相机“跳跃”，这意味着一旦动画开始相机就会闪烁并且一旦动画结束。作为参考，我正在做的是：

相机从上方俯瞰场景。
当用户点击场景的一个元素时，相机会放大它（通过 TWEEN），当它足够近时，OrbitControls 目标会更改为所选元素的质心，并开始自动旋转，因此用户看到元素在屏幕中心旋转。
当用户再次单击时，相机会缩小到其初始位置（通过 TWEEN）并返回到原始控件。

我在每个 TWEEN 的开头和结尾都经历了“跳跃/闪烁”。

这是我的补间函数：

      var origpos = new THREE.Vector3().copy(camera.position); // original position
      var origrot = new THREE.Euler().copy(camera.rotation); // original rotation

      camera.position.set(x, y+500, z+variation);
      camera.lookAt(new THREE.Vector3(x,y,z));
      var dstrot = new THREE.Euler().copy(camera.rotation)

      // reset original position and rotation
      camera.position.set(origpos.x, origpos.y, origpos.z);
      camera.rotation.set(origrot.x, origrot.y, origrot.z);

     options = {duration: 3000};

      //
      // Tweening
      //

      // position
      new TWEEN.Tween(camera.position).to({
        x: x,
        y: y+500,
        z: z
      }, options.duration).easing(TWEEN.Easing.Cubic.Out).onUpdate(function () {
            camera.lookAt(new THREE.Vector3(x,y,z));
        }).onComplete(function () {
            controls.autoRotate = true;
            controls.autoRotateSpeed = 5.0;
            controls.target = new THREE.Vector3(x, y, z);
        }).start(); 

      // rotation (using slerp)
      (function () {
        var qa = camera.quaternion; // src quaternion
        var qb = new THREE.Quaternion().setFromEuler(dstrot); // dst quaternion
        var qm = new THREE.Quaternion();

        var o = {t: 0};
        new TWEEN.Tween(o).to({t: 1}, options.duration).onUpdate(function () {
          THREE.Quaternion.slerp(qa, qb, qm, o.t);
          camera.quaternion.set(qm.x, qm.y, qm.z, qm.w);
        }).start();
      }).call(this);

【问题讨论】：

标签： camera three.js quaternions tween

【解决方案1】：

好的，看来问题本身在于我使用四元数和 SLERP 旋转相机的方法。

我发现最好的方法（更简单且没有闪烁/跳跃）是对 camera.rotation 的参数进行插值，而不是对四元数进行插值。

因此，camera.rotation.the_axis_where_you_want_to_rotate 的 Tween 完美地工作，并与位置上的 Tween 同时完成，达到了我想要的效果。

【讨论】：