Google Street View 上に Three.js の 3D グラフィックを表示

実行結果は

http://psychedesire.webcrow.jp/stmon/

キャラクタがボヨンボヨンします。
WebGL対応のブラウザで開いてください。Chromeとかなら大丈夫だと思うよ。

コチラより。
今のところGoogleに怒られていません。
まぁ、アクセス自体が無いからねぇ。

3D オブジェクトは、メタセコイアで作り、それを Blender にインポートして、Blender から .js に変換しました。
mesh.rotation.x とかが動かない？よくわからないので、
camera.rotaion.x とかで無理矢理キャラクタをボヨンボヨン動かしています。

殆どのやり方は、

空が狭い: Three.jsでMQOデータを表示するまで

こちらを参考にしましたが、違うやり方をしたのが2点あって、
1点が、
Blender に メタセコイアのデータ .mqp をインポートする場合は、

　Blender2.5～2.6 - とあるPGの研究記録Ⅱ（レコーダー）

このインポータを使いました。Blender の最新 2.6.1 にも対応しています。

2点目が、
Blender から Three.js への エクスポータが、現状 2.6.0 にしか対応していないので、
 \Blender\2.61\scripts\addons\io_mesh_threejs\__init__.py
の28行目の 2.6.0 を 2.6.1 に書き換えました。

苦労した点、というわけじゃないけど、
ブラウザで3Dオブジェクトを表示したときに、どこにオブジェクトがあるのか、わからなかったので、
カメラの位置とかを色々動かして、なんとか最適なカメラポジションとか設定しました。
なんせ、3Dがわからないので。
コツとしては（？）オブジェクトを、ステージに対して、凄く巨大にすればいいみたいです。
あと、何故か、上下逆転する？ので、Blender上でY軸に180度回転させたりしています。

画像的に言うと、メタセコで

こうやって作って、
Blenderで

こうしてから、Three.js にエクスポートしてる感じです。。。
よくわからないけど、 これでうまくいった。
取り合えず、素材を６個作るので限界だった～。
3Dで凄い造型を作る人って、凄いよね。

マウスのイヴェント処理に応じて、3Dオブジェクトのカメラ位置を変えたり、
連動してストリートビューの表示を変えたり出来たら、見た目部分はOKかなーと思います。
あとは、部品だよね。これは。あまりにショボすぎるけど、
フリーのやつ使うのもねー。せっかくだから自作したいもんねー。

Googleに怒られるまで、チョコチョコイジって遊びたいですね。