LIVE2Dモデルがリアルタイムで動くウェブサイトを作成しましょう。以下のコードでは、マウスの動きに反応するLIVE2Dモデルを実装します。
このコードは、LIVE2Dモデルをリアルタイムで表示し、以下の機能を実装しています：
このプロジェクトを動かすには、以下のライブラリをインストールする必要があります：
npm install pixi.js@5.3.12 pixi-live2d-display@0.4.0このコードでは、サンプルモデルとして「Haru」を使用しています。実際に動かすには、以下のいずれかの方法でLIVE2Dモデルを用意する必要があります：
モデルファイルは public/haru/ ディレクトリに配置する想定です。
エラーを修正するために、Cubismランタイムの読み込み方法を改善します。LIVE2Dモデルを正しく表示するには、適切なランタイムファイルを読み込む必要があります。
エラーを修正しました。主な変更点は以下の通りです：
app/layout.tsxに、必要なLIVE2Dランタイムを追加しました：
live2dcubismcore.min.jslive2d.min.jscomponents/live2d-viewer.tsxを改善：
next.config.mjsを更新：
globals.cssにローディング表示用のスタイルを追加しました。
モデルファイルが正しく配置されていることを確認してください：
/public/haru/haru_greeter_t03.model3.jsonとそれに関連するファイルモデルが見つからない場合は、以下のいずれかの方法で対処できます：
/public/haru/に配置modelUrlの値を適切に変更これらの変更により、LIVE2Dモデルが正しく表示されるようになります。