vue+three.js使用TWEEN 實現鏡頭飛躍，動畫過渡。

在使用three時經常要涉及到攝像機位置調整，如果直接飛躍的話看起來就比較生硬，使用過渡動畫就會看起來更加流暢，用戶體驗更好。在查閱資料后，決定使用tween來實現動畫過渡。本文主要講在vue中使用tween。

1,引入tween.js

在index.html中引入tween.js

http://www.createjs.cc/tweenjs/

<script src="../3dplane/js/Tween.min.js"></script>

2，定義一個全局函數，作為camera樣式調整

方法：animateCamera(camera舊位置，controls舊target位置，camera新位置，controls新target位置，整個動畫時長(單位：毫秒)，回調函數)

animateCamera(oldP, oldT, newP, newT, time, callBack) {
      var _this = this;
      if (TWEEN) {
        var tween = new TWEEN.Tween({
          x1: oldP.x, // 相機x
          y1: oldP.y, // 相機y
          z1: oldP.z, // 相機z
          x2: oldT.x, // 控制點的中心點x
          y2: oldT.y, // 控制點的中心點y
          z2: oldT.z, // 控制點的中心點z
        });
        tween.to(
          {
            x1: newP.x,
            y1: newP.y,
            z1: newP.z,
            x2: newT.x,
            y2: newT.y,
            z2: newT.z,
          },
          time
        );
        tween.onUpdate(function () {
          _this.camera.position.x = this.x1;
          _this.camera.position.y = this.y1;
          _this.camera.position.z = this.z1;
          _this.controls.target.x = this.x2;
          _this.controls.target.y = this.y2;
          _this.controls.target.z = this.z2;
          _this.controls.update();
        });
        tween.onComplete(function () {
          _this.controls.enabled = true;
          callBack && callBack();
        });
        tween.easing(TWEEN.Easing.Cubic.InOut);
        tween.start();
      }
    },

3，在  animate  中更新

　　　 try {　// 放在 TWEEN.js未加載完成導致報錯
        TWEEN.update();
      } catch (error) {}

　搞定，以上是 camera 和 controls 的設置動畫，更多動畫可以自定義動畫函數即可。　

 

！！！！！！如果適用幫忙點個贊！！！！！！ヾ(◍°∇°◍)ﾉﾞ