VRoid 的模型添增動畫並導入 ThreeJs 網頁
📅 發布時間: 2024-07-29 🏷️ 標籤: VRoid Studio, Mixamo, Blender, Three.js, GLTF, VRM, 3D 動畫
這篇教學介紹如何將 VRoid Studio 製作的 VRM 模型，透過 Blender 轉檔並使用 Mixamo 添加動畫，最終導入 Three.js 網頁中使用，讓你的自訂 Avatar 動起來！
文章大綱
這是一篇技術教學文章，你可以理解如何使用如何替 VRoid Studio 做出來的人物模型透過 mixamo 加上動畫，並且導入進 threejs 的網頁中。
背景故事
因為朋友最近在玩 VRoid Studio，順手丟給了我 VRoid Studio 的人物模型檔案 (vrm)。
而我目前也剛好在開發一項 3D 網頁案子(簡單講就是網頁版 VRChat)。
下意識的我決定嘗試能否把它變成玩家的 Avatar。
簡易爬文後，我使用了 three-vrm 這個套件也很順利的把東西載入進來。
正當我覺得沒有意外時，意外就來了。
圖：模型載入成功，但缺少動作
非常好看，也完美被讀入網頁當中，诶等等?動作呢?
仔細研究後發現 VRoid Studio 的動作是有版權的，不能隨意使用，這導致了我必須要用外部動畫檔。
實際操作
1. 開始 (VRoid)
首先我們會需要先使用 VRoid 設計出屬於你自己的 Avatar。
因為 VRoid 的操作相對簡單，而且並不是本文章所要討論的技術，所以我並不會講解 VRoid 的使用方式。
所以這邊我們假設各位已經設計好了屬於自己的 Avatar，請直接輸出 vrm 檔案。
圖：從 VRoid Studio 匯出 VRM 檔案
2. 轉檔 (Blender)
這邊我使用開源建模軟體 Blender 來進行轉檔與動作處理（因為他好用而且免費）。
首先請各位先都載好 Blender。
再來由於 Blender 原生是不支援 vrm 檔案的，好消息是由於 vrm 檔案跟 gltf 可說是攣生兄弟，更準確來說 vrm 就是 gltf 魔改過來得。
所以這邊你可以直接當我們剛剛的 Avatar 人物模型檔案的副檔名 vrm 直接改成 glb 檔案。
並且由 Blender 直接 import gltf 檔案。
圖：Blender 匯入轉檔後的 GLB 模型，顏色與結構完整保留
你會發現他幾乎完美的被引入進 Blender 裏頭，並且也能看到顏色。
3. 動作 (Mixamo)
在前一個步驟裏頭我們已經將人物模型引入進 Blender 裏頭了。
再來就是重頭戲，替我們的人物加上多個人物動作。
這邊我們使用 Adobe 所推出的人物動作網站，裏頭有大量被設計好的人物動作可以直接使用。
但這個網頁只允許讀 FBX 格式的檔案，沒事，問題不大，咱們可是有 Blender 呢!
這邊我們直接用 Blender 輸出 FBX 模型檔案。
設定上，保持默認設定即可。
直接輸出 FBX 檔案。
獲得 FBX 檔案後，直接打開 Mixamo。
在左上角的地方，應該會有 UPLOAD CHARCTER 的按鈕，點擊後會跳出以下畫面。
圖：Mixamo 上傳 FBX 檔案介面
這邊會花上一段時間來讀取。
順利的話，就可以看到我們可愛的人物模型了。
如果發現無法正常讀取人物的檔案，我的經驗是，重開 Blender 重開新的專案。
然後重新 import 人物模型檔案，再重新輸出 fbx 檔案，通常就好了。
原因不明，如果知道原因的歡迎私訊我 XD。
圖：Mixamo 成功載入模型，可選擇動畫
再來選擇我們要的人物動作，你可以一次找好幾個動作，並且將各個動作的檔案下載下來。
會建議將 skin 的設定設置為 Without Skin。
圖：下載動畫時選擇 Without Skin 選項
這邊我下載了 Walking 跟 Jump 兩個動作，各位可根據自己需求來做下載。
4. 合成動作 (Blender)
再來我們要將剛剛下載下來的兩個檔案融合進我們的人物中。
回到 Blender 並且透過 import fbx 檔案來直接 import 我們剛剛的動作檔案。
此時你會發現右上角出現了導入的模型檔案，但是只有骨架。
點擊上方的 Animation。
圖：Blender 切換至 Animation 工作區
下方時間表切換成 Action Editor。
圖：切換至 Action Editor 模式
點擊我們的人物模型（注意不要點到剛剛引入的動作骨架了）。
並且在點擊中下方的動作列表，而這裡將呈現"所有"的動作，也就是不管是不是這個角色的動作，都會被顯示在這個按鈕中。
你能在這裡發現我們剛剛引入的動作會被放置在這裡，名字可能很詭異叫做 "Armature.001|mixamo.com|Layer0"。
直接點擊，便能將這個動作強行套用在我們的人物模型上頭。
圖：從動作列表套用 Mixamo 動畫至模型
到這邊，我們就能把剛剛引入的動作模型檔案給直接移除掉了，我們再也不需要它了。
如果你有多個動作就重複以上行為：
- 引入動作模型 ->
- 切進 Animation 的 Action Editor ->
- 點擊人物 ->
- 點擊動作列表 ->
- 將剛剛引入的動作套用至人物上 ->
- 刪掉剛剛引入的動作模型
這邊我將兩個動作都套用至人物模型上了，並且命名成我所想要的名字，這個動作名字會直接呈現在 threejs 上頭，會影響到程式碼風格，務必注意。
圖：模型已套用多個命名動作
這邊直接輸出成 gltf 檔案即可。
圖：匯出 GLTF 檔案設定
5. 應用於 threejs 中
基本上直接用 GLTFLoader 讀取模型並引入即可。
但如果你是 react-three-fiber 使用者的話，應該會使用 gltfjsx 來將剛剛的人物模型檔直接轉成容易操作的 tsx 檔案。
這邊有個大坑務必注意閃躲。
雖然在使用 gltfjsx 檔案時我們習慣加上 --transform來壓縮檔案，但是千萬不要對人物模型做壓縮。
被壓縮後的人物模型檔案是無法使用SkeletonUtils.clone(scene)來做到角色複製。
原因不明，推測是 gltfjsx 的 bug。
結語
成果在這。
https://www.youtube.com/embed/HGRhBCZE1L4
最後工商一下我的個人網頁。
如果有問題歡迎私訊 My discord: @ray.realms