イベントを設定する
現時点でイベントはjThree本体の機能で生成された3Dオブジェクト要素にのみ設定できます(次回解説するMMDプラグインで生成したモデルなどは未対応です)。
設定の仕方はもちろんjQueryと同じで「click dblclick contextmenu mousedown mouseup mousewheel」の各イベントに対応しています。
jThreeオブジェクトをthree.jsオブジェクトに変換する
GOMLのほとんどの要素には対応するthree.js(WebGLライブラリ)オブジェクトが存在します。jThreeにない機能でもthree.jsオブジェクトを取り出して操作することでWebGLで実現できることが大きく増えます。jThreeを読み込むとthree.jsのグローバルオブジェクト「THREE」も有効になるのでthree.js向けに公開されているプラグインを使うこともできます。
jThreeオブジェクトをthree.jsオブジェクトに変換するにはthreeメソッドを使います。引数が空だとthree.jsオブジェクトが配列で、数字を渡すとそのインデックスのthree.jsオブジェクトが返ってきます。この動作はjQueryのgetメソッドを模しています。
var mesh = jThree( "mesh" ).three( 0 ); //変数meshにはTHREE.Meshのインスタンスが代入されます
実際に3Dオブジェクトを動かす
前回までに作成したサンプルを使って3Dオブジェクトを簡単に操作してみます。青空(スカイドーム)をゆっくりと回転させ続けるアニメーションを実装します。
index.jsサンプル
function drawFloor( ctx ) {
省略
}
jThree.goml( "index.goml", function( j3 ) {
j3.Trackball();//jThree.Trackball.jsを読み込むとこれだけでカメラコントロールが有効になります。
( function() {
j3( "mesh:first" ).animate( { rotateY: "-=3.14" }, 60000, "linear", arguments.callee );
} )();
} );
上記のサンプルでは青空(mesh要素の1個目)を縦軸(Y軸)中心に60秒ごとに3.14ラジアン(約180°)だけ時計回りに回転させています。easingオプションに"linear"が指定されているので一定の速度で回り続けます。
せっかくなのでjQueryのeasingプラグインを使ってみましょう。index.htmlのjQueryを読み込むスクリプトタグの次に以下のタグを設置しておきます。
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
easingオプションを" easeInOutCubic"に変えてブラウザに表示してみましょう。5秒ほど待つと緩急を付けながら動き始めるようになったはずです。
まとめ
今回はjThreeがjQueryの記法によって3Dオブジェクトを自在に操作できることを確認しました。jQueryを使い慣れた人にとっては新たに覚えることがそう多くはなかったはずです。次回はWebGLの世界をさらに拡げるjThreeプラグインを紹介します。MMD(MikuMikuDance)のモデルを表示する方法も解説して実際に躍らせるサンプルも作ります。
