share facebook facebook twitter menu hatena pocket slack

2019.09.17 TUE

A-FRAME: 360°画像ビュアーの作成

松本 勝年

WRITTEN BY 松本 勝年

旅行に行ってきたので、その時の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とさほど違和感なくできたのではないかと思います。

今後の課題

  • 画像がパッときりかわるので、かっこいいエフェクトとか欲しいです。
  • リンクはすこし動いてる方が目立ちそうなので、もう少し工夫します。

元記事はこちら

A-FRAME: 360°画像ビュアーの作成

松本 勝年

松本 勝年

フロントエンドに興味があるエンジニア

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。