HTML5 canvasで描画の実験 – その2

前回に引き続き、canvasでの描画です。
今回は唐突に3Dです。
Three.jsというライブラリを使用しています。
Flashで有名なPapervision3Dと似たようなライブラリ・・・のようです。
残念ながら3DにもFlashにもさほど詳しくないのですが「なんとなく小回りが利いて使いやすそう」なライブラリに見えたので使ってみました。

今回はThree.jsの「r18」というバージョンを使っています。
ライブラリの都合上、IEは非対応、またOpera（10.63）では描画時に消去するところが上手く行かないようです。

処理のメインになるのは3d.jsですが、明示的に初期化する必要のないプロパティも初期化してあります。
「こんなプロパティがあるんだよ」という自分へのメモ書きですね。
順を追って説明してみようと思いますが、3Dの専門的な説明については専門書とかGoogle先生に聞いた方が確実だと思います。

scene = new THREE.Scene();

まずは3D空間の「シーン」を作成します。
Three.jsの3D空間は右手座標系のようです。
また回転方向は右ねじ方向のようです。
物凄く乱暴に言えば中心から右方向がX軸のプラス方向、上方向がY軸のプラス方向、手前方向がZ軸のプラス方向、そして回転はそれぞれの軸のプラス方向に対して右回転が正方向です。

camera = new THREE.Camera(60, 1, 1, 1000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 500;
camera.target.position.x = 0;
camera.target.position.y = 0;
camera.target.position.z = 0;

続いてカメラを設置します。
Three.jsの標準カメラは視錐台によるものが用意されています。
引数は4つあり、視野角（FoV）、アスペクト比、ニアクリップ、ファークリップです。
ざっくり説明すると、カメラ位置を頂点とした四角錘が「視野」となり、オブジェクトを描画するかどうかは「ニアクリップ」と「ファークリップ」の間にあるかどうかで決まり、カメラ位置と視線はプロパティのpotisionとtarget.positionによって決まります。
3D空間の原点からZ軸方向に500のところにカメラを置き、原点を見ている、という状態になります。
アスペクト比については最終的に描画する先の縦横比を指定します。

var geometry = new Cube(200, 200, 200);
geometry.faces[0].color.setRGBA(1, 0, 0, 1);
geometry.faces[1].color.setRGBA(0, 1, 0, 1);
geometry.faces[2].color.setRGBA(0, 0, 1, 1);
geometry.faces[3].color.setRGBA(1, 1, 0, 1);
geometry.faces[4].color.setRGBA(1, 0, 1, 1);
geometry.faces[5].color.setRGBA(0, 1, 1, 1);

cube = new THREE.Mesh(geometry, new THREE.MeshFaceColorFillMaterial());
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
cube.rotation.x = 0;
cube.rotation.y = 0;
cube.rotation.z = 0;

EXAMPLEの中にあったプリミティブなCubeオブジェクトを使用しています・・・が。
ここは全く分かっていません・・・済みません。
立方体をXYZそれぞれ200のサイズで作成し、それぞれの面に対して色を指定、その位置をXYZそれぞれ0に（立方体の原点は中心にあります）、角度もXYZそれぞれ0に設定、となります。
このオブジェクトの部分は後ほどしっかり調べてみたいと思います。

scene.addObject(cube);

立方体をシーンに追加します。

renderer = new THREE.CanvasRenderer();
renderer.setSize(500, 500);

container = document.getElementById("container");
container.appendChild(renderer.domElement);

レンダラとしてcanvasを用いた「CanvasRenderer」で500×500のキャンバスを作成し、HTMLの#container要素に追加します。