シーン上での利用（Web）
最終更新： 2024年5月30日
Cubism SDK MotionSync Plugin for Webを使って Cubismモデルに結びつけられたモーションシンクを利用する方法です。
モデルの準備
.motionsync3.jsonと .motionsync3.jsonの参照が記載されている .model3.jsonを持つモデルを用意します。
Cubism 4.2以前のモデルを対象とする場合は 「Cubism 4.2以前向けのモデルで利用する」 をご覧になっていただき、モデルデータを用意してください。
プロジェクトの設定
Cubism SDK for Webと同じ階層に、展開したCubism SDK MotionSync Plugin for Webを配置します。
注意事項
Cubism SDK MotionSync Plugin for Webは、MotionSync Coreを使用する必要があります。 これはGitHubで公開しているCubismWebMotionSyncComponentsには含まれません。 そのため、GitHubからリポジトリだけ取得しても実行できません。 公式サイトからダウンロードしたCubism SDK MotionSync Plugin for Webのパッケージを使用するか、CubismWebMotionSyncComponentsにCubism SDK MotionSync Plugin for Webのパッケージ内のMotionSync Coreを追加してください。 配置する階層はCubism SDK MotionSync Plugin for Webと同じです。
また、同様にCubism SDK for Webに同梱されているCubism Coreも使用するため、公式サイトからダウンロードしたCubism SDK for Webのパッケージを使用する、またはGitHubで公開しているCubismWebSamplesにCubism SDK for Web同梱のライブラリを追加してください。 配置する階層はCubism SDK for Webと同じです。
TIPS
Cubism SDK MotionSync Plugin for Webは、同階層にあるCubism SDK for WebまたはCubismWebSamplesのフォルダ名を参照します。 もしこのフォルダ名を変更する場合、Cubism SDK MotionSync Plugin for Web内の以下の各ファイルにある、フォルダ名を参照する箇所を書き換えてください。
モデルの追加
Cubism SDK MotionSync Plugin for Web の以下の階層に書き出したモデルデータ一式をモデル名と同じ名称のフォルダへ配置し、lappmotionsyncdefine.tsにあるModelDirに追加したモデルのフォルダ名を記載します。
- /Samples/Resources/
再生・動作
プロジェクトを実行すると、表示されるモデルにモーションシンクが適用されます。
モデルの切り替えは画面右上のボタンをクリックします。
切り替わる順番は、/Samples/Resoucesフォルダ内のモデルデータのアルファベット順になります。
画面左上のボタンをクリックすると、.model3.jsonでモーションの対として設定されている音声ファイルが順番に再生されます。