three.js 相机平滑切换视角

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

// current1 相机当前的位置
// target1 相机的目标位置
// current2 当前的controls的target
// target2 新的controls的target
function animateCamera(current1, target1, current2, target2){
    var tween = new TWEEN.Tween({
        x1: current1.x, // 相机当前位置x
        y1: current1.y, // 相机当前位置y
        z1: current1.z, // 相机当前位置z
        x2: current2.x, // 控制当前的中心点x
        y2: current2.y, // 控制当前的中心点y
        z2: current2.z  // 控制当前的中心点z
    });
    tween.to({
        x1: target1.x, // 新的相机位置x
        y1: target1.y, // 新的相机位置y
        z1: target1.z, // 新的相机位置z
        x2: target2.x, // 新的控制中心点位置x
        y2: target2.y, // 新的控制中心点位置x
        z2: target2.z  // 新的控制中心点位置x
    },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;
    })
    tween.easing(TWEEN.Easing.Cubic.InOut);
        tween.start();
    }

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