three.js(version r106)でMMDモデルを動かす

概要

公式のexampleはこちら▼
- MMDダンス: https://threejs.org/examples/#webgl_loader_mmd - カメラモーション付き: https://threejs.org/examples/#webgl_loader_mmd_audio

exampleを参考に作ってみました。▼
- https://mmdtest.netlify.com/ (めちゃくちゃ重いので時間かかります。)

github▼
- https://github.com/kamabokochan/Jasmine

お借りしたもの▼
- ちゃわんむ式善逸モデル(https://www.nicovideo.jp/watch/sm35808552) ちゃわんむし様 - 【MMD 戦国BASARA】極楽浄土　モーショントレース(https://www.nicovideo.jp/watch/sm29180863) yurie様 - カメラモーション　ゆきねこ様 - ステージ冴木稲荷神社シロ様

ソースコード解説

各所ポイントのみ

js

initの中

単純なthree.jsのセッティング部分です（光とかカメラとか）▼

this.scene = new THREE.Scene();
this.clock = new THREE.Clock();
this.setLight();
this.setDisplay();
this.setCamera();
this.bindEvent();
this.loader = new THREE.MMDLoader();

各外部ファイルの読み込みが完了するまでawaitで待機して同期的な処理にしています▼

await this.LoadPMX();
await this.LoadStage();
this.vmd = await this.LoadVMD();

アニメーションの読み込み▼

this.helper = new THREE.MMDAnimationHelper();

    this.helper.add(this.mesh, {
      animation: this.vmd,
      physics: false
    });

アニメーションのループ▼
requestAnimationFrameでループ helper.updateはDelta:numberを受け取ってミキサー時間を進め、ヘルパーに追加されたオブジェクトのアニメーションを更新します

　Render() {
    requestAnimationFrame(() => this.Render());
    this.renderer.clear();
    this.renderer.render(this.scene, this.camera);
    this.helper.update(this.clock.getDelta());
  }

まとめ

動くと感動するね！