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