コアランタイム
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 とモデルアセットを用意してください。