3DモデルをWebブラウザで表示する
最後に、3DモデルをWebブラウザで表示します。今回はThree.jsを使いました。
Three.js
Three.jsはWebGLを扱えるJavaScriptライブラリです。今回はバージョン「r58」を使用しました。
Three.jsは現在でも頻繁に更新されており、少し前のバージョンで動いていたものが動かなくなってしまうこともよくあります。そのため、Three.jsを調査する際には本家サイトのデモやドキュメントなどを確認しながら作成するのが良いと思います。
筆者も今回はサンプルコードを参考にしながら、デモを作成しました。
-
参考にしたサンプルコード
- canvas_geometry_cube.html（物体の回転）
- webgl_lights_hemisphere.html（モデルの読み込み）
デモ
完成したものは以下のようになります。Google Chrome（version 26.0.1410.64 m）とFirefox（version 21.0）で動作確認しています。
プログラムの説明
今回のデモは、Three.jsのexamplesフォルダ配下にある、「canvas_geometry_cube.html」を以下の箇所について修正したものになります。
ライトを当てる
// define light params
var light = new THREE.DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 1, 1 ).normalize();
scene.add( light );
var ambientLight = new THREE.AmbientLight( 0x111111 );
scene.add( ambientLight );
モデルの読み込み
// load model
var loader = new THREE.JSONLoader();
loader.load( 'model.js', function ( geometry ) {
model = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({color: 0x000088, side:THREE.DoubleSide}) );
scene.add( model );
animate();
} );
レンダラーを「CanvasRenderer」から「WebGLRenderer」に変更
//renderer = new THREE.CanvasRenderer(); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );
マウスホイールイベントを取得して処理を実行する
function onDocumentWheel( event ) {
var delta = event.wheelDelta || event.detail;
camera.position.z += delta > 0 ? 0.3 : -0.3;
if(camera.position.z < 1){ camera.position.z = 1;} // min check
if(camera.position.z > 10){ camera.position.z = 10;} // max check
}
これらの変更を加えることで、Kinectで3Dモデルを読み込みWebブラウザで表示／回転させることができます。詳細はデモのソースをご参照ください。
