Usage in a Scene (Web)
Updated: 05/30/2024
This method uses motion-sync tied to Cubism models using the Cubism SDK MotionSync Plugin for Web.
Model Preparation
Prepare a model with .motionsync3.json and .model3.json containing a reference to .motionsync3.json.
If you are using Cubism 4.2 or earlier, please refer to “Usage with Cubism 4.2 or Earlier Models” to prepare model data.
Project Settings
Place the extracted Cubism SDK MotionSync Plugin for Web on the same level as Cubism SDK for Web.
Precautions
Cubism SDK MotionSync Plugin for Web requires MotionSync Core. This is not included in the CubismWebMotionSyncComponents available on GitHub. Therefore, it is not possible to run the program if you obtain only the repository from GitHub. Use the Cubism SDK MotionSync Plugin for Web package downloaded from the official website or add MotionSync Core in the Cubism SDK MotionSync Plugin for Web package to CubismNativeMotionSyncComponents. The placement level is the same as for Cubism SDK MotionSync Plugin for Web.
In the same way, to use Cubism Core bundled with Cubism SDK for Web, use the Cubism SDK for Web package downloaded from the official website, or add the library included with Cubism SDK for Web to CubismWebSamples available on GitHub. The placement level is the same as for Cubism SDK for Web.
TIPS
Cubism SDK MotionSync Plugin for Web references the folder name of Cubism SDK for Web or CubismWebSamples on the same level. If you wish to change the name of this folder, please rewrite the section referring to the folder name in each of the following files in the Cubism SDK MotionSync Plugin for Web.
Addition of Models
Place the set of model data exported to the following path of Cubism SDK MotionSync Plugin for Web into a folder with the same name as the model name and write the folder name of the added model in ModelDir in lappmotionsyncdefine.ts.
- /Samples/Resources/
Playback and Operation
When the project is executed, motion-sync is applied to the displayed model.
To switch models, click the button in the upper-right corner of the screen.
Models are switched in alphabetical order according to the model data in the /Samples/Resources folder.
Clicking the button in the upper-left corner of the screen will sequentially play the audio files set as motion pairs in .model3.json.