canvas続編！「Three.js」を使ってみたらさらに楽しすぎたお話。
さて、この前はHTML5の新要素「canvas」についていかに楽しいか、ということについて熱弁（そうでもない）しました。
しかし私、まだ「canvas」の楽しさの真髄に気づいていなかったんです。
ということでそんな楽しさの真髄を教えてくれた「Three.js」について今回はお話しようと思います。
Three.jsってなんぞ？
さて、Three.jsというのはどのようなものなのでしょう。
.jsがついている時点で「ライブラリだろな」と思うかもしれませんが、まさにその通り。
Three.jsは「簡単に」今年大流行間違いなしの「3D」を作成できてしまうライブラリなんです。
どれくらい簡単かというと〜〜〜
このくらい簡単！
ちょっとコメントアウトが多いかもしれませんが一応コンストラクタなり、仕組みなりを書いてあるのでよかったら読んでみてください...
ではThree.jsの基本となる仕組みを見ていきたいと思います。
Three.jsで基本となる仕組みは次の5つ。
...canvasは名前の通りキャンバスで、描画する領域を取得するために必要なものです。
②scene
...sceneとは3D空間のこと。この3D空間に後述のMeshなどを入れ、3Dコンテンツを作ります。
③camera
...cameraは名前の通りカメラ。どの位置からsceneを見るか、ということを決めるためのものです。
④Mesh
...3Dコンテンツの中でもオブジェクトとなるのがこのMesh。先ほどのpenで言えば赤い丸はこのMeshで作られています。
Meshは「geometry（ジオメトリ:形状）」と「material（マテリアル:素材）」で構成され、それぞれプロパティをカスタマイズできる。
⑤renderer
...rendererもその名の通り、レンダリングをするもの。
レンダリングとは、
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成すること
と書いてありますね。
このレンダリングをすることによって3Dコンテンツが可視化されるわけです。要するに一番上位の存在というわけですね。
さて、基本となる仕組みはこの5つでそれぞれpen内に自分なりの解釈をコメントアウトにて載せております。
コメントアウトを除けばコード量はかなり少ないですし、仕組みを想像できればスッと理解できる代物です。（と言いつつ結構曖昧...）
イメージ的にはjsのDOM操作したりする感じと似てる？ような気がしますね。
さて、先ほどのpenでも3Dっぽさはありましたがさらに3D要素を加えたのがこちらになります。
ああ、まさに3D...
こちらもコメントアウト満載で申し訳ないのですが、一応解釈を記載しています。
このように、Meshをカスタマイズして自分なりの3Dオブジェクトを作成できますし3D感満載の奥行きがある動きも実装することができます。
また、Tweenなどのアニメーションライブラリと組み合わせることでかなり大胆な3Dコンテンツを作成できるようなのでチビチビ作っているサイトのファーストビューに使えたらなあ...と画策しております。
かなり取っつきやすいライブラリだと思いますし、公式ページにはどんなものかな〜と分かるようなサンプルもたくさんあります！
是非一度お試しあれ！
