Three.jsを使ってメッシュとFPSを表示をしてみた
WebGL and Three.js
http://www.slideshare.net/yomotsu/webgl-and-threejs
先日、HTML5 Conference 2012に参加し、
このセッションは参加しなかったのですが、資料を見て非常に興味を持ったので触ってみました。
■Three.jsとは
WebGLを扱うのはそれなりに敷居が高いのですが、
※ほんの少しリアルタイム3Dの研究に携わってた身ですが挑戦して挫折Orz
このThree.jsはWebGLをラッパーしたライブラリであり、
複雑な手順もなく直感的にWebGLを扱うことが出来ます。
https://github.com/mrdoob/three.js/
■Three.jsをダウンロードして読み込む
githubから/build/three.min.jsを任意の場所に置き、HTMLから読み込みます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src='resource/js/three.min.js'></script> </head> <body> <script> . . // ここに処理を書く . </script> </body> </html>
■Three.jsの初期設定をする
3Dを表示するには以下の設定が必要です。
- レンダリング:3D処理を描画する
- シーン:3Dモデルやカメラ等を登録する空間
- カメラ:空間内の視点
Three.jsでは以下のように設定します。
<script> var camera, scene, renderer; // 描画する領域 var width = window.innerWidth; var height = window.innerHeight; init(); function init() { // set renderer // ブラウザサイズで描画するよう設定 renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); // set scene // シーンを宣言 scene = new THREE.Scene(); // set camera // カメラの位置を手前にして設定 camera = new THREE.PerspectiveCamera(75, width / height, 1, 10000 ); camera.position.z = 1000; // シーン、カメラをレンダリングする renderer.render(scene, camera); } </script>
■3Dモデルを登録する
これだけだと何もない空間になってしまうので3Dモデルをシーンに登録します。
今回はgithubのサンプル通り四角形メッシュを登録します。
<script> var camera, scene, renderer; // 3Dモデルを格納する変数 var geometry, material, mesh; . . . init(); animate(); function init() { . . . // set model // 正方形を宣言 geometry = new THREE.CubeGeometry(200, 200, 200); // 赤っぽいワイヤーフレームを宣言 material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); // 上記2つを基にメッシュを生成してシーンに登録 mesh = new THREE.Mesh(geometry, material); scene.add(mesh); } // 生成したメッシュを回転させながらレンダリング function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); } </script>
■FPSを表示する
ブラウザ表示で気になるのが処理速度。3DではよくFPSを用いて計測します。
stats.jsを使うとJSによるFPSの計測が可能なのでこれを使ってみます。
https://github.com/mrdoob/stats.js
<script src='resource/js/three.min.js'></script> // Stats.jsを読み込む <script src='resource/js/Stats.js'></script> . . . <script> var camera, scene, renderer; // FPS表示を格納する変数 var stats; . . . document.body.appendChild(renderer.domElement); // set stats // 左上に表示するようCSSを記述してbody直下に表示 stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; stats.domElement.style.zIndex = 100; document.body.appendChild(stats.domElement); . . . renderer.render(scene, camera); // レンダリングするたびにFPSを計測 stats.update(); } </script>
ブラウザで確認すると以下のようになります。
http://bossato.github.com/sample/three/
今回は触りだけですが、APIが豊富で3Dモデルのインポートも出来るようなので、
何か作ってみたいですねー。