핵심 런타임
Cubism 4/5 · WebGL2 · 모션 · 표정
Cubism 4/5 · WebGL2 · JavaScript + React
브라우저에서 바로 쓰는 Live2D. PixiJS는 필요 없습니다.
Cubism 모델을 WebGL2로 렌더링합니다. React, 얼굴 트래킹, 립싱크, 개발 도구는 필요할 때만 추가하세요.
npm install live2d-web모션
립싱크마이크를 사용하지 않고 입 움직임을 시뮬레이션합니다.
선택형 연동
React · MediaPipe · wLipSync
개발 도구
모델 검사 · Devtools · 빌드 검증 예제
필요할 때만 추가 · live2d-web/react
React는 필요한 곳에만.
기본 렌더러는 프레임워크에 의존하지 않습니다. React를 사용하는 컴포넌트에서만 연동 모듈을 불러오세요.
React 가이드 →Avatar.tsx
import { Live2DCanvas, Live2DModel } from 'live2d-web/react'
export function Avatar() {
return (
<Live2DCanvas coreUrl="/live2dcubismcore.min.js">
<Live2DModel src="/models/avatar.model3.json" followPointer />
</Live2DCanvas>
)
}
라이선스를 확보한 Cubism Core와 모델 자산을 직접 제공해야 합니다.