スマホ研究部 byブレイブソフト

ヒットノウハウから最新技術まで、スマホの全てを明らかにする部活!

株式会社ブレイブソフト

ニャンちゅう萌えキャラを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つの名称があるようです。
ダウンロードサイト

 

ダウンロードしたフォルダの中身を確認するとこのようになっています。A-Frameで利用するのはMMDフォルダとMMD Motionフォルダです。MMDフォルダには3Dモデル、MMD Motionには3Dモデルにアタッチするモーションとなります。

 

MMDフォルダの設置

先程ダウンロードしたMMDのMMDフォルダ、MMD MotionフォルダをA-Frameソースフォルダの任意の場所に設置します。MMD Motionフォルダはスペースが入っているのでリネームしましょう。私の場合はVMDフォルダにリネームして設置しています。

 

A-FrameのMMDライブラリ

MMDを利用するためにA-Frame MMD Componentというライブラリを埋め込まなければなりません。ただ、その方法はすごく簡単で以下のスクリプトをheadタグに埋め込むだけで利用できるようになります。

 

MMDモデルの設置

a-entityタグに属性を指定します。mmd属性には音源を、mmd-modelには3Dモデル、モーションを指定します。属性の中で指定できるものはライブラリのGitHubから確認してください。下記のコードはアリシアちゃんのモデルだけ設置して、音源とモーションはライブラリのサンプルとして利用されている初音ミク用の音源とモーションを利用します。モーション適用可能なMMDモデルであればどのMMDモデルを利用しても動いてくれるようですね。

 

ソースコード全体

 

スクリーンショット

 

ハマりポイント

・モーションのアタッチ

最初、MMDモデルを表示させてモーションつけてみようと試したのですが、ハマりポイントがあり音源がなくともmmd属性が必須でした。属性の値が空でもいいのでmmdとmmd-modelは基本セットで指定しましょう。

・VRモードでちらつく

a-sceneでサンプル通りoutline属性を指定していたところVRモードで3Dモデルの表示がちらつくようになってしまったので、ここでは指定しないようにしています。

最後に

一応、実践編ということでしたが今回もあっさり終わってしまいました。カメラの移動や他の3Dによる演出などを加わるとよりVRで楽しめるようになります。ぜひ皆さんも試してみましょう!

★部員募集中★

ブレイブソフトは現在エンジニアを募集中です。ご応募お待ちしてます!

  • このエントリーをはてなブックマークに追加
カテゴリー:AndroidWEB