live2d-web ドキュメント

Live2D Devtools

読み込み済みのモデルに、フレームワークに依存しない Devtools パネルを接続します。

任意パネルのマウント

Devtools は必要な画面でのみ読み込んでください。このサブパスは React に依存せず、アプリの基本バンドルにも含まれません。

devtools.ts

import { mountLive2DDevtools } from 'live2d-web/devtools'
 
const devtools = mountLive2DDevtools({
  container: document.querySelector('#devtools')!,
  target: live2d,
})
 
devtools.setTab('parameters')
// このパネルが作成した UI と parameter driver だけを解放します。
devtools.dispose()

操作できる内容

Overview では、公開されているモデル情報と実行状態、診断用 JSON を確認できます。モデルの URL やカメラ映像は含まれません。
Parameters では、パラメータを検索し、スライダーで一時的に値を上書きできます。
Motion では、優先度や切り替え時間を指定してモーションを再生できます。簡単な連続再生にも対応します。
Expression では、表情の適用、切り替え時間の指定、解除ができます。

コンテナの位置、サイズ、スクロールはアプリ側で管理します。Devtools は open Shadow DOM のホストを1つ追加しますが、既存の子要素は削除しません。マイク、MediaPipe、Worker の管理もアプリ側の責任です。

対象を切り替える

同じパネルで別のモデルを調べる場合は、パネルを作り直さず setTarget() を使います。切り替え時には Devtools が追加した一時的なパラメータ操作だけが解除され、アプリ側のドライバーは残ります。

devtools.setTarget(nextCharacter)
devtools.setTab('parameters')

React で利用する場合も、Live2DModelController をそのまま target に渡せます。モデルを再読み込みしたあとに古い controller を使い続けないよう、現在の controller に切り替えてください。

開発時だけ読み込む

Devtools を本番の初期バンドルに含めたくない場合は、開発画面を開いたときに動的 import します。コンテナと対象モデルの準備が終わってからマウントしてください。

async function openDevtools(container: HTMLElement, target: Live2DInstance) {
  const { mountLive2DDevtools } = await import('live2d-web/devtools')
  return mountLive2DDevtools({ container, target })
}

パネルを閉じる処理では、返されたインスタンスの dispose() を必ず呼びます。Devtools はカメラや AudioContext を停止しないため、それらは各機能を作成した側で別に解放します。