VroidモデルをWebARで動かしたかった
しかし！ Vroidの仕様にはアニメーションが含まれないのである！！
事前調査
JavaScriptとHTMLとCSSはある程度書けますが、3Dアニメーションは全くの未経験です。Blenderで１０年くらい前に挫折した記憶がある程度です。まず筆者はそのレベルの人ってことで・・・。
VroidをWebARに持ち込む場合、
という手順が主に見つかりました。
Blenderの使い方自体はユーザーが多いために見つかりやすいですので、わりとハードルは低いといえます。
参考サイト
問題点
これの問題点として最も大きいのは、gltfへの変換時にシェーダー情報が消える（three.jsでプリンシパルBSDFしか読み込めない）ため、モデルのルックが大きく変わってしまうことです。
また、せっかく作ったアニメーションを別のモデルに適用するのが面倒という問題もあります。違うキャラに同じ動きさせたいですよね。そもそもそのためのVroid(vrm)です。
試行錯誤の結果、次に示すフローがよさそうという結論に至りました。
VroidモデルをWebVRで使う
目指す要件
- Vroidモデル（vrm）は無加工で持ち込めること
- アニメーションの再利用が可能なこと
- できるだけ簡単に実装できること
手順
次の手順で動かします。
- three-vrmでvrmモデルを読み込む
- Blender等でつけたHumanoid形式のアニメーションを、次のサイトでJSON形式に変換する
- アニメーションについては、MixamoでつけてもOK
- three.js上でJSONを読み込んでアニメーションを再生する
（手順1） three-vrmでvrmモデルを読み込む
これは公式githubのガイドに従って導入してください
（手順2） アニメーションをJSONへ
これもサイトを見てみるとなんとなくわかります。fbx形式で持ち込んでください。
Unityで作ったモーションも読み込めるらしいですが試してないです。
three.js で VRM を表示する (3) - Unityからのアニメーションのエクスポート｜npaka｜note
さて、アニメーションの付け方についていくつか私のトライアンドエラーを残しておきます。
Blenderでキーフレームを打って、そのクォータニオン値をthree.jsのキーフレームにベタ移植（コピペ）する
面倒だけど確実でとりあえず楽か～？と思いましたが、全然ダメでした。どうも各ポイントの軸の付け方が違うっぽい
VRM はローカル軸の方向を破棄すべきでない - Qiita
シェイプアニメーションはJSONで読み込めない
例えば口パクとか表情のことですね。JSONで読み込む機構がないのでアニメーションしたければ自分で実装する必要があります。
アニメーションの切り替え
なんかうまくいかない 実装（後述）がポンコツだと思うので助けてください！！
（手順3） three.jsでJSONを読み込む
three.jsでは、アニメーションのキーフレーム(animationClip)を集めたJSONをインポート・エクスポートできます。これ(setAnimation)を使って読み込ませます。
で結局あなたの実装は？
激ダサ実装ですがこんな感じ。ファイル読み込みのURLとか自分のレンタルサーバ直接指定してたりするのがﾃﾞﾝｼﾞｬｰですけどまあ。
github.comthree.jsでイチからモデルを読み込むのはまあまあ面倒なので、a-frameでラッパしています。a-frameは内部でthree.jsを使用しているので、vrmのモデルの取り扱いはthree.jsに準じて書いています。
vrm-model-module.js内のAFRAME.registerComponent～～のところですね。中でthree.jsの形で書いています。
また、アニメーションもイチから作るのが面倒だったのでMixamoでいい感じにつながるように切り出してループ再生させています。
なおこれはマジカルミライプログラミングコンテストに出しましたが落ちました。パワフル実装過ぎたのとミクさんである必要ある？ってところが敗因な気がします。
（というか去年までより入選作品のレベル高いですよねなんか・・・ 昨年は１位に選ばれたのはこれだろうなって予想できますけど今年はわからんな・・・）
なんか思い出したら追記します。
