2012年2月8日水曜日

Three.js と Google Street View で 街にモンスター出現

なんて出来たら楽しいんじゃないかと思ったので、やってみた。

みんなが使っている、インターネットを見るためのソフト(ブラウザ)に、
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 を使ったりすることを体験できたから良かった。
サンプルをみてるだけで満足することが多いので、
何かしら自分で作ってみることって大事ですよね。
結局サンプルはっつけただけの記事書いておいて、ですけど、そう思います。

0 件のコメント:

コメントを投稿