Three.js の基礎 #JavaScript

せっかく勉強したので自分のメモ用に書いておきます。間違っている所もあるかもしれませんが、その際はご指摘ください。

three.jsとはWebGLをさらにリッチなものにするためのjavascriptで書かれたライブラリの１つです。(CanvasやSVGなどでも使えます)

必要なものは３つ

シーン
scene = new THREE.Scene();
まず１つめに必要なものがシーンです。
シーンとはこれから作っていく3D空間のことです。これからここに色々追加していきます。

カメラ
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
PerspectiveCameraには以下の４つの引数を入力します

fov:カメラの画角を入れます（Camera frustum vertical field of view.）
aspect:縦横比を入力します。（Camera frustum aspect ratio.）
near:撮影範囲の手前の距離を指定します。nearよりも近くにあるものはレンダリングの対象になりません（Camera frustum near plane.）
far:撮影範囲の最大距離を指定します。farより遠くのものはレンダリングの対象になりません（Camera frustum near plane.）

レンダラー

renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
var container = document.getElementById('container');
container.appendChild(rendrer.domElement()); //レンダラーをDOM上に設置

renderer.setSize(width, height);のwidthとheightで、レンダラーの横幅と高さを指定します。

シーンに光源とオブジェクトを追加

先ほど作成したシーンに光源とオブジェクトを追加していきます。いきなり、必要な３つ以外のものが出てきましたね。たしかに、シーン、カメラ、レンダラーの３つがあれば表示することはできますが、このままでは、シーン上に何もないので意味がありません。そこで、光源とオブジェクト、要はレンダリングの対象をシーン上に追加していきます。

光源
光源には何種類かありますが、今回は平行光源を使用しています。

var directionalLight = new THREE.DirectionalLight( hex, intensity); //ライト作成
directionalLight.position.set( 100, 100, 100);//ライトの位置
directionalLight.lookAt(new THREE.Vector3(0, 0, 0));//ライトの向き
scene.add(directionalLight); //シーンにライトを追加する

DirectionalLightには２つの引数があります
hex:光の色（Numeric value of the RGB component of the color. ）
intensity:光の強さ。デフォルト値は１です。（Numeric value of the light's strength/intensity.）

オブジェクト
オブジェクトを作る前に、まずオブジェクトはgeometryとmaterialからできています。イメージ的にはgeometryで形を作って、materialで材質を決めるという感じです。

var geometry = new THREE.CubeGeometry(50, 50, 50);  //立方体作成
var material = new THREE.MeshPhongMaterial({color: 0xFFFFaa});
var mesh = new THREE.Mesh(geometry, material); // 立方体と材質を結びつけてメッシュ作成
scene.add(mesh);//シーンに追加

geometryにはcubeを今回は使っています。引数は横幅、高さ、奥行きとなっています。さらにオプションで、それぞれのセグメントも追加することができます。セグメントのデフォルト値は１です。
materialも様々ありますが、MeshPhongMaterialを今回は使用。引数は色を指定していますが、他にも影など指定可能。

レンダリングする

ここまでで、光源とオブジェクトを追加したシーン、カメラ、レンダラーの準備ができましたので、最後にレンダリングします。

renderer.render(scene, camera);  //レンダリング

これで、レンダリングが行われオブジェクトがWebGL上に表示されるはずです。しかし、アニメーションとして動きのあるオブジェクトを表示するにはこのレンダリングを何度も行う必要があります。
そこで

requestAnimationFrame(関数名);

を使い、再帰関数として何度もレンダリングを行います。