MMDモデルを3DCGでウェブ上に公開し閲覧者がアングルを動かしまくれるJavaScriptライブラリ「jThree」

MMD(MikuMikuDance)で作成したファイルをウェブページ上に表示し、閲覧者が視点を自由に操作できるようにするJavaScriptライブラリが「jThree」です。ページ上にモデルを表示させるにはWindows 7を搭載したPCでChrome・FireFox・Operaを使えばOK。また、Macの場合はOperaならば同様にページ上で動作させることが可能なようです。

3DCGコンテンツをjQueryスタイルで作るJavaScriptライブラリ - jThree
http://www.jthree.jp/

実際にウェブページ上でどんなことができるようになるのかは以下のムービーを見れば分かります。

「jThree」を使うとウェブページ上でこんなことができるようになる - YouTube


jThreeのトップページにはデモページが3つ用意してあるので、今回は「千本桜 + カゲロウデイズデモ(音量注意)」のデモを見てみることに。

ページのロードが始まり……

ロードが完了すると画面下部に再生バーが表示されます。

再生中は視点を自由に動かすことが可能で、視点の操作方法は画面上部に記されています。

というわけで早速再生ボタンをクリック。

再生が始まったら画面右上にある「全画面表示」をクリックすれば大画面でデモが楽しめます。

通常のMMD動画のようにカメラアングルは刻一刻と変化するわけですが……

マウス操作で自分の好きな場所に視点を移動させられます。

アップでダンスを見たり……

遠目から眺めたりと視点は自由に操作可能です。

ムービーのようにモデルはダンスを踊り続け、音楽は再生され続けるのですが、視点だけは自分の好きな場所に自由に移動させられるので普段は見られないようなアングルからコンテンツを楽しめます。

また、ページの左上にはFPSが表示されています。

使用するPCやブラウザによってはこんな感じに髪の毛がビヨーンとなってしまうので注意が必要です。1番安定して使用できそうなのはChromeでした。

なお、JavaScriptライブラリ「jThree」は、トップページ中段右の「▼ダウンロード(v1.2 1.0MB)」からダウンロードできます。