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

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

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

  3. モーション
    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

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

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

  5. ジェネレート

    npm run generate

  6. 最新化

    cd ..
    neu update

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

  7. 実行

    neu run

  8. ビルド

    neu build