はじめに

live2d-web を導入し、約10分で最初のモデルを表示します。

パッケージをインストール

インストールするパッケージは1つです。React と MediaPipe は必要な場合にのみ追加されるため、通常の JavaScript アプリにそれらのコードは含まれません。

bash

pnpm add live2d-web

アプリ側で用意するもの

npm パッケージには Cubism Core とモデルを同梱していません。Live2D の利用条件に従って Core を入手し、利用権を持つ Cubism 3/4/5 モデルとともにアプリ側で配信してください。

最初のモデルを表示

サイズを指定したコンテナーに Core と model3 の URL を渡します。読み込みは非同期のため、createLive2D() が完了してからモーションを実行してください。

import { createLive2D } from 'live2d-web'
 
const character = await createLive2D({
  container: document.querySelector('#avatar')!,
  coreUrl: '/live2dcubismcore.min.js',
  src: '/models/avatar/avatar.model3.json',
})
 
await character.motion('Idle', 0)

読み込みと後始末を確認

Network パネルで model3、moc3、テクスチャが揃ったか確認します。エラー時はトラブルシューティングを参照し、画面を閉じるときは dispose() で Canvas、WebGL リソース、描画ループを解放します。

pixi-live2d-display からの移行

関数名、配置、移せないものを pixi-live2d-display からの移行にまとめました。書き換える前に目を通してください。移らないほうがよい場合も書いてあります。あのプラグインを引き継いで Pixi v8 で維持されているフォークがあり、Pixi を使い続けるならそちらのほうが変更は小さく済みます。