three.jsでWebGL入門
ご無沙汰しています iijmyaです
3ヶ月ぶりの更新です。すみません・・
先日、私はWebGLのJavaScriptライブラリである、「three.js」を使う機会がありました。
そこで、今回はthree.jsについてご紹介します！
1．WebGLとは
そもそもWebGLとは何なのでしょうか。
WebGLとは、ウェブブラウザ上で3次元空間を作り、仮想的な立体物を表示させるための標準仕様です。
WebGLは、2013年8月21日現在、Internet Explorerではバージョン10以下がサポートされていないため、Google Chromeでの閲覧が望ましいです
2．three.jsで3Dオブジェクトを描く（下準備）
それでは早速、three.jsを使ってWebGLを体験してみましょう！
■ three.jsのダウンロード
three.jsはこちらからダウンロードすることができます。
■ three.jsのjsファイルを読み込む
ダウンロードしたzipファイルを解凍すると、buildディレクトリの中に以下のファイルがあります。
- three.js
- three.min.js
今回は「three.min.js」をHTMLファイル内で読み込み、three.jsを使いましょう。
<script src="three.min.js"></script>
2．three.jsで3Dオブジェクトを描く
■ オブジェクトの描画工程
three.jsは内部的にcanvas要素を生成し、そこにオブジェクト(仮想的な立体物)を描画します。
オブジェクトを描画するには、以下の様な工程を踏みます。（場合によって順序が前後したり、省略する工程もあります）
- シーンの作成
- 表示するオブジェクトの作成
- カメラの作成
- 光源の作成
- レンダラの作成
- レンダリング
■ 変数の定義
あらかじめ使用する値を変数に格納しておきましょう。
var width = 600; //横幅 var height = 600; //縦幅 var fov = 80; //画角 var aspect = width / height; //画面アスペクト比 var near = 1; //クリッピング手前 var far = 1000; //クリッピング奥
■ シーンの作成
描画対象となる物体やその他のオブジェクトを格納するSceneクラスのインスタンスを作成します。
以降で作成するオブジェクトはすべてこのインスタンスに追加していき、最後にそれをレンダラに渡して描画します。
var scene = new THREE.Scene();
■ 表示するオブジェクトの作成
実際に表示したいオブジェクトをシーンに追加します。
three.jsでは、表示するオブジェクトは以下の3つの要素で構成されます。
- 形状 (Geometry)
- 質感 (Material)
- 実際に表示するオブジェクト (Mesh)
var geometry = new THREE.CubeGeometry(300, 300, 300); //幅、高さ、奥行きの指定
var material = new THREE.MeshLambertMaterial( { color: 0x77dd00 } ); //オブジェクトの色の指定
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
■ カメラの作成
シーン内のどこから見た風景を描画するかを指定するカメラを作成し、シーンに追加します。
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); camera.position.z = 500;
■ 光源の作成
オブジェクトを照らす光源をシーンに追加します。
光源を追加することで、オブジェクトの角度により明暗が出るため、より立体的に見えます！
var light = new THREE.DirectionalLight( 0xffffff, 3 ); //光の色と強さの指定 light.position.z = 3; scene.add( light );
■ レンダラの作成
オブジェクトの描画処理を担うレンダラを初期化します。
描画領域のサイズなどを設定したあと、描画領域となるDOM要素を取得し、ドキュメントの任意の位置に挿入します。
var renderer = new THREE.WebGLRenderer({ antialias:true }); //アンチエイリアス処理有効
renderer.setSize( width, height ); //描画領域のサイズ設定
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
■ レンダリング
以上の工程で表示させるシーンの準備が整ったのでレンダリングします。
静止画をただ描画するだけでは3D感が薄いので、今回はオブジェクトを回転させてみましょう。
オブジェクトの角度を変更するにはrotationプロパティを使用します。
function rendering(){
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
setTimeout(rendering, 15);
}
rendering();
■ まとめ
<html>
<head>
<meta charset="utf-8" />
<title>three.jsでWebGL入門</title>
</head>
<body>
<script src="./js/three.min.js" type="text/javascript"></script>
<script>
var width = 600; //横幅
var height = 600; //縦幅
var fov = 80; //画角
var aspect = width / height; //画面アスペクト比
var near = 1; //クリッピング手前
var far = 1000; //クリッピング奥
//------------------------------
// シーンの作成
//------------------------------
var scene = new THREE.Scene();
//------------------------------
// 表示するオブジェクトの作成
//------------------------------
var geometry = new THREE.CubeGeometry(300, 300, 300); //幅、高さ、奥行きの指定
var material = new THREE.MeshLambertMaterial( { color: 0x77dd00 } ); //オブジェクトの色の指定
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
//------------------------------
// カメラの作成
//------------------------------
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = 500;
//------------------------------
// 光源の作成
//------------------------------
var light = new THREE.DirectionalLight( 0xffffff, 3 ); //光の色と強さの指定
light.position.z = 3;
scene.add( light );
//------------------------------
// レンダラの作成
//------------------------------
var renderer = new THREE.WebGLRenderer({ antialias:true }); //アンチエイリアス処理有効
renderer.setSize( width, height ); //描画領域のサイズ設定
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
//------------------------------
// レンダリング
//------------------------------
function rendering(){
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
setTimeout(rendering, 15);
}
rendering();
</script>
</body>
</html>さて、ここまで書いたらHTMLファイルをブラウザ上で表示してみましょう。
くるくる回る立方体が表示されるはずです！
いかがでしたでしょうか。
WebGLのJavaScriptライブラリ「three.js」でグラフィックの表現の幅が広がりますね。
