前言
在製作3D視覺化看板時,除了精細的模型結構外,炫酷的動畫效果也是必不可少的。無論是複雜的還是簡單的動畫效果,要實現100%的自然平滑都是具有挑戰性的工作。這涉及到物理引擎的計算和對動畫效果的數學建模分析。一般來說,只有專業的3D建模從業人員才能完成這項挑戰。然而,在實際情況下,當我們對動畫精細程度的要求不是特別高時,仍然可以藉助一些外部工具來實現一些常見的動畫效果,例如巡檢、移動和旋轉等。今天小編向大家介紹的工具就是Babylon.js中提供的動畫曲線編輯器。使用者只需要通過簡單的拖拽和點選操作,就能自定義設計想要的動畫效果,提升3D視覺化看板的視覺效果。(如下圖所示)
環境設定
要使用動畫曲線編輯器,就得先使用 Babylon Inspector,Babylon Inspector是 Babylon.js 提供的一個強大的模型檢查工具,不僅可以檢視模型網格物件的各種屬性,還可以提供 gizmo 工具來讓使用者手動拖拽縮放平移網格體,實現和3D模型的實時互動,除此之外,Babylon Inspector還具備動畫曲線編輯器等強大工具,讓使用者通過UI操作就能自定義設計動畫效果,下面是使用Babylon Inspector前需要了解和準備的一些環境設定:
1) babylon playground 站點 :這個站點提供了一個線上的 Babylon.js 程式碼執行環境,使用者可以在這個平臺上協同建立3D場景。
2) babylon sandbox 站點 :這個站點提供了一個線上的模型執行檢查環境,使用者可以在這個平臺上檢查自己的 模型檔案是否正常執行,引數設定是否如預期。
3)通過程式碼引入Babylon.js:
npm install @Babylon.js/core
npm install @Babylon.js/inspector
引入依賴包之後,需要指定對應的3D應用場景的Inspector檢視器:
import { Inspector } from "@Babylon.js/inspector";
function createScene(){
// create Babylon.js scene
}
動畫編輯器的操作指南
在使用動畫編輯器之前,小編向大家簡單介紹一下Babylon.js中的動畫。實際上,Babylon.js中的動畫是按順序執行的一系列靜態畫面。因此,只要瞭解每一幀模型物件的屬性值,就可以製作出對應的動畫效果。
動畫編輯器中修改模型屬性的兩種方法
第一種方法:選中一個模型物件,選擇右側物件的 Animations 屬性,點選 Editor 就可以新增或修改動畫。
第二種方法:選中一個模型的 AnimationGroup ,即可編輯 Group 中每個單獨動畫。
動畫編輯器的選單欄指南
(1)選擇左側的選單編輯列,點選編輯按鈕。
(2)然後就會進入到這個介面。
"+" 按鈕即為建立動畫按鈕,一個動畫編輯器中可以建立多個動畫,每個動畫中的選項如下:
(3)接下來我們再回到第一步,找到編輯器的控制面板。
其中按鈕分別是:
接下來的 5 個按鈕(下圖)都是用來控制 每個 關鍵 key 和前後幀 的 value 之間的變化關係,也就是關鍵 key 的左右切線:
(4)最後給大家介紹動畫播放面板
按鈕分別如下
第一幀和最後一幀
前一幀和後一幀
前一個關鍵key和後一個關鍵key
正放與倒放動畫
播放範圍,需要指定動畫開始和結束播放幀數
正常情況下,指定了動畫屬性值和播放模式之後,就可以點選建立 關鍵 key 來設定關鍵動畫值,一方面可以在 inspector 中手動拖動網格物件,讓新建key來獲取指定 value, 另一方面也可以在 動畫播放面板反覆檢視修改動畫屬性,製作好動畫之後,就可以使用儲存按鈕來將製作好的動畫匯入了。對於歷史動畫也可以通過匯入按鈕來對動畫做細節調整。
舉個例子:動畫操作實戰
下面小編將以一個繞場一週的動畫為例,給大家詳細介紹如何使用Babylon.js:
(1)首先需要獲取到總幀數,以及特定行為(轉向移動)的對應幀數。(這一步是動畫製作最重要的一步,總體上可以參考物理位移原理 位移 = 速度 * 時間 來合理設計幀數。)
獲取到物體運動的路線圖,記錄下每一個特殊(轉向移動)幀模型物件所在的座標(這裡可以使用Inspector 當中的座標拾取功能以及 位移 gizmo 工具來快速獲取)
給物體運動設定一個固定速度,比如每秒 2.5 個單位,使用座標算出來每個座標到座標的距離,然後除以時間,結果就是每個單獨路徑的耗時。
然後計算累計耗時
累計耗時乘以 預設 每秒渲染的幀數, 就可以得到最終的動畫幀資料了(切記不要忘了乘每秒幀數,預設每秒60幀)。
(2)接下來就要引入 Inspector 模組了,參考文章開始的 playground、sandbox或程式碼方式來引入 Inspetor, 引入後開啟動畫編輯器,新建動畫。
修改動畫播放範圍:
確定Y軸動畫:
然後按照「建立 新 key」 => 「設定新key frame value」 => 「播放動畫」的步驟來建立新key:
通過切線按鈕可以調整動畫之間的線性關係:
最後就是點選儲存按鈕,點選匯出成 file,程式碼如下所示:
// url 檔案方式
let animation = Animation.ParseFromFileAsync(null,urlPath)
// json hard-code
var json = animationJson; // 將動畫檔案內容寫死在程式碼裡
let animation = [Animation.Parse(animationJson[0])];
// 直接執行動畫,或者包裝成 animationGroup 來執行,後者封裝性更好;
let robot.animations= animation;
scene.beginAnimation(robot,0,8871,true);
// animatioinGroup
let robotAnimation = new BABYLON.AnimationGroup("robotAnim",scene);
robotAnimation.addTargetedAnimation(animations[0],robot);
robotAnimation.addTargetedAnimation(animations[1],robot);
robotAnimation.from = 0;
robotAnimation.to = 3120;
robotAnimation.start(true,1,robotAnimation.from,robotAnimation.to,false);
總結
以上便是使用動畫曲線編輯器來實現一個簡易動畫的全過程了,最後也上傳一份程式碼整合 Inspector 模組的範例,感興趣的小夥伴可以試試。 3D-Inspector.zip
擴充套件連結: