THETAや、Insta360、GoproMax等色々な360度カメラが普及しましたが、
数年前に、画像をWebに公開する際の技術選定をした結果を記録しておきます。
（新しいネタではありません。ご了承ください。）
<360写真が表示できるライブラリ>
その中でも、A-Frameを選定しました。
A-Frameをおすすめする理由は、
- ライブラリで組み込めるので、外部依存しない。
- オープンソースなのでランニングコストかからない。
- HTMLベースで書ける（動きはJSで作るが・・・。）
- 一つのソースで、PCブラウザ、スマホ、スマホVR、VRゴーグルすべてに対応する。
- ３D空間を作るイメージなので、３Dオブジェクトも扱える＝VRやARにも使える。
（３D空間で、床がなく、空に360度写真を貼り付けたイメージ。死角のないプラネタリウムのイメージ。）
一枚の360度写真を表示する例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image</title>
<meta name="description" content="360° Image - A-Frame">
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="360度写真へのPath.jpg" rotation="0 -90 0"></a-sky>
</a-scene>
</body>
</html>
（360度写真へのPath.jpgはご自身のファイルに合わせてください。）
これだけで360写真表示できます。（A-Frameはnpmでもインストール可能。)
表示されている写真は、平面に見えますが、マウスのドラッグで視線方向を360度自由に変更できます。
お使いの端末が、
- スマホであれば、ドラッグ以外にも端末を傾けること(ジャイロセンサー)で、視線方向を変更できます。
- 画面右下のVRボタンを押すと2眼VRモードになり、ハコスコ等の簡易VRゴーグルで見ることもできます。
- Quest等のVRゴーグルであれば、ブラウザでこのWebページを開き、右下のVRボタンを押すと、VRゴーグルの歩行（頭の方向）で視線方向を変えることができます。
ソースコードを簡単に解説
<a-scene>でA-Frameの空間を定義
この内
<a-sky>今回は360度写真なので、空に360度写真を貼り付けます。
rotationは、X,Y,Z軸の初期回転です。
カメラ機種によって、正面方向が変わるので、Y軸を90度回したりして初期位置（正面）を調整します。
どんな角度で撮影しても、基本的にカメラ側で天頂補正（ジャイロ）が効いているので、
<a-sky>に関しては、Y軸角度の調整のみで大丈夫です。
３D空間なので、本当はカメラ位置、ライト位置等ありますが、360度写真なら自身が中心なので、デフォルトでも大丈夫です。
クラウドサービスを使うこと無く、簡単に360度写真を表示できるサイトを自作できました。
おまけ
360度写真に慣れる「360度写真の中に文字を埋め込めないのか？」となります。
簡単にできます。
sceneの中に<a-text>タグを入れるだけです。
<a-text font="kelsonsans" value="Hello 360" width="6" position="-2.5 2 -1.5"
rotation="0 15 0"></a-text>
ただ、３D空間なので、テキストを置く位置、距離、角度は重要です。
-
位置はposition(XYZ)で指定、前方1.５ｍ左方向2.5m高さ２ｍなら(-2.5,2,-1.5)
- Z軸（奥行き方向） プラスは後ろ方向。マイナスは前方向。
- X軸（横方向）プラスは右方向。マイナスは左方向。
- Y軸（縦方向）プラスは上方向。マイナスは下方向。
-
距離は、カメラから０距離(位置が、0,0,0)では見えないです。
-
角度rotationは、文字やPNGの場合、視線と水平だとペラペラで見えません。
（これはカメラ設定後、Look-at-me機能もあります。） -
テキストは、現状英語フォントしか対応していないので、日本語を出すにはフォントを持参する必要があります。
-
ブラウザの平面で見ているうちは距離に違和感がないのですが、VRで左右視差（立体感）が有ると距離感が全然違って、調整に時間かかかることもあります。
360度写真を表示することができたので、
Web地図上にマーカーリンク等を作成し、iframe等で３６０度写真を表示すれば、GoogleStreetViewっぽい物を自作することも可能です。