tiger

2012.07.22

3Dレンダリングエンジンthree.jsをさわってみました

JavaScript

こんにちわ。モニプラ for Facebookを担当しています高橋です。
先日、開発合宿に行って参りまして、『three.js』をさわってみたので
簡単にご紹介したいと思います。

three.jsとは

http://mrdoob.github.com/three.js/
オープンソースのJavascript3Dレンダリングエンジンです。
こんなことやこんなことがJavascriptで実装できちゃうすごいやつです。

簡単なコードで３Ｄレンダリングを行えるのはもちろんですが
レンダリングの方式をWebGL、canvas、SVGから選択することができます。
いずれもHTML5の技術ですが、まだまだブラウザのサポート状況はまちまちですので
ブラウザによって方式を動的に変えるということも可能になります。
ただし、WebGL以外は処理能力はかなり落ちてしまいますのであまり複雑なことはできないかもしれません。

three.jsに登場する代表的概念

three.jsを操るには理解しないといけない概念がいくつかあります。
その代表的なものを説明したいと思います。

・シーン

簡単にいうと”空間”というところでしょうか。
このシーンに以下に説明するオブジェクトやライトを配置していくという考え方になります。

・カメラ

ブラウザにはカメラから見た空間が投影されます。
位置(x,y,z)とカメラの投影方法が定義されます。
投影の方法はPerspective（遠近法）とOrthographic（正射法）の二つがあります。

・レンダラー

ブラウザ上の描画領域（縦、横サイズ）とレンダリングの方式を定義するものです。
レンダリングの方式は先述でも触れてますが、WebGL、canvas、SVGから選択することができます。
レンダリングする際はシーンとカメラを指定します。

・オブジェクト

線や面、立体など描画される形のあるものです。

・マテリアル

オブジェクトの表面を表現するものです。
光を反射する素材や画像（テクスチャ）などがあります。

・ライト

光源です。
光源の種類によって位置、強さ、色などが定義できます。
光源の種類はスポットライトや環境光などがあります。

コード例

では長々と説明しましたが、実際のコードで試していきたいと思います。
まずはシンプルな球体を表示してみます。
three.jsはこちらでダウンロードできます。

<!doctype html>
<html>
	<body>			
		<style> body {background-color: #f0f0f0;} </style>			
		<script src="three.js/build/three.js"></script>			
		<script>

			var camera, scene, mesh, light, renderer;
			
			init();
			animate();
			
			function init() {
			
				//カメラの作成 引数は 視野角、アスペクト比、範囲From、範囲To
				//この概念はこちらで詳しく解説されています
				//http://www.glprogramming.com/red/chapter03.html#name3 の3-14
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
				//カメラの位置
				camera.position.set( 0, 0, 300 );	//x,y,z
			
				//シーンの作成
				scene = new THREE.Scene();
				
				//球体の作成
				var geometry = new THREE.SphereGeometry( 150, 50, 50 );		//球体の半径, 粒度の幅、粒度の高さ	

				//球面のマテリアルを作成
				var material = new THREE.MeshLambertMaterial( { color: 0x333333 } );	//色
				mesh = new THREE.Mesh( geometry, material );
				
				//球体の位置
				mesh.position.set(0, 0, -500);
				//球体をシーンに追加
				scene.add( mesh );

				//レンダラーを作成
				renderer = new THREE.WebGLRenderer()
				renderer.setSize( window.innerWidth, window.innerHeight );	//描画領域のサイズ（横）, 描画領域のサイズ（縦）
				document.body.appendChild( renderer.domElement );			//要素を追加
			
			}
			
			function animate() {
				requestAnimationFrame( animate );
				render();
			}
			
			function render() {
				renderer.render( scene, camera );
			}

		</script>
	</body>
</html>

<!doctype html>

<html>

<body>

var camera, scene, mesh, light, renderer;

init();

animate();

function init() {

//カメラの作成引数は視野角、アスペクト比、範囲From、範囲To

//この概念はこちらで詳しく解説されています

//http://www.glprogramming.com/red/chapter03.html#name3 の3-14

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );

//カメラの位置

camera.position.set( 0, 0, 300 ); //x,y,z

//シーンの作成

scene = new THREE.Scene();

//球体の作成

var geometry = new THREE.SphereGeometry( 150, 50, 50 ); //球体の半径, 粒度の幅、粒度の高さ

//球面のマテリアルを作成

var material = new THREE.MeshLambertMaterial( { color: 0x333333 } ); //色

mesh = new THREE.Mesh( geometry, material );

//球体の位置

mesh.position.set(0, 0, -500);

//球体をシーンに追加

scene.add( mesh );

//レンダラーを作成

renderer = new THREE.WebGLRenderer()

renderer.setSize( window.innerWidth, window.innerHeight ); //描画領域のサイズ（横）, 描画領域のサイズ（縦）

document.body.appendChild( renderer.domElement ); //要素を追加

}

function animate() {

requestAnimationFrame( animate );

render();

}

function render() {

renderer.render( scene, camera );

}

</script>

</body>

</html>

ブラウザで動かしてみるとこんな感じです。

全く3Dっぽくないですね。
ライトを設置してみます。

以下のコードinit()内に追加します。

				//ライトを作成
				light = new THREE.DirectionalLight( 0xffffff, 4 );	//色, 光の強さ
				light.position.set( -100, -50, 400 ).normalize();	//位置
				scene.add( light );		//シーンに追加

//ライトを作成

light = new THREE.DirectionalLight( 0xffffff, 4 ); //色, 光の強さ

light.position.set( -100, -50, 400 ).normalize(); //位置

scene.add( light ); //シーンに追加

こんな感じになります。

ちょっと雰囲気が出てきましたね。
さらに表面にテクスチャを施して金属の球体っぽくしてみます。
マテリアルを作成しているあたりを以下のように変更します。

				//球面のマテリアルを作成
				//var material = new THREE.MeshLambertMaterial( { color: 0x333333 } );	//色
				var material = new THREE.MeshLambertMaterial( { color: 0xCCCCCC, map: new THREE.ImageUtils.loadTexture('./metal.jpg') } );	//色, テクスチャ

//球面のマテリアルを作成

//var material = new THREE.MeshLambertMaterial( { color: 0x333333 } ); //色

var material = new THREE.MeshLambertMaterial( { color: 0xCCCCCC, map: new THREE.ImageUtils.loadTexture('./metal.jpg') } ); //色, テクスチャ

おー、いい感じですね。
テクスチャは任意の画像を使えるのでこんなこともできちゃいます。

最後に

さらにオブジェクトを動かしたり、カメラを動かしたりアニメーションさせることも簡単にできちゃいます。
たったこれだけのコードでこんなことができるなんてすごいですね！
three.jsはドキュメントがあまり整理されていないのでそこは期待できないですが、
ソースに使い方が書いてたりサンプルが豊富なのでなんとかなります。

アライドアーキテクツではエンジニアを随時募集しております。
新技術が大好きという方はぜひ。採用サイトはこちらです。