动画库 tween.js

tweenjs 创建 threejs 动画

引入安装

npm i @tweenjs/tween.js@^18

import TWEEN from "@tweenjs/tween.js";

基本使用

1. 改变模型位置

   //创建一段mesh平移的动画
   const tween = new TWEEN.Tween(mesh.position);
   //经过2000毫秒，pos对象的x和y属性分别从零变化为100、50
   tween.to({ x: 100, y: 50 }, 2000);
   //tween动画开始执行
   tween.start();

2. 模型缩放

   new TWEEN.Tween(mesh.scale).to({ x: 100, y: 50 }, 2000).start();

tweenjs 相机运动动画

相机位移

camera.position.set(202, 123, 125);
new TWEEN.Tween(camera.position).to({ x: 202, y: 123, z: 50 }, 3000).start();

渲染更新

import TWEEN from "@tweenjs/tween.js";
// 渲染循环
function render() {
  TWEEN.update();
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

相机位移过程中重新计算视线

camera.position.set(202, 123, 125);
camera.lookAt(0, 0, 0);
new TWEEN.Tween(camera.position)
  .to({ x: 202, y: 123, z: -350 }, 3000)
  // tweenjs改变参数对象的过程中，.onUpdate方法会被重复调用执行
  .onUpdate(function () {
    camera.lookAt(0, 0, 0);
  })
  .start();

Tweenjs 回调函数

twwenjs 库提供了多个用于控制动画执行的回调函数

• onStart：动画开始执行触发
• onUpdate：动画执行过程中，一直被调用执行
• onComplete：动画正常执行完触发

相机靠近观察设备

思路

1. 更改相机位置
   相机位置相对目标观察点，适当偏移，希望观察的范围大，就距离远一点，希望观察的设备显示效果大，就距离设备近一点。

   const A = model.getObjectByName("设备A标注");
   const pos = new THREE.Vector3();
   //获取三维场景中某个对象世界坐标
   A.getWorldPosition(pos);
   
   // 向量的x、y、z坐标分别在pos基础上增加30
   const pos2 = pos.clone().addScalar(30);

2. 更改相机观察目标
   相机的位置逐渐改变，相机的观察目标也逐渐改变

   //相机初始观察位置
   camera.lookAt(0, 0, 0);
   //最终观察目标位置
   const pos = new THREE.Vector3();
   A.getWorldPosition(pos); //获取三维场景中某个对象世界坐标
   camera.lookAt(pos.x, pos.y, pos.z);

中心视角调整

当相机靠近观察目标后，希望以当前观察目标作为世界中心坐标，可以在动画执行后调用.onComplete回调修改相机控件OrbitControls

.onComplete(function(obj){
    controls.target.set(obj.tx, obj.ty, obj.tz);
    controls.update();
})

缓动算法.easing

camera.position.set(3000, 3000, 3000);
camera.lookAt(0, 0, 0);

// 视觉效果：地球从小到大出现(透视投影相机远小近大投影规律)
new TWEEN.Tween(camera.position)
  .to({ x: 300, y: 300, z: 300 }, 3000)
  .start()
  .easing(TWEEN.Easing.Quadratic.Out); //使用二次缓动函数

语法格式

// easingFunc 缓动算法(运动效果)
// easingType 定义缓动算法起作用地方
tween.easing(TWEEN.Easing.easingFunc.easingType);

• easingType
  • In:加速启动
  • Out:减速刹车
  • InOut:同时