３DモデルをBlenderで.pmxから.fbx形式に変換しUnityで動かすまで

#はじめに
この記事は [法政大学情報科学部 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/cis_hosei) の21日目の記事です。
どうもこんちにちは、HirokiLuckyです！
今回は初投稿ということで、大好きなUnityに関する投稿をしたいと思いまーす

さて、Unityで３Dモデルを使いたいと思った時に、__拡張子が違くて困った経験はありませんか？__
Unityでは.fbx形式にモデルを変換しなければいけないため正直面倒くさいです。
私は前に原神の３Dモデルを使わせていただこうと思ったときに、.pmx形式のモデルだったので様々な記事を参考にして何とか使えるようにしたことを覚えています...
（MMDからの拡張子変換に関するの文献はあるのにBlenderのはあんまりなくないですか？）
今回はその時の苦労をこの記事にまとめたいと思います。

#モデルのダウンロード
モデルをダウンロードしてくる。今回私は原神のモデルをダウンロードして進めていきます。
原神のモデルは[公式](https://genshin.mihoyo.com/ja/news/detail/5885)でも配布されていますが、[bilibili](https://3d-arts.misanyan.com/5844)（まとめサイトに飛びます）で多くのモデルが配布されています！
※bilibiliを利用する場合は上記先よりモデルのバージョンのURLに飛び、「模型下裁」のような場所でダウンロードすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/7722b084-7a58-a201-6d6e-85e53c46805c.png)↑公式ダウンロードページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/3589c5ff-1193-432d-3f34-8f95ec5c828d.png)
↑bilibiliダウンロードページ

#Blenderで拡張子を変換しよう
zipファイルをダウンロードして解凍（フォルダ先の指定などはありません）出来たらBlenderで変換していきましょう！

ここで行うことをあげると、

1. アドオン「mmd_tools」を追加する
2. インポートし、テクスチャを貼り付け直す
3. 拡張子変換する

##アドオン「mmd_tools」を追加する
Blenderでモデルをインポートしたくても__初期設定のBlenderでは.pmx形式をインポートすることができない__ので.pmx形式をインポートできるようにするアドオンを追加していきましょう。

__[GitHub](https://github.com/powroupi/blender_mmd_tools) ＞ Code ＞ Download ZIP__

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/bed7a684-112a-2719-0b3d-a6b37e87eb2a.png)


この順番でmmd_toolsのzipファイルをダウンロードし、解凍しましょう。
次に、この解凍したフォルダを、

～ __\blender\2.90\scripts\addons__

の下に配置しましょう。
これだけではまだ__有効化されていない場合がある__ので、Blender側でも有効化していきましょう。

__Blenderを起動 ＞ 編集 ＞ preferences...__

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/72066ba3-2a7d-c8bf-c47b-8e34fbb22557.png)


この順番で「Blenderプリファレンス」を展開しましょう。

__Object: mmd_tools__　にチェックを付けて有効化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/955052bd-7749-239f-b672-9bad12d9fdf9.png)

さて、インポートできるようになっているか確認してみましょう

__ファイル ＞ インポート ＞ MikuMikuDance Model(.pmd, .pmx)__

MikuMikuDance Model(.pmd, .pmx) が追加されていたら成功です！


##インポートし、テクスチャを貼り付け直す
それでは！モデルをインポートしてみましょう！

__ファイル ＞ インポート ＞ MikuMikuDance Model(.pmd, .pmx)__

から、先ほどダウンロードした.pmx形式のモデルをインポートしてみましょう。
今回私はディルックを使わせていただきました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/f3798aac-349a-a00b-baf0-00b4cc581da2.png)

おお！すげえ。でもこれだけじゃ物足りねえよなあ！ということで、テクスチャが貼られているか確認しましょう！
下記の図より、__右上にある４つの○の内、右から2番目を選択__してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/5af5298f-5633-2e35-3a83-3d5137be088a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/dc955bc4-bbcd-dab3-1a74-abd32a30f390.png)

色がつきましたね！
でも、顔にテクスチャが張られていませんね...（ピンク紫のようになっているところ）
配布先などによるのですが、テクスチャの参照が上手くできる場合とできない場合があります。
今回は貼り付けられていない場所があるので貼り付けていきましょう！

__モデルを選択（クリック）、オレンジ色の枠が出るようにしましょう。__

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/63461fd8-b260-8989-af0e-588313d43b3a.png)

次に右のマテリアルプロパティを選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/be02394b-fa10-c320-2e6f-6ffab7b338d2.png)

すると、現在貼られているテクスチャが表示されます（瞼、眼白、眼晴みたいなのがあるとこ）。
※表示されていない場合は、上の画像の▶プレビューの上のマテリアルテクスチャと同じマークを選択してみてください。
上の画像だと瞼、眼白にテクスチャが張られていないようです（ピンク紫だからです）。
そのテクスチャを選択した状態で下にスライドしていくと __MMD Texture__ という項目があります。その中の __Texture__ に正しいテクスチャを追加します。
また追加してもピンク紫の場合は MMD Texture 項目の一番下にある「__Use Shared to...__」という項目にチェックが入っている場合があるので、チェックを外してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/9959ddc1-4350-d904-bc5d-479b96c9a0ff.png)

