AR・VR萌えキャラをVRで!!フレームワーク「A-Frame」第2弾こんにちは、エンジニアのニャンちゅうです。以前、ご紹介したA-Frameの第2弾になります。最近、某アニメの膝枕VRアプリが発売され、触発されてしまいましたwなので今回はMMD形式の3Dモデルを表示させてみます。MMDとは初音ミク専用のプロモーションビデオ作成用ツールです。汎用性が高く初音ミク以外の用途でも使われるようになり、ニコニコ動画での3DCGムービーの制作ツールとしてはデファクトスタンダードとなっています。その3Dモデルを含めMMDとも呼ばれます。MMDを表示するA-Frameでは通常、MMDを読み込むことができません。MMDを利用できるように外部ライブラリを使用します。ちなみにデフォルトで読み込めるのはOBJファイルやBlenderファイルなどがあります。MMDを用意するMMDは自身でツールを使って作成することもできますし、外部の方が作成したものを利用することもできます。外部のものである場合は表記や商用利用などの利用規約について確認してから利用するようにしてください。今回は、サンプルとしてニコニコ立体サイトで公式に配布しているMMDを利用します。立体ちゃん、アリシア・ソリッドの2つの名称があるようです。ダウンロードサイトダウンロードしたフォルダの中身を確認するとこのようになっています。Motionフォルダです。Motionには3Dモデルにアタッチするモーションとなります。MotionフォルダをA-Frameソースフォルダの任意の場所に設置します。Motionフォルダはスペースが入っているのでリネームしましょう。私の場合はVMDフォルダにリネームして設置しています。Componentというライブラリを埋め込まなければなりません。その方法はすごく簡単で以下のスクリプトをheadタグに埋め込むだけで利用できるようになります。src="https://cdn.rawgit.com/takahirox/a-mmd/v1.0.2/build/a-mmd.min.js"></script>MMDモデルの設置a-entityタグに属性を指定します。mmd属性には音源を、mmd-modelには3Dモデル、モーションを指定します。属性の中で指定できるものはライブラリのGitHubから確認してください。下記のコードはアリシアちゃんのモデルだけ設置して、音源とモーションはライブラリのサンプルとして利用されている初音ミク用の音源とモーションを利用します。モーション適用可能なMMDモデルであればどのMMDモデルを利用しても動いてくれるようですね。vmd:https://cdn.rawgit.com/mrdoob/three.js/dev/examples/models/mmd/vmds/wavefile_v2.vmd;"></a-entity></a-entity></a-scene></body></html>スクリーンショットハマりポイント・モーションのアタッチ最初、MMDモデルを表示させてモーションつけてみようと試したのですが、ハマりポイントがあり音源がなくともmmd属性が必須でした。属性の値が空でもいいのでmmdとmmd-modelは基本セットで指定しましょう。・VRモードでちらつくa-sceneでサンプル通りoutline属性を指定していたところVRモードで3Dモデルの表示がちらつくようになってしまったので、ここでは指定しないようにしています。最後に一応、実践編ということでしたが今回もあっさり終わってしまいました。カメラの移動や他の3Dによる演出などを加わるとよりVRで楽しめるようになります。