一、npm安裝tweemjs
npm i @tweenjs/tween.js@^18
二、引入tweemjs
import * as TWEEN from 'tween.js';
三、使用文章來源：http://www.zghlxwxcb.cn/news/detail-531508.html
//更新相機位置
changeCameraPosition(findIndex) {
console.log(camera.position)
//解除滑動限制. 如果你在創(chuàng)建模型的時候設(shè)置了滑動平移放大縮小等限制在這里需要解除限制，不然達不到你想要的結(jié)果。
controls.minDistance = 0;
controls.maxPolarAngle = Math.PI / 1;
controls.enableRotate = false
controls.enableZoom = false
controls.update();
// 相機從當(dāng)前位置camera.position飛行三維場景中某個世界坐標(biāo)附近
new TWEEN.Tween({
// 相機開始坐標(biāo)
x: camera.position.x,
y: camera.position.y,
z: camera.position.z,
// 相機開始指向的目標(biāo)觀察點
tx: 0,
ty: 0,
tz: 0,
})
.to({
// 相機結(jié)束坐標(biāo)
x: 0,
y: 0,
z: 0,
// 相機結(jié)束指向的目標(biāo)觀察點
tx: 0,
ty: 0,
tz: 0,
}, 1000)
.onUpdate(function (e) {
//小程序中使用e，H5中使用this，獲取結(jié)束的位置信息
// 動態(tài)改變相機位置
camera.position.set(this.x, this.y, this.z);
// 模型中心點
controls.target.set(this.tx, this.ty, this.tz);
controls.update();//內(nèi)部會執(zhí)行.lookAt()
})
.start();
},
注：這里需要在requestAnimationFrame內(nèi)調(diào)用TWEEN.update();不然動畫不生效。文章來源地址http://www.zghlxwxcb.cn/news/detail-531508.html
// 渲染場景
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
renderer.render(scene, camera);
}
animate();
到了這里，關(guān)于threejs平滑地移動相機的位置，將其逐漸接近目標(biāo)點位置(tweemjs)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[threejs]相機與坐標(biāo)](https://imgs.yssmx.com/Uploads/2024/02/626408-1.png)
