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 的设置动画，更多动画可以自定义动画函数即可。　

 

！！！！！！如果适用帮忙点个赞！！！！！！ヾ(◍°∇°◍)ﾉﾞ