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

連携と開発ツール

必要なときに加える独立したエントリーです。

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

モデル検査、ランタイム操作、ビルド検証済みのサンプルを提供します。