Kinectを利用した簡単3Dモデル作成と3Dモデル活用法

近未来の技術トレンドを先取り！ 「Tech-Sketch」出張所 第4回

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（モデルの読み込み）

• Three.jsのドキュメント

デモ

　完成したものは以下のようになります。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ブラウザで表示／回転させることができます。詳細はデモのソースをご参照ください。