theta360.comの代替はPannellumで決まり！

今更な話なんですが theta360.com が今年サービス終了しちゃったじゃないですか。
RICOH THETAで撮った360度画像を theta360.com にアップして、それをブログにも貼ったしていたんですが、気づいたら全て見れなくなってました。

あちゃー残念、何か代替手段を探さねばということでいろいろ検討した結果、
Pannellumに決めました。

決め手は軽量・シンプルで必要充分な機能。

詳しくはドキュメントを参照していただくとして、最初つまづいた点を。
このスクリプトはCDNから読み込ませた場合、画像のドメインとの不一致（CORSの設定）により動作しない場合がありました。

Pannellumのチュートリアルページで試すことができます。
上のパノラマのコード：

<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.5/pannellum.htm#panorama=https%3A//cdn.polyhaven.com/asset_img/primary/minedump_flats.png&autoLoad=true"></iframe>

imgur.com のようなCORSをサポートする画像シェアサービスを使用すれば問題なく表示されるとのことですが、外部サービスに依存するのは苦い思い出があってイヤ。
だって昔Twitterに画像アップロードする機能がなかった頃、Twitter用の画像共有サービスがいろいろあったけどみんなサービス終了しちゃったから。
そもそも theta360.com もサービス終了しちゃったわけだし。

なのでスタンドアローン版を自サイトに置くことに。
ワードプレス用プラグインもありますが、ブロックエディター派じゃないとメリットが薄いと感じました。
独自カスタマイズしたいしね。

というわけで以下はスタンドアローン版をiframeで貼る方法です。

このサイトの場合、/media/pano/ ディレクトリにpannellum.htmと360度天球画像を置くことで、
下記のようなコードにしています。
<iframe width="720" height="520" allowfullscreen style="margin:auto;" src="https://www.kyo.com/media/pano/#panorama=TEST.jpg&autoLoad=true&autoRotate=-8"></iframe>

theta360.com をブログに貼っていたときは宣伝的なものが表示されていたけどPannellumにしたことでスッキリしました。

ところでRICOH THETAは数々の後発製品も出ましたし、theta360.com は採算が難しかったのかもしれませんね。
RICOH THETAは本当に素晴らしい発明で大好きな製品なのでこれからも使っていきたいです。

Related posts:

旅犬さんと pannellum.jsをWebPやAVIF対応ブラウザなら自動切替したい コントワール・メディテラネ最終日 杉本博司さんの展覧会プレビュー Chiharu Shiota “Where are we going?”