vue+three.js使用TWEEN 實現鏡頭飛躍,動畫過渡。
阿新 • • 發佈:2021-06-15
在使用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 的設定動畫,更多動畫可以自定義動畫函式即可。