なんて出来たら楽しいんじゃないかと思ったので、やってみた。
みんなが使っている、インターネットを見るためのソフト（ブラウザ）に、
Javascriptでプログラムを組んだりするだけで、
3Dの画像なんかを表示する技術が出来つつあります。
Three.js というJavascriptフレームワークを使うと、3Dグラフィックをブラウザに楽に描画できます。
でも、3Dグラフィックをコードだけでプログラミングするのはめんどうくさい。
巷には、 ShadeやPoser、3DSMAX、メタセコイア、六角大王、Blenderなど、
3Dグラフィックを出来るだけ簡単に作れるようなソフトがあって、
そんなソフトと同じように、Three.js用のデータを作れるものが、ThreeFabという名前で公開されています。
Moongift さんの紹介記事
Three.js対応。Webブラウザ上で3Dモデルを作成「ThreeFab」
で、これを使いながら、GoogleStreetView上に、自分の作った3Dグラフィックを描画できないかという実験です。
あ、結果から言うと、失敗です。
まずは、
ThreeFab の準備。
ThreeFab はGit 上にありますので、
Git が既に使えるという状態であれば、
Windowsのコマンドプロンプトを開いて、
cd c:\
git clone git://github.com/blackjk3/threefab
とすれば、
Cドライブ直下の threefab というディレクトリ に ファイルがダウンロードされ展開されます。
C:\threefab\index.html を GoogleChrome にドラッグアンドドロップすれば、
ThreeFab が使えます。(この使い方であってるのか？取り合えず動いた)
で、実際に3Dオブジェクトを作ってみた。
なんだこのタコチュウ。
で、出来たので（多分10分くらいで作った）、右上のエクスポートを押すと、
なんかいっぱいJavascriptコードが表示されるので、どっかにコピーしておきます。
次は Google Street View。
まずは、
http://code.google.com/intl/ja/apis/maps/documentation/javascript/v2/services.html
ここの左上の登録してAPIキーを取得をクリックして、
APIキーを取得します。
使うウェブサイトのアドレスを入れたら、APIキーが取得できると思うので、
Javascript のところに書いてあるものをまるっとコピーします。
で、どうやって使うかというと、
ストリートビューを表示する
ここに書いてあるのを改造しちゃいましょう。でへ。てへぺろ。
ていうか、openspc2.org って、色々なサンプルがあって凄いよねぇ。
で、なんかうまいことやろうと思ったけど、ThreeFab から export した Javascript のコードが動かない。
よく見ると、ところどころ、必要ないっぽい }); が存在している…
そこの部分をコメントアウトしても、なんか何にも表示されないし。
まぁ、仕方ない。こういう時は、あきらめよう。検索しても何も出てこない。
つか、そもそも Three.js の使い方が判らないからなー。
Three.js のサンプルコードを表示することにします。
Three.js もGit にあります。
いちいち clone とかしなくても、 Git のページをちょっと下にスクロールすると、
Minified Library って書いたリンクがあるので、それをダウンロードして使うと良いです。
その下にサンプルコードがある（赤い線の立方体がアニメーションするやつ）ので、
それをまんまコピペした。
で、ぽこぽこ書いてみた。
[CSS]
<style>
*{margin:0;padding:0;vertical-align:middle;}
#streetview{
position:absolute;
top :0;
left :0;
width :640px;
height :480px;
}
#three{
position:absolute;
top :0;
left :0;
width :640px;
height :480px;
}
</style>
[Javascript]
// Three.js のサンプルコード
var camera, scene, renderer,geometry, material, mesh;
function init() {
scene = new THREE.Scene();
// camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new THREE.PerspectiveCamera( 75, 640 / 480, 1, 10000 );
camera.position.z = 500;
scene.add( camera );
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
// renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize("640","480");
// document.body.appendChild( renderer.domElement );
$("#three").append(renderer.domElement);
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
// StreetView の 描画
var makeStreetView = function(callback){
var streetObj = new GStreetviewPanorama(document.getElementById("streetview"));
var sibuya = new GLatLng(35.660748,139.701762);
streetObj.setLocationAndPOV(sibuya);
if(callback && typeof(callback) == "function){callback();}
};
$(document).ready(function(){
makeStreetView(function(){
init();
animate();
});
});
[html]
<body>
<div id='three'></div>
<div id='streetview'></div>
</body>
みたいにしたけど、残念。Google Street View はFlashで動くので、z-index が効きません。
なので、Google Street View の上に、3Dオブジェクトを描画することが出来ませんでした。
Google Street View の下のレイヤに、赤い立方体が回っている感じになった。
Flash コンテンツが z-index を無視して覆い被さってしまう件
[flash][javascript] Flash の z-index を Javascript から有効にする
z-indexを無視してFlashが上に重なってしまうのに対処
色々調べたけど、まぁ、無理だなぁ。
あとからパラメタ書き換えたけど、うまくいかなかった。
つか、そもそも、Google Street View のAPI利用規約とかにひっかかりそうなので、
だめだろうな。うむ。
『地図上のロゴや属性を改変したり、見えにくくしないでください。』
って書いてあるしね。
でもまぁ、ブラウザで Three.js を使ったりすることを体験できたから良かった。
サンプルをみてるだけで満足することが多いので、
何かしら自分で作ってみることって大事ですよね。
結局サンプルはっつけただけの記事書いておいて、ですけど、そう思います。
