vue+three.js使用TWEEN 实现镜头飞跃，动画过渡。

在使用three时经常要涉及到摄像机位置调整，如果直接飞跃的话看起来就比较生硬，使用过渡动画就会看起来更加流畅，用户体验更好。在查阅资料后，决定使用tween来实现动画过渡。本文主要讲在vue中使用tween。

1,引入tween.js

在index.html中引入tween.js

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

?

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

2，定义一个全局函数，作为camera样式调整

方法：animateCamera(camera旧位置，controls旧target位置，camera新位置，controls新target位置，整个动画时长(单位：毫秒)，回调函数)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

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  中更新

?

1 2 3

try {　// 放在 TWEEN.js未加载完成导致报错     TWEEN.update();   } catch (error) {}

　搞定，以上是 camera 和 controls 的设置动画，更多动画可以自定义动画函数即可。　

 

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