Webデザイナー、jQuery初心者でも簡単に出来るWebGLライブラリ「jThree」を使ってみよう！

[WebGL Advent Calendar](http://qiita.com/advent-calendar/2014/webgl)の17日目の記事です。

##jThreeについて

[jThree](http://jthree.jp/)とは、タグで立体物を描画してjQueryと同じような記述（「$」が「j3」に変わるだけ）で動きをつけてWebGLが楽しめる「Web3Dライブラリ」です。

何が出来るかはの詳しくは[jThree](http://jthree.jp/)を確認して下さい。

##この記事の対象はWebデザイナー、jQuery初心者

ガンガンコードをかける人にはこの記事は物足りないと思います。
目的としては、どんな簡単なものでも良いのでビギナーの「出来た」を感じてもらうこと。
「スキルは無いけどやってみたい」という人のサポートに少しでもなれば幸いです。

###初心者にとって大事なことは、実際に触って出来た喜びを感じて継続する気持ちになれること

最初に自分で書いたものが「動いた！」、「出来た！」という実感が大事だと考えています。
簡単な事例で説明するので、[jThree専用エディタ](http://editor.jthree.jp/)で実際にコードを書いてみてください。

[jThree専用エディタはこちら](http://editor.jthree.jp/)


##jThreeの特徴

通常Webサイトは、html、CSS、JavaScriptで構築されていることが多いと思いますが、jThreeはgomlという独自の拡張子ファイルがあります。

gomlファイルの役割は、タグで立体物を描画することになります。

動きをつけるのはJavaScriptでjQueryと同じような記述することで実現できます。（「$」が「j3」に変わるだけ）

今回は立体物については[jThree専用エディタ](http://editor.jthree.jp/)のデフォルトをそのまま使い、動作をつけることをしていきましょう。（ちなみにmeshは立体物のオブジェクトのことを指します。）

##JavaScriptを見てみよう

[jThree専用エディタ](http://editor.jthree.jp/)のデフォルトだと、画面右のプレビューのオブジェクトをクリックするとオブジェクトの形が変わります。

この動作は8～14行目の記述に書かれています。
まずは、8～13行を削除して

```js:JavaScript
	j3( "mesh" ).on("click", function() {
          //処理したいコードを書く	
	} );
```

としましょう。

```js:JavaScript
j3( "mesh" )
```

は、jQueryだと$("mesh")と記述します。ただ、jQueryだとhtmlで使えるタグを記述するのでmeshを使うことはありません。

ここで大事なことは、meshというタグを選択しているということです。
これはセレクター（Selectors）を指定しています。このセレクターで指定したものに対して処理をしていきますということになります。なので、[jThree専用エディタ](http://editor.jthree.jp/)のデフォルトで記載されているmeshというオブジェクトが何かしら変化しています。

###「.on()」について

```js:JavaScript
	j3("mesh").on("click", function() {
          //処理したいコードを書く	
	} );
```


8行目の「.on()」というのがありますが、これは「イベントハンドラ」といいます。イベントハンドラは何かクリックやマウスオーバー（これらを「イベント」といいます。）などがあった時、そのイベントがトリガーとなって指定した処理が行われるというものです。「.on()」はイベントを複数指定出来るのが良いところで、「.on()」を覚えておけばだいたいのものは何とかなる万能のイベントハンドラです。（jQueryでは、ライブラリーのバーションによって動作しないことがあります。）

なので、上記のコードでは、meshをclickしたときに処理したいコードが動作します。
(.onの書き方は他にもありますが、ここでは一番簡単な記述を使用することにします。セレクターの説明もし易いので…)

##処理を書いていきましょう

今回は、アニメーションさせたいと思います。
アニメーションはjQueryでも使えますし、動いたら嬉しい動作だと思いますのでやってみましょう。

結論としてコードは

```js:JavaScript
	j3("mesh").on("click", function() {
		j3(this).animate({
			translateX: 4
		},1000);
	} );
```

とします。

```js:JavaScript
	j3(this)
```

このthisは前述したmeshのことを指していますが、動作をするのはmeshの **クリックしたオブジェクトのみ** です。

そのクリックしたオブジェクトに対して、「.animate()」で動きをつけていきます。

```js:JavaScript
		j3(this).animate({
			translateX: 4
		},1000);
```

translateXの部分は今の場所からx軸に4px移動するということになります。
（ここではx軸・y軸・z軸についての話は割愛します。）

```js:JavaScript
		},1000);
```

の1000は、「1秒」という時間の指定になります。

「.animation()」の記述については決まった記述方法があり、これらをAPI（Application Programming Interface）と呼びます。一言でいうと「便利な機能を簡単に使えるようにしたよ」というもので、他にも様々なAPIがあります。それぞれのAPIで記述方法が異なる場合があるので、その都度調べるなり覚えるなどをしていきましょう。

##実際に動かしてみましょう！

[jThree専用エディタ](http://editor.jthree.jp/)のjavascriptの8～14行を以下のコードに記述しなおし

```js:JavaScript
	j3("mesh").on("click", function() {
		j3(this).animate({
			translateX: 4
		},1000);
	} );
```

エディタ左上の保存を押し、画面右のプレビューの再生ボタンを押し、どれでもいいのでブロックをクリックしてみましょう。

動きましたか？
きっと動くはずですw（テストはした！）

この動作を、[jThree](http://jthree.jp/)を使わないでやると、コードも長くなるし大変です。
[jThree](http://jthree.jp/)を使うことでかなり楽が出来ています！

[jThree](http://jthree.jp/)は、まだまだ発展していて解決する課題もありますが、とても成長が早く今後も面白い展開があると思うので、皆さんも応援してみてはいかがでしょうか。

[開発者である松田さんへの応援はこちら](https://twitter.com/m_mitsuhide)