HTML5pano で RICOH THETA の全天球画像を自分のサイトに埋め込む
2013-11-10


THETA の生成する画像するデータは正距円筒図法 (equirectangular projection)という単純な方法で球状の画像データが2次元にマッピングされてます。これを扱えるものは他にもあるだろうといろいろ探してみたところ、HTML5 + Javascript で実装されたものがありました。HTML5pano です。

ただ、このHTML5panoは画像データのファイル名などがハードコードされていて若干使いにくいです。さらに調べたところ、jQeury向きに書きなおされているものがありました。

[URL]です。

これを使って、THETAで撮影したものをこのブログに埋め込んでみます。なお、HTTP access control (CORS)により、スクリプトとHTMLと画像データが同じホスト上に存在していないといけないため、このブログに貼ってるスクリプトは元のスクリプトを一箇所変更してあります。また、画像データとスクリプトを設置したサイトのサーバでは CORS の設定もしてあります。

--- orig/jquery.html5pano.js    2013-11-10 15:23:25.000000000 +0900
+++ new/jquery.html5pano.js     2013-11-10 15:52:14.896418651 +0900
@@ -178,6 +178,7 @@
                        // use local variable here. this will permet
                        // garbage collecting
                        var img = new Image();
+                       img.crossOrigin = 'Anonymous';
                        $(img).load(function _imgLoaded () {
                                _fillImgBuffer(img);
                                _init_vars(img);

で、以下のようになります。

//
[写真]
[プログラミング]

コメント(全0件)


記事を書く
powered by ASAHIネット