Web上で3DCGを表現する「three.js」を使ってみた！

こんにちは！Webディレクターの酒主です。
映画、アニメ、ゲームなど、様々な媒体で表現方法として使用されている3DCGですが、最近ではWebGLを使用したサイトや3Dコンテンツも増えてきて、表現の幅を広げています。
3DCG制作の経験が少しある私としては、ちょっと心惹かれるWebGL…　でもJavaScriptなんて知らない…
そんな初心者でも、WebGLを簡単に扱える「three.js」というJavaScriptライブラリーがあるらしいので、ご紹介したいと思います。

■「three.js」を入手する！

「three.js」はこちらから入手できます
http://threejs.org/
左側にあるメニューの「download」ボタンから一式を落としてください。

■図形を作成してみる！

three.jsについては、いろんな人が作成方法を紹介しています。
ファイル一式をダウンロードしてきただけではわからないので、記述する内容を調べつつ、回転する球を作成してみようと思います。

まずは、レンダラ―を初期化します。

　//レンダラーが2つあります。
　//「WebGLRenderer」はthree.jsの全機能が使えますが、
　//「CanvasRenderer」は一部機能しか使えません。
　//「antialias:true」はアンチエイリアスを有効（ture）にするか、
　//無効（false）にするか決められます。
      var renderer = new THREE.WebGLRenderer({ antialias:true });
　//3Dを表示するエリアを設定します。500px × 500pxにしています。
      renderer.setSize(500, 500);
　//設定したエリアの背景色（「dcdcdc」の部分です。16進数で指定）と、
　//透明度（「1.0」と設定しているところ）が設定できます。
      renderer.setClearColorHex(0xdcdcdc, 1.0);
　//レンダラーをDOMに設置します。
      document.body.appendChild(renderer.domElement);
}

次に、シーンとカメラを作成します。

　//シーンを作成します。
	var scene = new THREE.Scene();

　//カメラの設定です。
　//「PerspectiveCamera」は透視投影カメラです。
　//「15」と設定しているのは外角です。小さいほど望遠（視野が狭く）になり、
　//大きいほど広角（視野が広く）なります。「500 / 500」は画面アスペクト比です。
	var camera = new THREE.PerspectiveCamera(15, 500 / 500);
　//カメラの位置(x,y,z)を設定します。
	camera.position = new THREE.Vector3(0, 0, 8);
　//カメラが写す方向(x,y,z)を設定します。
	camera.lookAt(new THREE.Vector3(0, 0, 0));
　//シーンにカメラを追加します。
	scene.add(camera);

シーンにライトを設定します。

　// ライトの光の色（「0xcccccc」の「cccccc」部分。16進数です）を設定します。
	var light = new THREE.DirectionalLight(0xcccccc);
　//ライトが差してくる方向を設定しています。
	light.position = new THREE.Vector3(0.577, 0.577, 0.577);
　//シーンにライトを置きますよーという宣言です。
	scene.add(light);
　//「AmbientLight」は自然光のように全体に光を当てることができます。
　//「0x333333」は色の設定になります。
	var ambient = new THREE.AmbientLight(0x333333);
　//シーンにambientを追加します。
	scene.add(ambient);

※一部だけに光を当てたい場合は「SpotLight」という設定もあります

表示する3D（球体）を作成します。

　//球体（SphereGeometry）を作成します。
　//(0.8, 32, 16)は左から、半径、経度方向の分割数、緯度方向の分割数です。
	var geometry = new THREE.SphereGeometry(0.8, 32, 16);
　//球体のマテリアル（貼り付ける画像や質感など）を設定します。
	var texture  = THREE.ImageUtils.loadTexture('images/metal_00017.jpg');
	var material = new THREE.MeshPhongMaterial({
　//球体の色（color）、ハイライト（specular）、ハイライトの大きさ（shininess）、
　//陰の部分の色（ambient）をそれぞれ設定します。
	color: 0xffffff, specular: 0xcccccc, shininess:50, ambient: 0xffffff,
　//球体のマテリアルに対して、凹凸表現（bumpMap）を追加（bumpScale: 0.005）します。
	map: texture, bumpMap: texture, bumpScale: 0.005,});
　//設定した球体とマテリアルからメッシュを作成します。
	var mesh = new THREE.Mesh(geometry, material);
　//メッシュをシーンに追加します。
	scene.add(mesh);

設定したものをレンダリングして完成！できましたー！！