A Live2D runtime for the web.

Cubism 3/4/5 모델을 WebGL2로 렌더링합니다. React 연동과 카메라를 통한 표정·시선 제어도 지원합니다.

시작하기 Playground 열기

Live demoWebGL2 · Cubism 3/4/5

로딩 중

Capabilities

렌더링부터 트래킹까지.

기본 런타임

PixiJS 없이 WebGL2로 직접 그립니다.

Cubism 3/4/5
Motion & sequences
Expressions
Parameters

오디오와 트래킹

마이크나 웹캠에서 입력을 받습니다.

Volume lip sync
wLipSync
MediaPipe Main / Worker
Perfect Sync

연동과 개발 도구

필요할 때 더하는 별도 entry입니다.

React
Inspector
Devtools
Verified examples

Setup

쉽고 빠르게 시작하기.

JavaScript와 React 모두에서 쓸 수 있습니다.

JavaScript 가이드 읽기 →

avatar.ts

import { createLive2D } from 'live2d-web'

const character = await createLive2D({
  container: document.querySelector('#avatar'),
  coreUrl: '/live2dcubismcore.min.js',
  src: '/models/avatar.model3.json',
})

await character.motion('TapBody', 0)
window.addEventListener('pagehide', () => character.dispose(), { once: true })

Avatar.tsx

import { Live2DCanvas, Live2DModel } from 'live2d-web/react'

export function Avatar() {
  return (
    <Live2DCanvas coreUrl="/live2dcubismcore.min.js">
      <Live2DModel src="/models/avatar.model3.json" />
    </Live2DCanvas>
  )
}

Package map

기능별로 나눈 패키지.

기본 런타임은 가볍게 유지하고 React, 얼굴 트래킹, 개발 도구는 별도 모듈로 제공합니다.

live2d-web

Core

Cubism 3/4/5 렌더링과 모션, 표정, 파라미터 제어를 제공합니다.

live2d-web/react
live2d-web/tracking/mediapipe

Integrations

React 컴포넌트와 MediaPipe 얼굴 트래킹, 립싱크 입력을 선택적으로 추가합니다.

live2d-web/inspect
live2d-web/devtools

Tools

모델 검사와 런타임 제어, 빌드 검증을 거친 예제를 제공합니다.