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

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

データの回転

　Kinect Fusionで取得したデータをそのまま表示すると、モデルが予定とは違う方向を向いていたりします。これは撮影開始時のKinectセンサーの位置や向きによって再構成データのXYZ軸が決定することが原因のようです。そこで、データの回転を行って自然に見えるような位置に設定しましょう。

　「Filters」→「Normals,Curvatures and Orientation」→「Transform:Rotate」を選択します。

　「Preview」チェックボックスをチェックしておくと、傾きが確認できるので、いい感じに合わせてから「Apply」ボタンを押下します。

Three.js用のデータフォーマットに変換

　最後に、Three.jsで表示するためのデータフォーマットに変換します。今回は、OBJからJSONModelに変換します。

　まずは、BlenderからThree.js用フォーマットで出力できるように設定しましょう。

　Three.jsの中に、Blender用のアドオンが用意されています（\utils\exporters\blender\2.66\scripts\addons）のでこれを以下のフォルダに格納します。

• Windowsの場合：C:\Users\[username]\AppData\Roaming\Blender Foundation\Blender\[blenderのversion]\scripts\addons
• Macの場合：/Applications/Blender/blender.app/Contents/MacOS/[Blenderのversion]/scripts/addons

　この後、Three.jsの出力設定をONにすることでThree.jsで出力できるようになっているはずです。

　なお、BlenderでThree.js形式で出力する設定については、『多彩な表現力のWebGLを扱いやすくするThree.js』を参考にさせていただきました。ありがとうございます。また、5月16日時点ではThree.js内に用意されているaddonのBlenderのバージョンは2.6.6までしか用意されていませんでしたが、2.6.7でも同じように動作しました。

　作成した3Dモデルをblenderにimportした後、「File」→「export」→「Three.js（.js）」を選択し、exportを実行します。

　JSONModel出力時の設定は、以下のようにしました。

　Three.jsで表示することを考えて「Align model」の値を「Center」にしておきました。

　これで、Webブラウザで表示するための3Dモデル（Three.js用のフォーマット）が完成です。最終的には3Dモデルのファイルサイズは0.99MByteになりました。