すると...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/6b43fa90-8021-d4da-b72d-e82ed068aad3.png)

でも、まだボーン（四角錐みたいなやつ）が邪魔？安心してください。消せますよ！
モデルによって名前は違いますが、体のようなマークがついていたりするものの一番右にある目のマークをクリックしてみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/e73aa61b-78ab-ff7d-9638-d06e4f4a1203.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/98cfffc8-87d6-4647-bf04-c7eeae0c1f3d.png)
WRYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY！！！！！！

##拡張子を変換しよう
さて、拡張子変換はいたって簡単です、パパっと拡張子変換をしちゃいましょう！

__ファイル ＞ エクスポート ＞ FBX(.fbx)__

フォルダ選択まで来たら右にオブジェクトタイプを選ぶところがあるので、いらないところは省いちゃいましょう！カメラ、ランプは必要ではないと思いますが、__最低限アーマチュアとメッシュは選択__しておきましょう。
※複数選択する場合はshiftを押しながら選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/c491c6c9-b537-19b7-7362-6a4eaf05823c.png)

__（適当なフォルダ）＞ FBXをエクスポート__

.fbx形式のモデルが出力されたか確認できたら成功です！

#Unityでモデルを動かせるようにしよう
.fbx形式のモデルを作れたら、Unityにモデルを入れてみましょう！
__.fbxファイルとテクスチャ情報が入っているフォルダ__をprojectの中にドラック＆ドロップしてモデルをいれてください
※テクスチャ情報が入っているフォルダは後で使いますので必ず入れましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/3af3f5fd-7b44-96d2-1733-b84d8c470053.png)

そしてScene内に、今入れたモデルをドラック＆ドロップして入れてみましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/d7c75a24-b66d-1ad1-77bb-0c3b17e34a30.png)

なんか、緑とか水色のものがある...
これらは手のパーツなどで判定する際などに必要なものなのですが見えなくすることができます。
左のヒエラルキー内にある、今入れたモデルの▶を展開してみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/fcdf5bef-3ef8-39c7-f206-0730a542e71a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/91abf329-346f-bc7b-3b41-adfc967ee0b1.png)


かなりの部品からなっていますね...
今回の場合、000_上半身～069_bz_6_1（__armとmesh以外__）を選択し、
インスペクター上部の__チェックを外しましょう__
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/7e2137c6-ba70-f054-6502-8bde42a46434.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/392d2183-75ba-7540-808c-8deda5037a23.png)

これでちゃんとモデルが見えるようになりました！
さて、準備はできたのでやることを挙げていきます

・テクスチャを貼り付けよう
・Rigを設定する

##テクスチャを貼り付けよう

※Unityでのテクスチャの貼り付け方は私の自己流ですので、他も調べてみると良きかもです。

Unityで使うためために.fbxにしましたが、テクスチャはそのまま持ってこれないようです。
なので、Unity内でもテクスチャを貼り付けましょう。
先ほど__Projectに入れたモデル__を選択するとモデルのインスペクターが右に出ます。
Materialsからテクスチャをそれぞれ入れていきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/4e47eee1-fa4f-0a53-3fc7-b105971d4897.png)

手作業で入れても良いですが、せっかくなので自動で入れてみましょう。
__Locationが「Use Embedded Materials」__となっていることを確認し、
__Materialsの「Extract Materials」__をクリックしてみましょう。
その後、__モデルのテクスチャをまとめてあるフォルダを選択__すると、テクスチャが入っている！？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/a0d5a6d0-b12d-95e8-bb95-1eaf524f6d98.png)

しかし、先ほど選んだテクスチャフォルダを見てみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/bf42cb06-39d0-c6f9-55d8-0d3a911243f0.png)

先ほど追加されたテクスチャはどうやらこのフォルダに追加され、
.fbxにした時にデフォルトで真っ白になってしまうみたいですね...
真っ白になってしまったなら、また設定すればいいわけです！（簡単なのでご安心ください）

真っ白になってしまったテクスチャを選び、インスペクターを表示しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/0e9eca83-368d-786c-29e5-c8806450c39a.png)
上の画像で赤で囲まれた部分に注目してみましょう。
__実はここに画像を入れられるんです！__
ということで、テクスチャ画像をそれぞれに入れていきましょう！
どの画像？と詰まったらBlenderを参考にするとどれがどれかが分かりやすいです
※キャラクター等によりますが、Detail Albedo x2にベースとなる画像をいれ、Normal Mapには影などのテクスチャを入れるようです。

試しに衣服を入れると、しっかり色がついていますね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/58116865-0b89-6295-edc2-4637c651b0f0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/2b55b2ce-9e86-9f1e-0874-1cedb0255dad.png)

全て適用してみるとちゃんと全体塗れていますねえ！

##Rigを設定する
さて、やっと動かすための設定を行う時が来ました！！
では早速、モデルのマテリアルを設定したインスペクターを開き「__Rig__」というタグに移動します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/601679b0-98a1-21bd-85fe-6216e2128df9.png)

