一、npm安装tweemjs
npm i @tweenjs/tween.js@^18
二、引入tweemjs
import * as TWEEN from 'tween.js';
三、使用文章来源：https://www.toymoban.com/news/detail-531508.html
//更新相机位置
changeCameraPosition(findIndex) {
console.log(camera.position)
//解除滑动限制. 如果你在创建模型的时候设置了滑动平移放大缩小等限制在这里需要解除限制，不然达不到你想要的结果。
controls.minDistance = 0;
controls.maxPolarAngle = Math.PI / 1;
controls.enableRotate = false
controls.enableZoom = false
controls.update();
// 相机从当前位置camera.position飞行三维场景中某个世界坐标附近
new TWEEN.Tween({
// 相机开始坐标
x: camera.position.x,
y: camera.position.y,
z: camera.position.z,
// 相机开始指向的目标观察点
tx: 0,
ty: 0,
tz: 0,
})
.to({
// 相机结束坐标
x: 0,
y: 0,
z: 0,
// 相机结束指向的目标观察点
tx: 0,
ty: 0,
tz: 0,
}, 1000)
.onUpdate(function (e) {
//小程序中使用e，H5中使用this，获取结束的位置信息
// 动态改变相机位置
camera.position.set(this.x, this.y, this.z);
// 模型中心点
controls.target.set(this.tx, this.ty, this.tz);
controls.update();//内部会执行.lookAt()
})
.start();
},
注：这里需要在requestAnimationFrame内调用TWEEN.update();不然动画不生效。文章来源地址https://www.toymoban.com/news/detail-531508.html
// 渲染场景
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
renderer.render(scene, camera);
}
animate();
到了这里，关于threejs平滑地移动相机的位置，将其逐渐接近目标点位置(tweemjs)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[threejs]相机与坐标](https://imgs.yssmx.com/Uploads/2024/02/626408-1.png)
