https://github.com/mrdoob/three.js/blob/dev/examples/webgl_loader_mmd_audio.html
https://github.com/ktkr3d/neutralinojs-nuxt3

MMD の音声再生付きサンプルが掲載されていたのでNuxt3 に移植してみました。
カメラ用のVMDでカメラアングルが目まぐるしく展開します。

利用させていただいたデータ。

  • PMD: hololive さん、桃鈴ねね公式mmd_ver1.0
  • VMD: hino さん、ＷＡＶＥＦＩＬＥ
  • 音声：ラマーズP さん、WAVEFILE

まだ途中です。今日はここまで。

構築

  1. クローン
npm install -g @neutralinojs/neu
git clone https://github.com/ktkr3d/neutralinojs-nuxt3.git
cd neutralinojs-nuxt3/nuxt3-src
npm install

  1. モデル
    https://3d.nicovideo.jp/works/td78505 から以下を配置
    ファイル名は半角英数にして以下に配置

    • nuxt3-src/public/PMX/nene_BEA.pmx
    • nuxt3-src/public/texture/TGA/*

  2. モーション
    https://github.com/mrdoob/three.js/tree/dev/examples/models/mmd から以下を配置

    • nuxt3-src/public/vmds/wavefile_v2.vmd
    • nuxt3-src/public/vmds/wavefile_camera.vmd

  3. BGM
    https://github.com/mrdoob/three.js/tree/dev/examples/models/mmd から以下を配置

    • nuxt3-src/public/audios/wavefile_short.mp3

  4. ジェネレート

npm run generate
  1. 最新化
cd ..
neu update

上記では最新にならない場合があるので、 https://github.com/neutralinojs/neutralinojs/releases からバイナリをダウンロードして./bin/に上書き展開
7. 実行

neu run

8. ビルド
neu build