A-Frameで360°画像表示
A-Frameとは？
Mozillaが作っている仮想現実体験を構築するためのWebフレームワークです。
3D取り扱ったり、360°画像や動画も表示できたり。
3DやVRでやることをWEBでやれるようにサポートしてくれます。
2018/12/29日現在ではバージョンは0.8.2。
公式サイトに色々サンプルもあるので除くだけでも面白いです。
A-Frame – Make WebVR
360°画像表示
サンプルコード
単にHTMLだけ作ってやろうとするとCORSで怒られるので、適当にサーバを立ててやりました。
画像はRICOH THETA SCで撮ったものです。
[a-]がついたタグが沢山用意されています。
天球の画像はa-skyで表示できます。
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<title> a-frame 360 image </title>
</head>
<body>
<a-scene>
<a-sky src="/images/360image.JPG" rotation="0 -90 -20"></a-sky>
</a-scene>
</body>
</html>
表示結果
PC
Chromeで表示しました。マウスで見渡せます。
右下のメガネアイコンをクリックで全画面になりました。
スマホ
スマホだとジャイロとスワイプで見渡せました。
右下のメガネアイコンでVR用に画面表示にできました。
AndroidのChrome、iOSのSafariで確認しています。
画像はAndroidです。
iOSだと上下のアドレスバーが消えなくて完全な全画面表示できないことがあるみたいです。
弄った感じだとiPhone7以上だと大丈夫で、それ未満だとアドレスバーが出ちゃう印象です。