WebGL Advent Calendarの17日目の記事です。
jThreeについて
jThreeとは、タグで立体物を描画してjQueryと同じような記述（「$」が「j3」に変わるだけ）で動きをつけてWebGLが楽しめる「Web3Dライブラリ」です。
何が出来るかはの詳しくはjThreeを確認して下さい。
この記事の対象はWebデザイナー、jQuery初心者
ガンガンコードをかける人にはこの記事は物足りないと思います。
目的としては、どんな簡単なものでも良いのでビギナーの「出来た」を感じてもらうこと。
「スキルは無いけどやってみたい」という人のサポートに少しでもなれば幸いです。
初心者にとって大事なことは、実際に触って出来た喜びを感じて継続する気持ちになれること
最初に自分で書いたものが「動いた！」、「出来た！」という実感が大事だと考えています。
簡単な事例で説明するので、jThree専用エディタで実際にコードを書いてみてください。
jThreeの特徴
通常Webサイトは、html、CSS、JavaScriptで構築されていることが多いと思いますが、jThreeはgomlという独自の拡張子ファイルがあります。
gomlファイルの役割は、タグで立体物を描画することになります。
動きをつけるのはJavaScriptでjQueryと同じような記述することで実現できます。（「$」が「j3」に変わるだけ）
今回は立体物についてはjThree専用エディタのデフォルトをそのまま使い、動作をつけることをしていきましょう。（ちなみにmeshは立体物のオブジェクトのことを指します。）
JavaScriptを見てみよう
jThree専用エディタのデフォルトだと、画面右のプレビューのオブジェクトをクリックするとオブジェクトの形が変わります。
この動作は8～14行目の記述に書かれています。
まずは、8～13行を削除して
j3( "mesh" ).on("click", function() {
//処理したいコードを書く
} );
としましょう。
j3( "mesh" )
は、jQueryだと$("mesh")と記述します。ただ、jQueryだとhtmlで使えるタグを記述するのでmeshを使うことはありません。
ここで大事なことは、meshというタグを選択しているということです。
これはセレクター（Selectors）を指定しています。このセレクターで指定したものに対して処理をしていきますということになります。なので、jThree専用エディタのデフォルトで記載されているmeshというオブジェクトが何かしら変化しています。
「.on()」について
j3("mesh").on("click", function() {
//処理したいコードを書く
} );
8行目の「.on()」というのがありますが、これは「イベントハンドラ」といいます。イベントハンドラは何かクリックやマウスオーバー（これらを「イベント」といいます。）などがあった時、そのイベントがトリガーとなって指定した処理が行われるというものです。「.on()」はイベントを複数指定出来るのが良いところで、「.on()」を覚えておけばだいたいのものは何とかなる万能のイベントハンドラです。（jQueryでは、ライブラリーのバーションによって動作しないことがあります。）
なので、上記のコードでは、meshをclickしたときに処理したいコードが動作します。
(.onの書き方は他にもありますが、ここでは一番簡単な記述を使用することにします。セレクターの説明もし易いので…)
処理を書いていきましょう
今回は、アニメーションさせたいと思います。
アニメーションはjQueryでも使えますし、動いたら嬉しい動作だと思いますのでやってみましょう。
結論としてコードは
j3("mesh").on("click", function() {
j3(this).animate({
translateX: 4
},1000);
} );
とします。
j3(this)
このthisは前述したmeshのことを指していますが、動作をするのはmeshの クリックしたオブジェクトのみ です。
そのクリックしたオブジェクトに対して、「.animate()」で動きをつけていきます。
j3(this).animate({
translateX: 4
},1000);
translateXの部分は今の場所からx軸に4px移動するということになります。
（ここではx軸・y軸・z軸についての話は割愛します。）
},1000);
の1000は、「1秒」という時間の指定になります。
「.animation()」の記述については決まった記述方法があり、これらをAPI（Application Programming Interface）と呼びます。一言でいうと「便利な機能を簡単に使えるようにしたよ」というもので、他にも様々なAPIがあります。それぞれのAPIで記述方法が異なる場合があるので、その都度調べるなり覚えるなどをしていきましょう。
実際に動かしてみましょう！
jThree専用エディタのjavascriptの8～14行を以下のコードに記述しなおし
j3("mesh").on("click", function() {
j3(this).animate({
translateX: 4
},1000);
} );
エディタ左上の保存を押し、画面右のプレビューの再生ボタンを押し、どれでもいいのでブロックをクリックしてみましょう。
動きましたか？
きっと動くはずですw（テストはした！）
この動作を、jThreeを使わないでやると、コードも長くなるし大変です。
jThreeを使うことでかなり楽が出来ています！
jThreeは、まだまだ発展していて解決する課題もありますが、とても成長が早く今後も面白い展開があると思うので、皆さんも応援してみてはいかがでしょうか。