Camera 如何在吐温/动画期间/之后避免摄影机跳跃？

我在THREE.js中创建一个摄影机Tween时遇到了一些问题，特别是在动画的结束和开始时，似乎总是有一个摄影机“跳跃”，这意味着一旦动画开始和动画结束，摄影机就会闪烁。作为参考，我正在做的是：

摄像机从上面俯瞰一个场景

当用户单击场景中的某个元素时，相机会对其进行缩放（二者之间），当距离足够近时，OrbitControls目标会更改为选定元素的质心，并开始自动旋转，因此用户会看到该元素在屏幕中心旋转

当用户再次单击时，相机将缩小到其初始位置（二者之间），并返回到原始控件

我在每个二人组的开始和结束时都会经历“跳跃/闪烁”

这是我的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);

---

好的，问题似乎在于我使用的旋转相机的方法，使用四元数和SLERP

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

所以，一个camera.rotation的Tween。你想要旋转的，与位置上的Tween同时进行的旋转轴，达到了我想要的效果