【转】three.js 相机平滑切换视角

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

function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
}

场景使用orbitControls控制的,所以在相机动画主要控制两个点: 1是相机的位置,2是orbitControls的target属性(这个属性相当于相机控制的中心点)

转自,修改了一些内容 blog.csdn.net/lizujun123/…