Three.jsで遊んでみる：フォト・スフィア

グーグルマップとかストリートビューで見かけるフォトスフィア(Photo Sphere)の360度パノラマ写真ですが、上手く表示される環境だとマウスや指でグリグリ動かしながら違う方向を画面上で見ることができます。

以前はフォトスフェィア表示用のAPIをグーグルが提供していて比較的簡単にウェブページにフォトスフィア画像を表示できたみたいですが、なぜか提供が終わってしまったみたいで、Three.jsのライブラリ(バージョンR101)を使ってどうにか表示させてみました。 このページに組み込んだコードが上手く動けばこの下にフォトスフィアの画像が表示されて、マウスや指で上下左右にグリグリ動かしたり、マウスのスクロールホィールでズーム出来るはずです（ごめんなさい、二本指ズームには対応していません。）。

残念ながら、Google Chrome 9, Firefox 4, Opera 15, Safari 5.1, Internet Explorer 11よりも前のバージョンのブラウザーやOpera MiniではWebGLが正式にサポートされていないみたいで上手く表示されないかもしれません。


Three.jsのライブラリ使用にあたってのライセンス:

MasterMapsというサイトの記事にThree.jsライブラリを使ってフォトスフィアを表示してみたという記事があったのでコピペ感覚で比較的簡単にフォトスフィアを表示出来るかと思ったのですが、使われていたライブラリのバージョン(R70)が現在リリースされているバージョン(R101)より古かったので、記事を参考にして改めてJavaScriptのコードを書いてこのページに組み込んでみました。 コードに興味のある方はPCのブラウザなどでこのページのソースを表示してみてください。

このブログのサイトにアップロードされたフォトスフィアの画像を使っているのですが、サイズが大きな画像はアップロードの段階でファイルのサイズが小さめに変更されてしまうみたいで残念ながら画質が落ちてしまっています。



コメント

コメントを投稿