在整个动画的开始和结束的阶段需要做一些平滑的处理。
我这里使用的是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();