jThree開発の流れを理解しよう
jThreeではWebGLの操作をjQuery化するために、独特の開発手順を採用しています。
- オンラインまたはローカルサーバーを立てる
- 画像などのデータファイルをサーバーにアップする
- HTMLファイルでcanvasタグのフレームとなる要素（通常はbody要素）を用意する
- GOMLファイル（jThree専用XML）に表示したい3Dオブジェクトを記述し、HTMLファイルと同じディレクトリに設置する
- JSファイルでGOMLファイルにリンクし、正しく表示されるか確認する
- 5のJSファイルでプラグインの機能を呼び出したり、オブジェクトにアニメーションやイベントなどの機能をjQueryのメソッドで付加したりして完成
実際にこの手順通りである必要はありませんが、jThreeの仕様に慣れるまではこのとおりにするとよいでしょう。
jThreeを使ってみよう
本記事では、マウスでコントロールできる立方体が描画されるところまでを紹介します。
まず、記事に添付されているサンプルファイル（no1.zip）をダウンロードしてください。今回のサンプルとスクリプトが含まれています（no1.zip）。解凍後、そのままサーバーにアップロードするだけで動作を確認できます。サンプルでは5月15日時点の最新版jThree v1.5.1と、プラグインのjThree.Trackball.jsを利用しています。
前述の手順のうち1は終わったものとし、2は不要なので3から解説します。
3. HTMLファイルでcanvasタグのフレームとなる要素
（通常はbody要素）を用意する
canvasタグはjThreeが自動生成するため、そのフレームとなる要素のみを用意します。
WebGLコンテンツは大抵ページいっぱいに表示しますので、今回はbodyタグをフレームにします。
絶対配置で幅・高さともに100%になるようCSSで指定します。記事の都合上、style要素による埋め込みスタイルシートを利用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jThreeサンプル</title>
<style>
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- jThreeの前に必ずjQueryを読み込んでください -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="script/jThree.js"></script>
<script src=”script/jThree.Trackball.js”></script>
<script src="index.js"></script>
</head>
<body>
<!-- ココにcanvasタグが自動生成されます -->
</body>
</html>
4. GOMLファイル（jThree専用XML）に表示したい3Dオブジェクトを記述し、
HTMLファイルと同じディレクトリに設置する
GOMLファイルはjThree専用のXMLファイルですが、HTMLの記述との共通部分が多く、覚えやすいのが特徴です。
GOMLファイル内の要素に記述した相対URLは、ページのHTMLファイルを基準にするため、同じディレクトリに設置すると混乱しなくてすみます。
<?xml version="1.0" encoding="UTF-8"?> <goml> <head> <gmt id="Gmt" type="Cube" param="3 3 3" /> <rdr frame="body" camera="camera:first"/> <!-- rdr要素はcanvasタグを生成し、描画するレンダラーです。 frame属性にWebGLのフレームとなるHTML要素のjQueryセレクタを指定できます。 camera属性には3D空間の撮影に使うGOMLファイル内のcamera要素をjQueryセレクタで指定できます。 上記のframe属性とcamera属性の値はデフォルトで設定されているので省略して<rdr/>と記述することができます。 --> </head> <body> <!-- body直下にはscene要素のみいくつでも設置できます --> <scene> <!-- scene要素の下に3Dオブジェクトを配置します --> <camera style="positionZ: 10;" /> <mesh gmt="#Gmt" /> </scene> </body> </goml>
5. JSファイルでGOMLファイルにリンクし、正しく表示されるか確認する
GOMLファイルをサーバーに設置しただけでは何も表示されませんので、jQuery・$オブジェクトを拡張したjThreeオブジェクトを利用します。
gomlメソッドにGOMLファイルのURLを渡すだけで、HTMLのDOM要素構築完了後にGOMLのDOM要素を構築・描画してからコールバック関数を呼び出してくれます。
jQuery・$オブジェクトは一切改変されないので、通常通り使用できます。
jThree.goml( "index.goml", function( j3 ) {
j3.Trackball();//jThree.Trackball.jsを読み込むとこれだけでカメラコントロールが有効になります。
//GOMLの内容を表示するだけならこのコールバック関数は不要です。
//第一引数にjThreeオブジェクトが渡されるので手間を省くためにj3に置き換えてます。
//MMDプラグインと共に使うammo.jsと競合するためグローバル空間では変数名に「j3」を使わないでください。
//今回は解説しませんがjThreeオブジェクトをjQueryのように使ってGOMLファイル内の要素にアクセスできます。
} );
ブラウザでindex.htmlにアクセスして、画像のような真っ黒なcanvasタグと立方体が生成されれば成功です。
マウスで動かせますので、右・左・ホイールボタンで操作してみてください。立方体の色は毎回ランダムで変わります。
6. 5のJSファイルでプラグインの機能を呼び出す
サンプルのコメントにすでに書いてありますが、
j3.Trackball();
でマウスコントロールを有効にしています。
まとめ
本記事ではこのjThreeについて、MMDプラグインを含めた機能の紹介と独特なコーディング手順を説明するとともに、Canvasを自動生成し、マウスで動かせる立方体を描画してみました。
次回からGOMLファイルの記述について詳しく解説していきます。