__Animation Type　を　humanoid　に変更__し、Apply　を押し変更を適用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/bf89383e-e9e4-a427-e6f5-46f8487cbcfb.png)

適用後エラーが発生する場合がありますが、ここでは気にしなくて大丈夫です。
「__Configure__」を選択し、下の画像のような画面に遷移します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/382e0bef-5f9a-9ae3-03bb-3cb20a7e54de.png)

それではまずインスペクター（右側にあるやつ）から修正していきましょう。
ここでは、どの部分がどのパーツと対応しているかを示すのですが抜けていたり、赤くエラーを吐いていることが大半なので、正しいパーツを入れていきましょう。
※キャラなどによってもうできあがっている場合があります。その場合は飛ばしても大丈夫です。私の環境では原神の万葉のモデルは最初から出来上がっていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/2ab3c198-eb4a-0dda-e5cf-7cebcce6e2c6.png)
上の画像のようにエラーは吐いていなくても間違っている場合（人差指と親指が逆）や左右対称のパーツを配置することに気を付けてください。また変更後は Apply することをお忘れなきよう

---

原神のモデルを使用している場合、下記のように配置してみました（中国語ワカラナイ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/7416f2a8-ed0e-7211-2821-f40b73cdf117.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/4da6af6c-ebf6-9725-38fb-e04ae03c8fc2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/230c63a7-80f8-6bca-21b7-3d8ea14b2297.png)

---

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/0b058a35-711a-7063-03c2-56b3aa37bca2.png)

それでは次は左側です。異常なほどエラー吐いているのですが何時間かかるんでしょうかねえ。
とりあえず騙されたと思って、先ほど直していたインスペクターの下のほうにある 
__Pose ＞ Enforce T-Pose__ 　に設定してみて下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/c4b5e827-ab5d-2e3b-0194-e37420fe900b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/248af61a-fc5b-ca43-39e0-f97f076f7343.png)

なんということでしょう！エラーが綺麗になくなりました！
では Apply 後に Done で終了していきましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/dc093473-ebd0-12d2-d7ed-c05152638b41.png)

エラーも消えていますね！
ここまで来たらもうモデルの設定は終了です！お疲れ様でした！

#モデルを動かしてみよう
では、最後にモデルを動かしてみましょう！
今回私が使うのは、[unity-chan!](https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705) を使います。もっとも基本的で無料かつモデルを動かすのに必要なものが全て入っているので、モデルを動かすテストのみなら十分だと思います！オススメです

アセットをパッケージマネージャでダウンロード、インポートできたら早速使ってみましょう！
モデルを動かす際に最低限必要と言われているのが、Locomotion、モデル、スクリプトの３つと言われています。
モデルは今までのものを使うとして、Locomotionはどのように状態が遷移をするか示したものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/d55274fa-6bae-3240-7be0-d4ec366a10f6.png)

unity-chan!では、
__Asset ＞ unity-chan! ＞ unity-chan!Model ＞ Art ＞ Animations ＞ Animators__　に入っています

いくつかありますが、上の画像のものを使用するとWASD（デフォでは矢印だけだったかも...）で動きます。
これをインスペクター内の __Animator ＞ Controller__ に指定することで Locomotion を設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/53ac8f11-c9bf-5764-8340-d3fd0f17ac50.png)

スクリプトですが、これは○○キーを押したら○○の値が変わるなどを（もちろん他にもたくさん書いていますが...）書いています。

unity-chan!では、
__Asset ＞ unity-chan! ＞ unity-chan!Model ＞ Scripts__ に入っています。
今回は Unity Chan Control Script With Rigit Body を使っています。
これをコンポーネントとして追加してあげましょう。（ただドラック＆7ドロップするだけです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/ce8ba819-d063-c11d-4a2f-5b7cc3533871.png)

---
RigitBody を入れている場合、念のため Mass（質量）をある程度人間の体重くらいにしておき、
__Freeze Rotation にチェックを入れておきましょう。__
※ここにチェックを入れない場合、ちょっとのことでモデルが回転し宙を舞ったりします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/ef37043c-489a-3242-50b9-b14bdc0f732e.png)

またカメラはモデルが見やすいように各自で設定してください

以上で実行をしてみると...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2343661/99e58f8e-f960-97f4-6e7f-db7a0d956f84.png)

動きましたあああああああああああああああああああああ！
おつかれさまでしたあああああああああああああああああ！

#おわりに
ここまで読んでくださった方、本当にお疲れ様でした！そして何よりありがとうございました！
割と長い説明にはなってしまいましたがモデルは動かせるようになったでしょうか...
それでは楽しいUnity開発ライフをっ！！！
書いてて楽しかったので、また新しいの書くかも...


参考文献：
[bilibiliモデルダウンロードまとめサイト](https://3d-arts.misanyan.com/5844)
[bilibiliモデルダウンロード](https://www.bilibili.com/blackboard/activity-kiOl0D1nF8.html)
[公式モデルダウンロード](https://genshin.mihoyo.com/ja/news/detail/5885)
[mmd_tools](https://github.com/powroupi/blender_mmd_tools)
[unity-chan!](https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705)