音量連動アニメーションの実装 – レベル3：Live2Dアバターの実装

pnpm add pixi.js@^7 pixi-live2d-display-lipsyncpatch

{
  "Groups": [
    {
      "Target": "Parameter",
      "Name": "LipSync",
      "Ids": ["ParamMouthOpenY"]
    }
  ]
}

"use client";
import { useEffect, useRef } from "react";

const CUBISM_CORE_URL = "https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js";

export function Live2DAvatar({ modelUrl }: { modelUrl: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    async function init() {
      // Cubism CoreをCDNからロード
      if (!(window as any).Live2DCubismCore) {
        await new Promise<void>((resolve) => {
          const script = document.createElement("script");
          script.src = CUBISM_CORE_URL;
          script.onload = () => resolve();
          document.head.appendChild(script);
        });
      }

      // PixiJSを動的インポート
      const PIXI = await import("pixi.js");
      const { Live2DModel } = await import("pixi-live2d-display-lipsyncpatch/cubism4");
      (Live2DModel as any).registerTicker(PIXI.Ticker);

      const app = new PIXI.Application({
        view: canvasRef.current!,
        autoStart: true,
        backgroundAlpha: 0,
        resizeTo: canvasRef.current!.parentElement!,
      });

      const model = await Live2DModel.from(modelUrl);
      app.stage.addChild(model);
    }
    init();
  }, [modelUrl]);

  return <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />;
}

const origUpdate = model.internalModel.update.bind(model.internalModel);

model.internalModel.update = function (dt: number, now: number) {
  origUpdate(dt, now); // モーション適用

  // audioLevelRefから取得した値を反映（2.5倍程度で調整）
  const lipValue = Math.min(audioLevelRef.current * 2.5, 1);
  this.coreModel.setParameterValueById("ParamMouthOpenY", lipValue);
};