旅行に行ってきたので、その時の360°画像をVRゴーグルで見れるようにしてみました。
先日ちょこっとさわったので、A-FRAMEを利用してみました。
リンクにカーソルを合わせると3枚の画像が順番に切り替わっていきます。
demo
こまったこと
ジャイロ問題
iOS12.2以降でジャイロセンサーがOFFになってます。
iOS 12.2でWebVRとWebARが半ば終わった件について
私のiPhoneSEはiOS12.4.1なので設定変更が必要でした。
設定 > Safari > モーションと画面の向きのアクセス をONにしました。
それでも動いたり動かなかったり問題
最初は、VRモードで動作確認できたサイトのコードを丸パクリしました。
そのコードをVSCodeのLiveServerというExtensionで実行すると動作しませんでした。
確かな情報は見つけられていないのですが、どうやら上記設定をONにしても、プロトコルがhttpだとジャイロセンサーのデータが取得できないようでした。
LiveServerの設定を変更し、httpsで起動するようにしたら動作するようになりました。
Live Server for Visual Studio Code で HTTPS を有効にする
リンクの実装
はじめ、A-FRAMEが標準で用意しているa-linkという機能で、リンクを実装しました。
画像部分が赤みがかるので、どこにリンクするのかよくわからない状態になりました。
赤みがかるのを変えたかったのですが、そういったアトリビュートはなさそうなので、a-circleで無理やりつくりました。
a-linkとさほど違和感なくできたのではないかと思います。
今後の課題
- 画像がパッときりかわるので、かっこいいエフェクトとか欲しいです。
- リンクはすこし動いてる方が目立ちそうなので、もう少し工夫します。