ブラウザで3D。javascriptライブラリ「Three.js」

こんにちは。

まだまだウェブサイト全体をホームページと呼んでいた時代（ホームページとはそもそもウェブサイトのトップページの意味なのですが、昔はそこらへんあやふやで、なんでもかんでも「ホームページ」でした）、ブラウザは「ネットスケープナビゲーター（通称ネスケ）」がメイン、56kbpsのモデムで通信していた（56kbps=56000bit=7000byteつまり1秒に7KB。現在主流のフレッツ光は100Mbps＝100,000,000bit=12500KB！）頃から、VRMLという言語を使い、手打ちで座標を入力し、ウェブで3D表現を模索していたエージーワークス代表の増本修二です。＜前振り長すぎですね

そんな、昔から3D表現が大好きな私が、モダンブラウザで3d表示を可能にする、「Three.js」を御紹介させていただきます。

three.js、どんなものかと言いますと、私のイメージでは、一時期flashでの3Dライブラリ、「Papervision3d」のjavascript版、といったところでしょうか。3D空間にステージや光源、オブジェクトの形状やマテリアル、カメラなど、3d表示に必要な要素をjavascriptで定義し、それをレンダリングして表示します。

どの様なことが出来るかは、下記サイトを見ていただくのが一番早いです。
クオリティの高いサンプルが数多く掲載されています。

Three.js
http://threejs.org

まずはこのページの「download」からライブラリ一式（ちょっと重いですが）を入手します。

その中からまずは「three.min.js」を使用し、下記要領で記述します。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>three.js</title>
<style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
</style>
<script src="js/three.min.js"></script>
</head>
 
<body>
<script>
//①scene生成
var scene = new THREE.Scene();
 
//②camera生成
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
//③renderer生成
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
 
//④ジオメトリ生成
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
 
//⑤マテリアル生成
var material = new THREE.MeshPhongMaterial( { color: 0xcccccc } );
 
//⑥オブジェクト生成（ジオメトリとマテリアルがセットになったもの）
var cube = new THREE.Mesh( geometry, material );
 
//⑦シーンにオブジェクト追加
scene.add( cube );
 
//⑧ライト追加
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( -2, 2, 2 );
scene.add( directionalLight );
camera.position.z = 5;
 
//⑨レンダーファンクション
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
}
 
//⑩レンダー実行
render();
 
</script>
</body>
</html>

①scene
これは3D空間、全体を定義します。

②camera
定義した3D空間を、このカメラを通してみることになります。
ズーム率や角度、位置などを設定します。

③renderer
レンダラーの設定です。カメラを通して覗いた図を、描画します。

④ジオメトリ
3D空間に置かれるオブジェクトの形状の設定です。

⑤マテリアル
④オブジェクトの色や質感などを設定します。

⑥オブジェクト
④⑤で設定位した、ジオメトリとマテリアルをあわせてオブジェクトと呼びます。

⑦シーンにオブジェクト追加
①で定義したシーンに⑥のオブジェクトを追加します。

⑧ライト追加
ライトを定義し、こちらもシーンに追加します。
ライトの種類はいくつかあるので、threejs.orgで色々みてみるとよいです。

⑨レンダーファンクション
どのシーン、カメラをレンダリングするか、また、アニメーションの設定などをfunctionにまとめます。

⑩レンダー実行
最後に⑨のfunctionを実行します。

いかがでしょうか？下記の様な3Dが表示されたでしょうか？
http://web3d.ag-works.biz/basic/basic.html

以上、Three.jsのご紹介でした。