一、安裝
npm i @tweenjs/tween.js
二、引入
import * as TWEEN from '@tweenjs/tween.js';
三、使用文章來源：http://www.zghlxwxcb.cn/news/detail-549296.html
function animateCamera(oldP, oldT, newP, newT) {
// oldP 相機(jī)原來的位置
// oldT target原來的位置
// newP 相機(jī)新的位置
// newT target新的位置
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
}).to({
x1: newP.x,
y1: newP.y,
z1: newP.z,
x2: newT.x,
y2: newT.y,
z2: newT.z
}, 1000)
.easing(TWEEN.Easing.Cubic.InOut)
.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();
}).start();
}
最后不要忘了在render中執(zhí)行TWEEN.update();文章來源地址http://www.zghlxwxcb.cn/news/detail-549296.html
到了這里，關(guān)于Three.js -相機(jī)平滑移動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
