// 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/…