原神キャラのMMDをページに表示

駄文とメモをつらつらと。

Youtubeを見ていたらスマホでやっている原神というゲームのマッド動画が載っていて、どうやって３Dモデリングデータ手に入れたんだ？？手作り？？と思ったところからスタート。どうもMMDというものらしい…がMMDは略称で、正式名はMikuMikuDance（ミクミクダンス）。Wikipediaによると

MikuMikuDance（ミクミクダンス）は、樋口優が制作した、プリセットされたキャラクターの3Dモデルを操作しコンピュータアニメーションを作成する3DCGソフトウェアである。略称はMMD。デフォルトで初音ミクなどVOCALOIDキャラクターの3Dモデルを使用できるほか、オリジナルのキャラクターモデルやアクセサリを組み込んで操作することも可能で、MMD用の3Dモデルも有志によって多数公開されている。

なお、MikuMikuDanceという初音ミクにちなんだ名前ではあるが、樋口が個人で制作したフリーウェアであり、初音ミク販売元のクリプトン・フューチャー・メディアによる製品ではない。

https://ja.wikipedia.org/wiki/MikuMikuDance

だそうだ。MMDを使ってダンスのCGを作れるのは判ったが、キャラクターの３Dモデルは誰かが作ったのかと思ったが、これはどうやらゲームの開発元のmiHoYoが正式に配布しているとのこと🎉🎉

• v1.0 http://ys.biligame.com/gczj/
• v1.1 http://ys.biligame.com/pjdkx/
• v1.2 https://ys.biligame.com/beyel/
• v1.3 https://ys.biligame.com/ysl/
• v1.4 https://www.bilibili.com/blackboard/activity-c_fu2inm-.html
• v1.5 https://www.bilibili.com/blackboard/activity-raop07Ymhm.html
• v1.6 https://www.bilibili.com/blackboard/activity-kiOl0D1nF8.html
• v2.0 https://www.bilibili.com/blackboard/activity-btLCSzTTsK.html#/

手間ひまかけて作った３Dモデル無料で公開。悪用される可能性よりも、MMDとか使ってファンに楽しんでほしいって判断なのか。まさに、会社のスローガンである「tech otakus save the world」（技術的なオタクは世界を救う）を実践しているのか？とはいえ、盛り上がればmiHoYoの売上も上がるはずだし、Win-Winなのかな。

とりあえず、使ってみたいと思ったが、MMDはWindows版しかない。が、嬉しいことにMMDの互換ソフトのnanoemというMacでも動作するソフトがあった。

https://nanoem.readthedocs.io/ja/latest/

とりあえず、動作が確認できて満足したが、動画をつくるというよりは、この３DモデルをHPに表示できるという記事があったので、そっちに取り組むことにした。

「原神」がMMDモデルを配信してくれたので、JavascriptでMMDビューアを作った

記事を読みながらやってみたが、丸一日いじくり回す羽目に。以下、トラブったところ

• モデルデータは日本語サイトからDLすると文字化けして面倒
• three.jsを使うらしいが、最新版だと動かず、記事に書かれていたr121にしたら動いた
• オブジェクト生成時のcanvas引数を単純なid名ではなく、jquary的に？書く必要があった
• jQueryのセレクタは複数のオブジェクトを拾おうとするので
  ‘stage’ではなく$(‘#stage’)[0]とするらしい
  https://teratail.com/questions/110553

以下、記事に従って環境を構築した上で、MMDを表示する部分を作ってみた。

<canvas id="stage"></canvas>
<script type="module">
  'use strict';
  import { MmdView } from '/mmd/mmd_viewer_jsm/js/MmdView.js';
  var mmd_path = "/mmd/mmd/ノエル/诺艾尔.pmx";
  var vmd_path = "/mmd/mmd/vmds/ウマぴょい伝説.vmd";
  var stage_path = "/mmd/mmd/stage/Skydome_BB6/Dome_BB603.pmx";
  var canvas = $('#stage')[0];
  let mmd = new MmdView(canvas, 600, 300 );
  await mmd.loadWithAnimation(mmd_path, vmd_path, stage_path);
</script>

jsファイルの読み込みはプラグインを導入して読み込ませた。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="./mmd/mmd_viewer_jsm/js/methods_bootstrap.js"></script>
<script src="./mmd/mmd_viewer_jsm/js/components_bootstrap.js"></script>
<script src="./mmd/mmd_viewer_jsm/js/vue_utils.js"></script>
<script src="./mmd/mmd_viewer_jsm/dist/js/vconsole.min.js"></script>
<script src="./mmd/mmd_viewer_jsm/dist/js/ammo.wasm.js"></script>

組込例

普段は剣を振り回しているキャラが、アイドルみたいに踊って笑顔を振りまくのは面白いものですね！

• マウスの左ボタンのドラッグで視点回転
• マウスの右ボタンのドラッグで視点移動

おまけ