データの回転
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になりました。
