12月 12

※ブラウザ選ぶようです。手元の Firefox, Chrome では表示できますが、Safari, iPhone, iPad, IE ではだめでした。表示できない方、ごめんなさいm(__)m

RICOH THETA の画像を埋め込む | KNCN weblog で theta360.com むアップした全天球画像を埋め込めました。また、THETA対応 360player | パノラマ工房を使っても埋め込むことができます。

もう一つ、他所様のサービスを使わずに自前のサーバだけで全天球画像をご覧いただく方法を紹介します。
thaga/IOTA · GitHub を利用させていただきました。適当な場所に iota.jsx.js を設置し、ヘッダに

<script src="http://設置した場所/iota.jsx.js"></script>

と記述しておきます。THETA の画像を適切な場所にアップロードし、実際に埋め込みたいところで、

<canvas data-theta-img="/適切な場所/R00xxxxx.JPG" width="512" height="320"></canvas>

と記述すると、下記のような画像が表示されます。

そのままグリグリできますし、マウスのホイールでズームもします。画像をダブルクリックすると、フルスクリーンで全天球画像がご覧いただけます。ESCキーを押せば、元に戻ります。
※ブラウザ選ぶようです。手元の Firefox, Chrome では表示できますが、Safari, iPhone, iPad, IE ではだめでした。表示できない方、ごめんなさいm(__)m

この weblog で利用している FreeBSD 9-STABLE でもなんの問題も無く利用できました。

同じ画像を theta360.com から埋め込むと、こんな感じです。

やはり、公式がいいのか・・・

関連記事

 
Posted: 12月 12日 2013 at 12:12 5,630 views   Tagged with:


にほんブログ村 PC家電ブログ Macへ にほんブログ村 野球ブログ 広島東洋カープへ にほんブログ村 写真ブログ デジタル一眼レフカメラへ 人気ブログランキングへ 広島ブログ


週刊 鉄道ペディア 国鉄JR篇 JTB Time Table MacPeople Software Design Hiroshima Athlete Magazine EIZOダイレクト フォトブック作成サービスcocoal(ココアル)
preload preload preload