Core와 모델

Cubism Core

내장된 Framework 5-r.5 어댑터는 Cubism Core 5.3을 사용합니다. coreUrl을 지정해 라이브러리가 불러오게 하거나, 앱 코드보다 앞서 <script>로 로드하세요. Cubism Core는 npm 패키지나 공개 이슈의 첨부 파일로 배포하면 안 됩니다.

<script src="/live2dcubismcore.min.js"></script>

모델 디렉터리

Cubism Editor에서 내보낸 디렉터리 구조를 그대로 유지하세요. 모델은 moc3, 텍스처, 모션, 표정, 물리 연산, pose, user-data 파일을 참조할 수 있습니다.

• model3.json이 가리키는 상대 경로와 파일명의 대소문자를 바꾸지 마세요.
• 텍스처나 모션을 다른 출처에서 제공한다면 CORS를 설정하세요.
• 렌더링 문제를 찾기 전에 Inspector로 모델 구성부터 확인하세요.

자산을 안정적으로 제공하기

버전이 붙은 모델 파일은 가능하면 같은 origin의 고정 URL에서 제공하세요. 다른 origin을 사용한다면 model3, moc3, 텍스처, 모션, 표정 파일에 GET과 CORS를 허용해야 합니다.

public/
├─ live2dcubismcore.min.js
└─ models/avatar/
   ├─ avatar.model3.json
   ├─ avatar.moc3
   ├─ textures/
   └─ motions/

렌더링 전에 호환성 확인하기

Inspector나 inspectModelSource()로 누락 파일, 외부 URL, 지원하지 않는 버전을 먼저 확인하세요. 공개 이슈에는 Core나 모델 파일 대신 오류 코드, 실패 URL, HTTP 상태, export 버전을 남기세요.

모델을 캔버스에 맞추기

fit이 모델의 크기와 위치를 정합니다. 기본값 'upper-body'는 캔버스의 두 배로 확대해 아래 가운데를 기준으로 놓고, 'full'은 모델 전체가 캔버스에 들어가게 맞춥니다.

'upper-body'는 캐릭터가 캔버스 세로를 채우는 전신 리그를 가정합니다. 이미 상반신만 그려진 리그는 두 배 확대에서 화면을 넘고, 캔버스 중앙에서 벗어나 그려진 리그는 한쪽으로 치우칩니다. 공식 Cubism 샘플 다섯 중 둘이 그렇습니다. model3.json에는 캔버스 크기만 있고 그 안 어디에 캐릭터가 그려졌는지는 없어서, 두 값 어느 쪽도 이걸 알아서 보정하지 못합니다.

모델이 이상하게 보이면 'full'을 먼저 써 보세요. 둘 다 맞지 않으면 배치 오버레이를 켜고 끌어다 놓으면 됩니다. 붙여넣을 fit 값을 그대로 알려줍니다.