React

必要なコンポーネントでのみ React 連携を読み込みます。

コンポーネントを配置する

Live2DCanvas が描画を、Live2DModel が読み込みを担当し、React から外れると自分で後始末します。

tsx

import { Live2DCanvas, Live2DModel } from 'live2d-web/react'
 
export function Avatar() {
  return (
    <Live2DCanvas coreUrl="/live2dcubismcore.min.js">
      <Live2DModel src="/models/model.model3.json" />
    </Live2DCanvas>
  )
}

モデルを複数置く

Canvas 1つに好きなだけモデルを置けます。WebGL コンテキストを共有するので、2体目のキャラクターがブラウザーの数少ないコンテキストをもう1つ消費しません。

Duo.tsx

<Live2DCanvas coreUrl="/live2dcubismcore.min.js">
  <Live2DModel src="/models/host.model3.json" fit="full" />
  <Live2DModel
    src="/models/guest.model3.json"
    fit={{ scale: 0.8, offsetX: 0.3, units: 'stage' }}
  />
</Live2DCanvas>

書いた順に描画されるので、あとのモデルが上に来ます。モデルごとに fit、 followPointer、onTap を持ち、<LipSync> やトラッキングの子要素は自分が属するモデルに接続します。1つを unmount しても Canvas と残りはそのままです。

paused は Canvas のものです。<Live2DCanvas paused> が全体を止めます。モデルに付けたものも動き、いずれかが paused なら Canvas が止まります。

Canvas のアクセシビリティ

意味のあるキャラクターは画像として説明し、装飾だけの Canvas は支援技術から隠します。ライブラリは Canvas を自動的にキーボードフォーカスの対象にしません。タップやモーションには通常の DOM ボタンも用意し、 prefers-reduced-motion ではアニメーションを抑えてください。

tsx

<Live2DCanvas
  accessibility={{
    label: '動く案内キャラクター',
    describedBy: 'avatar-help',
  }}
  coreUrl="/live2dcubismcore.min.js"
>
  <Live2DModel src="/models/model.model3.json" />
</Live2DCanvas>
 
<p id="avatar-help">下のモーションボタンに反応するキャラクターです。</p>
<button type="button" onClick={() => controller?.motion('TapBody', 0)}>
  あいさつを再生
</button>

情報を伝えない Canvas には accessibility={{ mode: 'decorative' }} を使います。

準備後の controller を使う

モデル配下のコンポーネントで useLive2DModel() を呼び、ユーザー操作からコマンドを実行します。準備前は null で、unmount 後の controller は再利用できません。

tsx

import { useLive2DModel } from 'live2d-web/react'
 
function MotionButton() {
  const controller = useLive2DModel()
  return <button disabled={!controller} onClick={() => controller?.motion('TapBody', 0)}>あいさつを再生</button>
}
 
<Live2DModel src="/models/model.model3.json"><MotionButton /></Live2DModel>

Strict Mode と再試行

開発時の React Strict Mode では mount と cleanup が繰り返されます。controller をグローバルに保存せず、Live2DCanvas と Live2DModel にリソースを所有させてください。モデル変更時はモデル ID を key に使います。