three.js中两个点之间平滑切换相机位置的解决方法

在three.js场景中，让相机从当前的位置平滑的切换到新的位置，类似于下面的效果。

camera.gif

在整个动画的开始和结束的阶段需要做一些平滑的处理。
我这里使用的是tween.js。
场景我使用的orbitControls控制的，所以在相机动画主要控制两个点：
1是相机的位置，2是orbitControls的target属性(这个属性相当于相机控制的中心点)

// oldP  相机原来的位置
// oldT  target原来的位置
// newP  相机新的位置
// newT  target新的位置
// callBack  动画结束时的回调函数
function animateCamera(oldP, oldT, newP, newT, callBack){
        var tween = new TWEEN.Tween({
            x1: oldP.x, // 相机x
            y1: oldP.y, // 相机y
            z1: oldP.z, // 相机z
            x2: oldT.x, // 控制点的中心点x
            y2: oldT.y, // 控制点的中心点y
            z2: oldT.z  // 控制点的中心点z
        });
        tween.to({
            x1: newP.x,
            y1: newP.y,
            z1: newP.z,
            x2: newT.x,
            y2: newT.y,
            z2: newT.z
        },1000);
        tween.onUpdate(function(object){
            camera.position.x = object.x1;
            camera.position.y = object.y1;
            camera.position.z = object.z1;
            controls.target.x = object.x2;
            controls.target.y = object.y2;
            controls.target.z = object.z2;
            controls.update();
        })
        tween.onComplete(function(){
            controls.enabled = true;
            callBack&&callBack()
        })
        tween.easing(TWEEN.Easing.Cubic.InOut);
        tween.start();
    }

别忘了在requestAnimationFrame中调用TWEEN.update();