在three.js場(chǎng)景中，讓相機(jī)從當(dāng)前的位置平滑的切換到新的位置，類似于下面的效果。
camera.gif
在整個(gè)動(dòng)畫(huà)的開(kāi)始和結(jié)束的階段需要做一些平滑的處理。
我這里使用的是tween.js。
場(chǎng)景我使用的orbitControls控制的，所以在相機(jī)動(dòng)畫(huà)主要控制兩個(gè)點(diǎn)：
1是相機(jī)的位置，2是orbitControls的target屬性(這個(gè)屬性相當(dāng)于相機(jī)控制的中心點(diǎn))
// oldP 相機(jī)原來(lái)的位置
// oldT target原來(lái)的位置
// newP 相機(jī)新的位置
// newT target新的位置
// callBack 動(dòng)畫(huà)結(jié)束時(shí)的回調(diào)函數(shù)
function animateCamera(oldP, oldT, newP, newT, callBack){
var tween = new TWEEN.Tween({
x1: oldP.x, // 相機(jī)x
y1: oldP.y, // 相機(jī)y
z1: oldP.z, // 相機(jī)z
x2: oldT.x, // 控制點(diǎn)的中心點(diǎn)x
y2: oldT.y, // 控制點(diǎn)的中心點(diǎn)y
z2: oldT.z // 控制點(diǎn)的中心點(diǎn)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中調(diào)用TWEEN.update();
