きのこる庭

「3Dって何となく難しそうで手を出しづらいなー」と少し敬遠していたけど、ブラウザ上とかでサクサク動いているのを見てるとやっぱり自分もやってみたい。

というわけで今回はWebブラウザ上で JSベースでぬるぬる動く3Dグラフィックスを実現できる「Three.js」をいじってみた。

Q. JSベースとはいってもなんか複雑そうで手を出しづらいんだけど…

結論から言えば、基本的な流れを理解してしまえばなんとなくいじれるようになった。

この「基本的な流れ」って言うのは、Canvasで言うなら「クロスブラウザのチェックをして、canvas要素取得して、コンテキストを変数に格納して…」みたいな感じ。Three.jsの場合は以下に説明するような流れになる。

Three.js で3Dをいじるまでの基本的な5つの流れ

Three.js で流れを組んでいて感じたのが「あれ？これ、何か映画の撮影みたい…」ということ。

というわけで、わかりやすいように映画の撮影現場のメタファーを使用しながら解説していきたい。

因みに、今回説明するのは概念的な部分でコードが出てこないので、実際のコードを見たい人は natural science様が出しているこちらあたりを参考にしてみると良いかも。

1. レンダラのセット

Three.jsで言うところの「レンダラ」は3D空間をブラウザ上で表示できるようにするためのもの。実際にレンダラを経由して 3Dを表示するためのCanvas の横幅/縦幅を設定したり、それをDOMに加えたり、最終的には3Dグラフィックスを表示したりする役割を持つ。

レンダラオブジェクトでやることは 映画で言うと監督みたいな役割。

2. カメラのセット

3D空間のどの位置にカメラを置いて、どこに焦点を当てるか…とか、どれくらいアップにするか…とか。

カメラオブジェクトでやることは映画で言うと、カメラマンに対して「この場所からあそこをこういう風に撮影してね」って伝えるような感じ。

3. シーンのセット

シーンオブジェクト は、舞台となる3D空間をつくって、そこに物体やライトを配置する。

シーンオブジェクトでやることは映画で言うと、どっかの撮影現場で舞台をセッティングして、照明係や男優・女優に対して「はい、じゃああらかじめ伝えておいた位置について準備して下さいー」って言う感じ。

4. ライトのセット

3D空間上を照らすための光をセットする( ここでは設定するだけで、実際の配置は「3. シーンのセット」が担当)。

映画で言うと、照明係に対して「この位置からあの位置に向けてこのぐらいの強さで、こういう色の光を当ててね」って伝えるような感じ。

5. 物体のセット

3D空間上に表示する3Dオブジェクトの形とか位置とかをセットする( ここでは設定するだけで、実際の配置は「3. シーンのセット」が担当)。

映画で言うと、男優や女優を用意して「こっちの方向向いてこの位置に立つようにして下さい」って言う感じ。

5つの準備が整ったら監督に撮影してもらおう( レンダラオブジェクト経由で3Dを描画 )。

因みに、実際に動く物体を表現するには、setIntervalとか使って一定時間おきに レンダラオブジェクトで描画みたいな流れになる。

実際のサンプルのキャプチャ画像がこんな感じ( 動作サンプルはこちら )。

この他、物体を球形にしてみたり地球を回してみたり色々できるので引き続き試してみたい。