---
title: 'VRoid Studio的模型添增動畫以及導入網頁THREEJS'
disqus: ray
---

該文章已移動至[新的網頁]( https://blog.ray-realms.com/article/4763da84-e8bd-4f64-a3b2-747c6f399733)了喔
===
為了更好的閱讀體驗與設計，已經技術文章皆轉移至我個人的網頁中
新網頁: https://blog.ray-realms.com/article/4763da84-e8bd-4f64-a3b2-747c6f399733
這篇 Hackmd 文章的內容已經過時
所有有關於該文章的更新都會更新在上述網頁中
請直接跳轉過去

<br />

<br />

<br />

<br />

### 背景故事
因為朋友最近在玩VRoid Studio，順手丟給了我VRoid Studio的人物模型檔案(vrm)
而我目前也剛好在開發一項3D網頁案子(簡單講就是網頁版VRChat)
下意識的我決定嘗試能否把它變成玩家的Avatar
透過Google使用了[https://github.com/pixiv/three-vrm](https://https://github.com/pixiv/three-vrm) 這個套件也很順利的把東西載入進來
正當我覺得沒有意外時 意外就來了

非常好看，也完美被讀入網頁當中，诶等等?動作呢?
仔細研究後發現VRoid Studio的動作是有版權的，不能隨意使用，這導致了我必須要用外部動畫檔

### Mixamo
通常來說要幫人物模型加上動畫絕大多數人想到的必定就是這個網站 [https://www.mixamo.com/](https://www.mixamo.com/)
做為Adobe免費供所有人使用的工具，絕對是節省成本最好的選擇
問題是這個網頁只吃FBX或者OBJ

### 轉檔
再轉檔的路上可說是一堆坑，我想再看這篇文章的人應該都是因為一堆坑才來看這篇文
基本上我最後的解法是
由於vrm跟gltf可說是攣生兄弟，更準確來說vrm就是gltf魔改過來得
這也導致了你直接把附檔名vrm改成glb，電腦依舊能讀取其模型檔
這邊我們使用優質開源好軟體**Blender**導入被改附檔名的模型檔案
果然Blender直接能讀取

非常好，很多人在這一步就會直接轉檔FBX
但是我這邊做了一個小轉彎
我先讓Blender輸出一個新的glb檔案
畢竟原本的檔案終究還是vrm 存在太多跟glb無關的東西了

我們重開blender並引入剛剛輸出的glb檔案
在輸出FBX檔案，終於!!!!
而且這個FBX是可以被順利被Mixamo讀取的
((附註 有時候Mixamo無法讀取是因為模型轉向錯誤
修正輸出時的轉向有時能改正該問題

### 重新上色
尷尬的事情發生了，這個輸出的FBX居然完全沒有顏色
我研究了很長一段時間後發現似乎是因為GLTF跟FBX兩個格式在材質儲存格式似乎是天差地別的
無法直接轉用
那也沒沒辦法，至少材質球還在，只是材質球的圖片跑掉
牙一咬，重新放上圖片即可

我們先用Blender打開gltf的模型檔案，從這裏頭下載所有圖片
圖片可透過下面的選項下載

很漂亮的她把所有圖片解壓縮出來了

再來用Blender打開fbx的模型檔案並重新將每一張圖片拖回他該去的材質球上
誰該拖到誰身上可以看gltf的blender檔案來一一對照((本人我雙螢幕，雙開Blender對我來還蠻快的

然後就可以輸出成FBX，也終於他有材質了!!!!

### 完成
再來丟進Mixamo來套入動作
最後ThreeJS用官方給的FBXLoader讀取就完成了

值得一提的是我原本沒材質的FBX可以被Mixamo讀取 加上材質反而不行了，不知道為啥
不過由於沒材質的FBX的骨架跟 有材質的骨架相同，所以我這邊直接用沒材質的FBX來產生動畫
再把動畫模型導入進有材質的FBX中，And it work!!

成果在這
{%youtube HGRhBCZE1L4 %}

**如果有問題歡迎私訊My discord: @Ray.#2879**