live2d-web 문서

Live2D Devtools

불러온 모델에 프레임워크와 무관하게 사용할 수 있는 Devtools 패널을 연결합니다.

필요할 때 패널 열기

Devtools가 필요한 화면에서만 live2d-web/devtools를 불러오세요. React에 의존하지 않고, 기본 모듈을 import할 때도 함께 번들되지 않습니다.

devtools.ts

import { mountLive2DDevtools } from 'live2d-web/devtools'
 
const devtools = mountLive2DDevtools({
  container: document.querySelector('#devtools')!,
  target: live2d,
})
 
devtools.setTab('parameters')
// 나중에 패널이 만든 UI와 파라미터 드라이버만 정리합니다.
devtools.dispose()

제어할 수 있는 것

Overview는 공개 모델·런타임 정보와 진단 JSON을 보여줍니다. 모델 URL이나 카메라 데이터는 넣지 않습니다.
Parameters에서 파라미터를 검색하고 현재 값을 확인하거나, 슬라이더로 임시 값을 적용할 수 있습니다.
Motion에서 우선순위와 전환 속도를 설정해 모션을 재생하거나 간단한 연속 재생을 구성할 수 있습니다.
Expression에서 표정을 적용·해제하고 전환 속도를 조절할 수 있습니다.

패널의 위치·크기·스크롤은 앱에서 결정합니다. Devtools는 지정한 컨테이너에 open Shadow DOM 호스트 하나만 추가하며, 기존 자식 요소는 지우지 않습니다. 마이크, MediaPipe, Worker는 앱에서 관리해야 합니다.

target 교체와 override 정리하기

검사할 모델이 바뀌면 setTarget()을 호출하세요. Devtools는 자신이 만든 파라미터 driver만 제거하고 앱의 driver는 유지합니다. 파라미터 샘플링은 Parameters 탭이 보일 때만 실행됩니다.

필요할 때만 불러오기

Devtools는 선택형 entry이므로 import하지 않으면 기본 번들에 포함되지 않습니다. 개발 환경에서만 동적으로 import하고 패널이 닫힐 때 dispose하세요. 진단 JSON은 모델 URL, 자산, 카메라, 얼굴 landmark를 포함하지 않습니다.