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);

    },