Nuxt3とCubism SDK for WebでLive2Dモデルをブラウザに表示させる！

Nuxt3とCubism SDK for Webを使ってLive2Dをブラウザ上に表示させようとした際に、思ったよりも苦戦するポイントが多かったので、誰かの参考になればと思って記事を書きました！
今回はNuxt3の環境を用意する所は割愛させていただきます🙇

使用する主要なライブラリ

• nuxt v3.9.0
• pixijs v6.5.10
  • pixijsに関する説明はこちらの記事が分かりやすかったです。
  • 最新バージョンを使おうとした際に、エラー^[1]が発生したのでバージョンを下げています。
• pixi-live2d-display v0.4.0

前準備

• 公式サイトからLive2D Cubism SDK
  for Webをダウンロード

• Samplesディレクトリ下のResourcesディレクトリをNuxtのpublicディレクトリにコピーする

  • このディレクトリにサンプルのLive2Dモデルが入っているので、そちらを利用します。
    今回はHiyoriというモデルを使って進めていきたいと思います。

• Coreディレクトリ下のlive2dcubismcore.min.jsもpublicディレクトリにコピーする。

• pixi-live2d-displayのreadmeに記載してあるここからlive2d.min.jsをダウンロードして、同じくpublicディレクトリに移動させる。

• 全部終わった状態はこんな感じになります！

- public
  └ Resources
  └ live2dcubismcore.min.js
  └ live2d.min.js

実装

必要なファイルを読み込む

• nuxt.config.tsでscriptを読み込む
  • 今回はここでlive2dcubismcore.min.jsとlive2d.min.jsで読み込ませます。
  • 全ページで読み込みが不要な場合は、必要なページのコンポーネントのuseHeadで読み込ませてあげれば大丈夫だと思います。

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: './live2d.min.js'
        },
        {
          src: './live2dcubismcore.min.js'
        }
      ]
    }
  }, 
  ssr: false,
})

モデル表示用のコンポーネントを作成する

• 完成系はこんな感じになります
  • templateに記載したcanvas要素の部分にpixijsで作成したcanvas要素が置き換わるイメージです。
  • onMounted内で処理を実行している理由としては、対象のcanvas要素がマウントされた後にこの処理を実行しないとcanvas要素の置き換えが上手く動作しなかった為です。

live2d.vue

<script setup lang="js">
// ライブラリの読み込み
import * as PIXI from 'pixi.js';
import { Live2DModel } from 'pixi-live2d-display';

window.PIXI = PIXI;

onMounted(async () => {
// PIXI.Applicationのインスタンスを生成
  const app = new PIXI.Application({
    width: window.innerWidth - 15,
    height: window.innerHeight - 300,
    backgroundColor: 0xDFF1F6,
    view: document.getElementById('2d'), // どのキャンバス要素を利用するかを指定
  });
// canvas要素をDOMに追加
document.body.appendChild(app.view);

// モデルの読み込み
const model = await Live2DModel.from('./Resources/Hiyori/Hiyori.model3.json');

// pixijsのviewにモデルを描画する
app.stage.addChild(model);

// モデルの表示位置や表示場所などを設定(この辺はモデルに合わせて調整してください)
model.x = window.innerWidth / 2;
model.y = 100;
model.scale.set(0.2, 0.2); // モデルの縮尺
model.anchor.set(0.6, 0.1); // 表示の基準の位置？(曖昧ですいません、、、。)
});

</script>

<template>
    <canvas id="2d"></canvas>
</template>

ページのコンポーネントで上記で作成したコンポーネントを呼び出す

• 最後に作成したコンポーネントを表示させたいページで読み込んで完了です！

index.vue

<script setup lang="ts">
...
</script>

<template>
  <div class="section">
    <live2d></live2d>
  </div>
</template>

完成イメージ

• この様な感じでブラウザ上でLive2Dのモデルを動かす事が出来ました！
  マウスを動かすとその方向に目線を動かしてくれたりして可愛いですね 🎉
  

最後に

• 今回はNuxt3とCubism SDK for Webを使ってLive2Dのモデルをブラウザ上に表示してみました！
  まだ表示をさせてみただけなので、これから色々と他の機能とかも触ってみたいなと思います！🙌

脚注

1. https://github.com/pixijs/pixijs/issues/9838