HTML5pano で RICOH THETA の全天球画像を自分のサイトに埋め込む ― 2013年11月10日
THETA の生成する画像するデータは正距円筒図法 (equirectangular projection)という単純な方法で球状の画像データが2次元にマッピングされてます。これを扱えるものは他にもあるだろうといろいろ探してみたところ、HTML5 + Javascript で実装されたものがありました。HTML5pano です。
ただ、このHTML5panoは画像データのファイル名などがハードコードされていて若干使いにくいです。さらに調べたところ、jQeury向きに書きなおされているものがありました。
https://github.com/DeuxHuitHuit/HTML5panoです。
これを使って、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);
で、以下のようになります。
最近のコメント