A-FRAME: 360° 이미지 뷰어 만들기

여행하러 왔기 때문에, 그때의 360° 화상을 VR 고글에서 볼 수 있도록 해 보았습니다.
요 전날 조금 만났으므로, A-FRAME를 이용해 보았습니다.

링크에 커서를 맞추면 3장의 이미지가 차례로 바뀝니다.
그러나

깨진 것

자이로 문제

iOS 12.2 이상에서 자이로 센서가 꺼져 있습니다.
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와 그다지 위화감 없이 할 수 있었던 것이 아닐까 생각합니다.

미래의 도전

이미지가 꽉 차서 바뀌므로, 멋진 이펙트라든지 원합니다.

링크는 조금 움직이고 있는 것이 눈에 띄는 것 같기 때문에, 좀 더 궁리합니다.