web3d-three.js场景设计器-模型平滑移动-TWEEN.js

• THREE.js中通过直接改模型的位置或者角度可以实现变现的效果，但是如果幅度过大有瞬移的感觉，不是那么自然。
• Tween动画是一种非线性的时间序列插值技术，它被广泛应用于平滑地改变3D对象的各种属性，例如位置、旋转、缩放等。TWEEN库并不是three.js核心库的一部分，但通常与three.js配合使用来实现复杂的动画效果。
• 1.three @tweenjs/tween.js? ?安装依赖
• 2.引入 import TWEEN from "@tweenjs/tween.js";
• 3.??

  ? ? /**

  ? ? ?*

  ? ? ?* @param {模型} object3d

  ? ? ?* @param {转换值} transform

  ? ? ?* @param {时间} duration

  ? ? ?* @param {完成回调函数} callback

  ? ? ?* @param {模式} easing

  ? ? ?*/

  ? ? transformObject(object3d, transform, duration, callback, easing) {

  ? ? ? if(!object3d){

  ? ? ? ? return;

  ? ? ? }

  ? // 创建一个新的Tween对象

  ? let tween = new TWEEN.Tween(object3d).to(transform, duration)

  ? ? .onUpdate((r,n)=> {

  ? ? ? if(transform.position) {

  ? ? ? ?// 模型变化后的处理

  ? ? ? }

  ? ? ? if(transform.scale) {

  ? ? ? ?

  ? ? ? }

  ? ? ? if(transform.rotation) {

  ? ? ? ?

  ? ? ? }

  ? ? })

  ? ? .easing(easing || TWEEN.Easing.Quadratic.InOut)

  ? ? .onComplete(callback)

  ? ? .start();

  }

? ?

在更新动画中加入动画刷新。

?render(time) {

? ? ? // 每一帧都需要更新控制器和渲染器

? ? ? this.controls.update();

? ? ? this.renderer.render(this.scene, this.camera);

? ? ? if(isUpdateTween){

? ? ? TWEEN.update(time);

? ? ? }

? ? ? // 请求下一帧动画

? ? ? this.animationId = requestAnimationFrame(this.render);

? ? },