jThreeでMMDミクさんが踊る

[MMD](http://qiita.com/rana_kualu/items/642fb00fc8cad022fb4d) / [図形](http://qiita.com/rana_kualu/items/c4f60a0c1c78e2b92342)

http://jthree.jp/
なんだこれすごすぎる。
JavaScriptだけでこんなことができるとか全く意味がわかりません。

とりあえず動かしてみることにします。

公式サイトからjThreeをダウンロード。
バージョンはv1.5.1でした。
適当なところに展開する。
デモ一式が入っているので、後は音源のMP3を配置するだけで動作します。

http://www.nicovideo.jp/watch/sm1715919
からMP3をダウンロードし、MP3を`data/audio/melt.mp3`に配置します。
とreadmeではなってますが別に適当なMP3でも問題ないようです。

あとはindex.htmlを開くだけでメルトを歌うミクさんが。
http://nurseangel.sakura.ne.jp/js/jthree/
※MP3は著作権の関係上適当なものに差し替えています。

あっさりできました。
どうなってんだこれ。
さっぱりわからないので中身を見ていくことにします。
以下は上記のソースを見ながら見てください。


```html:index.html
<html>
<head>
<style>
#player {
	position: fixed;
	width: 100%; height: 100%;
	top: 0; left: 0; margin: 0; padding: 0;
}
</style>
</head>
<body>
	<div id="player">
		<a id="jThree-player" href="http://jthree.jp/">jThreeデモ</a>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
		<script src="plugin/jThree.Player.min.js"></script>
		<script src="index.js"></script>
	</div>
</body>
</html>
```

プレイヤーの大きさを指定し、必要なライブラリとindex.jsを読み込んでいるだけです。
公式のサンプルはbodyタグに直接出力しているので、適当にdivで括っておいたほうが使い勝手がいいでしょう。


```js:index.js
$( function() {
	jThree.Player.setScript( {
		jQuery: "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",
		jThree: "script/jThree.min.js",
		ammo: "plugin/ammo.js",
		MMD: "plugin/jThree.MMD.js",
		other: [ "//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" ]
	} );

	jThree.Player( {
		img: "data/img/test.jpg",
		goml: "index.goml",
		audio: {
			"audio/mp3": "data/audio/melt.mp3",
			"audio/ogg": "data/audio/melt.ogg"
		},
		credits: [
			{type: "楽曲",url: "http://supercell.sc/melt/",name: "supercell"},
			{type: "モデリングソフト",url: "http://www.geocities.jp/higuchuu4/",name: "樋口優"},
			{type: "モデルデータ仕様",url: "http://kkhk22.seesaa.net/",name: "極北P"},
			{type: "モデルデザイン",url: "https://twitter.com/animasasa",name: "あにまさ"},
			{type: "モデル・カメラモーション",url: "http://www.nicovideo.jp/watch/sm22045369",name: "pokky"},
			{type: "スカイドームテクスチャ",url: "http://seiga.nicovideo.jp/user/illust/11592603",name: "(メ＿メ)"}
		],
		onLoad: function() {
			jThree( "mesh:first" ).animate( { rotateY: "-=1.57" }, 30000, "linear", arguments.callee );
		}
	} );
} );
```

jThree.Player.setScript()で必要なライブラリを指定します。
jQuery自体はindex.htmlでも読み込んでいるのだけど、何故かこちらでも記載が必要みたいです。
[jquery.easing](http://ozpa-h4.com/2012/12/11/jquery-easing-plugin-effect-pattern/)は動作エフェクトを追加するjQueryプラグインのようです。

jThree.Player()でMP3やMMD、クレジット等を指定。
このあたりは規定通りに指定するだけで、あとはjThreeがよしなに計らってくれます。
『MMDプラグインの貢献者katwat氏に特別な感謝を。』はjThree.Playerに最初から埋め込まれてるみたい。
onLoadは#domeGeoの傾きを指定しているみたいですが、あってもなくても動きが変わらないっぽいんだけどなんだろう。

```xml:index.goml
<?xml version="1.0" encoding="UTF-8"?>
<goml>
	<head>
		<model id="mikuPmx" src="data/pmx/miku.pmx" />
		<motion id="mainVmd" src="data/vmd/model.vmd" />
		<motion id="camVmd" src="data/vmd/camera.vmd" />
		<txr id="blueSky" src="data/img/sky.png" />
		<txr type="canvas" id="floorTxr" param="width: 32; height: 32; repeat: 10; wrap: 0;" draw="misc.drawFloor(a, '#fff', '#2ff')" />
		<gmt type="Plane" id="floorGmt" param="60 60 15 15" />
		<gmt type="Sphere" id="domeGeo" param="450 32 16" />
		<mtr type="MeshPhong" id="skyMat" param="side:1;ambient: #fff; map:#blueSky;"/>
		<mtr type="MeshPhong" id="floorMtr" param="side:2; map: #floorTxr;" />
		<rdr param="antialias: true;"/>
	</head>
	<body>
		<scene>
			<mesh gmt="#domeGeo" mtr="#skyMat" />
			<mesh gmt="#floorGmt" mtr="#floorMtr" style="rotate:1.57 0 -0.785;" />
			<light type="Amb" />
			<light type="Dir" style="light-color: #9f9f9f; position:-14 28 24.5;" />
			<camera motion="#camVmd" style="position: 0 10 30; lookAt:0 10 0;" />
			<mmd model="#mikuPmx" motion="#mainVmd" />
		</scene>
	</body>
</goml>
```

[MMDのモデルやモーションを設定するXML](http://codezine.jp/article/detail/7786)みたい。
MMD方面の知識が全くないので、いったい何が書かれているのか全くわかりません。
gomlのリファレンスみたいなものはないのだろうか。

ここまでが自分で記載する必要がある部分。
以下はjThreeとライブラリです。

`script/jThree.js`

jThreeの本体。
もちろん中に何が書かれているのか全く理解できません。

`plugin/jThree.Player.js`

呼び出すだけでYoutubeっぽいインターフェイスが自動的に追加されるというjThreeのプラグイン。
なんだこりゃ凄すぎる。
あと、[こちらの解説記事](http://codezine.jp/article/detail/7784)ではファイルが分かれているjThree.Trackball.jsやjThree.Oculus.jsあたりは統合されたようで、一緒に中に入っていました。

`plugin/jThree.MMD.js`

MMDファイルを読み込んで、JavaScriptから扱えるようにする機能みたい。
なんでこんなものが作れるんだ。

`plugin/ammo.js`

[物理演算エンジン](https://github.com/kripken/ammo.js/)です。
有名な物理エンジン[Bullet](http://ja.wikipedia.org/wiki/Bullet)を移植したもので、[物理演算が簡単に行える](http://kripken.github.io/ammo.js/examples/new/ammo.html)のだそうです。


後はこれらを適当に組み合わせて呼び出すだけで、いとも簡単にミクさんが踊ってくれます。

…あかん、中を見ても全然わからん。
何をどうすればいいのかさっぱりだ。