장면에서 사용（Web）
업데이트： 2024/05/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/Resources 폴더에 있는 모델 데이터의 알파벳순입니다.
화면 왼쪽 상단의 버튼을 클릭하면 .model3.json에서 모션의 페어로 설정된 오디오 파일이 순서대로 재생됩니다.