この記事ではVRMモデルをSTYLYにアップロードする手順を紹介します。
記事内の【STYLY VRoid 配布プラグイン】を活用していただくことによって、簡略化されます。
プラグインの追加
VRMをSTYLYにアップロードするために「Unity」と「STYLY」を連携させていきます。
※まだSTYLYアカウントの作成・Unityをダウンロードされていない方は、下記記事を参考に準備をお願いします!
UniVRMを入手
VRM公式サイトのDownload(https://github.com/dwango/UniVRM/releases)から最新のUniVRM(UnityでVRMを扱えるようにするプラグイン)を入手してください。
ダウンロードしたunitypackageファイルをダブルクリックして、Unityへ「Import」してください。
![w17 - STYLY UniVRM ダウンロード画面](https://styly.cc/wp-content/uploads/2019/09/w17.jpg)
UniVRM ダウンロード画面
UNITY PLUGIN FOR STYLYを入手
STYLY公式サイト(https://styly.cc/ja/download/)を開いて、ページを以下の画像の所までスクロールして、緑色の「DOWNLOAD」をクリックしてください。
![w18 - STYLY UNITY PLUGIN FOR STYLY ダウンロード画面](https://styly.cc/wp-content/uploads/2019/09/w18.jpg)
UNITY PLUGIN FOR STYLY ダウンロード画面
ダウンロードしたunitypackageファイルをダブルクリックして、Unityへインポートしてください。
![5b - STYLY UNITY PLUGIN FOR STYLYをUnityへインポート](https://styly.cc/wp-content/uploads/2018/09/5b-1.png)
UNITY PLUGIN FOR STYLYをUnityへインポート
Unityに戻り、画面上側の①「STYLY>Asset Uploader Settings」をクリックして、②「Get STYLY API Key」をクリックするとブラウザでAPI KeyとEmailが表示されるので、③の入力欄にコピー&ペーストしてください。
![5c - STYLY Unity 画面 API KeyとEmailを設定](https://styly.cc/wp-content/uploads/2018/09/5c.png)
Unity 画面 API KeyとEmailを設定
VRMをUnityへインポート
▲上記リンクを開き「UnityEditor-AddAnimationToModel-v0.9.1.unitypackage」 (VRMモデルをSTYLYへアップロードさせるためのプラグイン)をダウンロードします。
※前回配布プラグインにてmacでうまく処理できない問題が発生したため修正したプラグインに変更しました。(2019.09.26)
![新規キャンバス - STYLY UnityEditor-AddAnimationToModel-v0.9.1.unitypackage ダウンロード画面](https://styly.cc/wp-content/uploads/2019/09/新規キャンバス.jpg)
UnityEditor-AddAnimationToModel-v0.9.1.unitypackage ダウンロード画面
ダウンロードが完了した.unitypackageをダブルクリックでImportします。
![w1.5 - STYLY 「Import」を選択します](https://styly.cc/wp-content/uploads/2019/09/w1.5.jpg)
「Import」を選択します
Importが成功すると「Assets」内にフォルダが3つ表示されます。
また、画面上側のメニューバーに「VRM」「STYLY」「VRoid2STYLY」が追加されていることが確認できます。
![w1 - STYLY Unity Assets内](https://styly.cc/wp-content/uploads/2019/09/w1.jpg)
Unity Assets内
![w2 - STYLY Unity画面上側のメニューバー](https://styly.cc/wp-content/uploads/2019/09/w2.jpg)
Unity画面上側のメニューバー
VRMモデルのImport
画面上側の「VRoid2STYLY>Import」をクリックして、お持ちの【.vrmモデル】を選択し、Importします。
![w3 - STYLY .vrmモデルを選択し、Importします](https://styly.cc/wp-content/uploads/2019/09/w3.jpg)
.vrmモデルを選択し、Importします
※この時点ではダウンロードが完了してもモデルが表示されていないかと思いますが問題ありません!
次にモデルにモーションをつけていきます。
画面上側の「VRoid2STYLY>Select Animation」をクリックして、
![w6 - STYLY VRoid2STYLY → Select Animationを選択](https://styly.cc/wp-content/uploads/2019/09/w6.jpg)
VRoid2STYLY → Select Animationを選択
・Famale Standing Pose (普通の立ちポーズ:動きなし)
・Idle (普通の立ちポーズ:動きあり)
・Thinking(腰に手をあてて考えるポーズ)
・Walking(その場ウォーキング)
の中から好きなモーションを選択し、「OK」を選択します。
![w7 - STYLY Female Standing Poseを選択して OKボタンをクリック](https://styly.cc/wp-content/uploads/2019/09/w7-1.jpg)
Female Standing Poseを選択して OKボタンをクリック
モーションを選択すると「Scene」画面にモデルが現れます。
![w8 - STYLY モーションを設定するとScene内にモデルが表示されるようになります。](https://styly.cc/wp-content/uploads/2019/09/w8.jpg)
モーションを設定するとScene内にモデルが表示されるようになります。
このモデルは先ほど選択したモーションがくっついた状態のものとなっています。
動きが反映されているか確認してみましょう。
画面中央の「▶」再生ボタンをクリックします。
![w9 - STYLY 再生ボタンをクリック](https://styly.cc/wp-content/uploads/2019/09/w9.jpg)
再生ボタンをクリック
![ok - STYLY STYLYちゃん 動作成功](https://styly.cc/wp-content/uploads/2019/09/ok.gif)
STYLYちゃん 動作成功
動きが確認できました!✨
※確認が完了したらもう一度「▶」をクリックして動きを止めておいてください。
これでモデルをアップロードする準備が完了しました!いよいよモデルをSTYLYにアップロードしていきます。
VRMモデルをSTYLYにアップロード
「Hierarchy」内の「My Model(Clone)」を「Assets」内の何もないところへドラッグ&ドロップします。
![w10 - STYLY 「My Model(Clone)」を「Assets」内の何もないところへドラッグ&ドロップ](https://styly.cc/wp-content/uploads/2019/09/w10.jpg)
「My Model(Clone)」を「Assets」内の何もないところへドラッグ&ドロップ
Assets内に持ってきた「My Model(Clone)」を右クリックして「STYLY>Upload Prefab scene to STYLY」をクリックします。
![w11 - STYLY もってきたモデルを右クリックして「STYLY>Upload Prefab scene to STYLY」](https://styly.cc/wp-content/uploads/2019/09/w11.jpg)
もってきたモデルを右クリックして「STYLY>Upload Prefab scene to STYLY」
アップロードが開始されます。※しばらく時間がかかります。
![w12 - STYLY モデルのアップロードにはすこし時間がかかります。](https://styly.cc/wp-content/uploads/2019/09/w12.jpg)
モデルのアップロードにはすこし時間がかかります。
アップロードがうまくいくと、「Upload succeeded .」と表示されます!??
![新規キャンバス4 - STYLY VRMモデルのアップロード完了!](https://styly.cc/wp-content/uploads/2019/09/新規キャンバス4-1.jpg)
VRMモデルのアップロード完了!
これでVRoidモデルをモーション付きでSTYLYにアップすることができました☺✨
アップロードしたVRMモデルをSTYLYで配置する
STYLY Editorを開いて、画面左上の「写真アイコン」(Assets)をクリックします。
![w15 - STYLY 左から2番目の「写真アイコン」をクリック](https://styly.cc/wp-content/uploads/2019/09/w15.jpg)
左から2番目の「写真アイコン」をクリック
![w13 - STYLY 左上の「3D Models」をクリック](https://styly.cc/wp-content/uploads/2019/09/w13.jpg)
左上の「3D Models」をクリック
次に「3D Model」を選択します。
「My Models」タブにアップロードしたモデルが追加されているのでクリックします。
![w14 - STYLY](https://styly.cc/wp-content/uploads/2019/09/w14.jpg)
アップロードしたモデルを選択
モデルが配置されるので位置などを調整して完成です!
![ok1 - STYLY STYLYにモーション付きVRMモデルを配置](https://styly.cc/wp-content/uploads/2019/09/ok1.gif)
STYLYにモーション付きVRMモデルを配置
手順は以上となります!お疲れさまでした!✨
さらに+@、「自身で用意したモーションをつけたい」、「まばたきさせたい」などありましたらこちらの記事をご参考ください!