threejs平滑地移动相机的位置，将其逐渐接近目标点位置(tweemjs)

一、npm安装tweemjs

npm i @tweenjs/tween.js@^18

二、引入tweemjs

import * as TWEEN from 'tween.js';

三、使用

//更新相机位置
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) {
		//小程序中使用eH5中使用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();不然动画不生效。

// 渲染场景
function animate() {
	requestAnimationFrame(animate);
	TWEEN.update();
	renderer.render(scene, camera);
}
animate();