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)」からダウンロードできます。

・関連記事
MikuMikuDanceの初音ミクをマウスでぐりぐり動かせるハイクオリティなFlashが登場 - GIGAZINE
オードリー・ヘプバーンをフルCGで完全再現、イタリアの街で動くとこうなる - GIGAZINE
プリキュアのEDダンス変遷の陰にあるアニメ会社のCG表現への飽くなき探求 - GIGAZINE
無料の期間限定で3D人物CG作成ソフト「DAZ Studio 4 Pro」が入手可能 - GIGAZINE
ファイナルファンタジーを超高画質なリアルタイムCGとして動かしたあのデモはどのようにして作ったのか? - GIGAZINE
リアルタイムCGの2000年から2013年までの進化を1本にまとめたムービー - GIGAZINE
・関連コンテンツ
in ネットサービス, 動画, ピックアップ, Posted by logu_ii
You can read the machine translated English article A JavaScript library "jThree" that publi….