【WebVR】360度全天球を試してみた。A-FrameでWebVR 表示してみたよぉ。

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2018.2.15f1
⭐️Blender v2.79.6
⭐️Inkscape
⭐️iPhone7(IOS 12.3.1)

↓↓完成して実際に動かした動画
https://twitter.com/nonnonkapibara/status/1141685386537623552
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">💕WebVR 💕A-Frame<br>🌠360度🌠全天球を試してみたよぉ。<br>InkscapeとGIMPを使って絵を描いて😍A-FrameのWebブラウザでVR表示できるのね<br>🌸＼( ^ｏ^ )／🌸<br>デフォルトで２眼表示にも切り替わるのでVRゴーグルで試してみたよぉ。🤩めっちゃ楽しい💕💕<a href="https://twitter.com/hashtag/VR?src=hash&amp;ref_src=twsrc%5Etfw">#VR</a> <a href="https://twitter.com/hashtag/WebVR?src=hash&amp;ref_src=twsrc%5Etfw">#WebVR</a> <a href="https://t.co/iANmvyVGMf">pic.twitter.com/iANmvyVGMf</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1141685386537623552?ref_src=twsrc%5Etfw">June 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

１眼でもジャイロが動く。
<img width="1120" alt="スクリーンショット 2019-06-20 22.04.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8bb9abca-624a-6b6d-743c-ce205ea96e0c.png">

2眼になる。
![IMG_0512.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3556a086-9496-649a-4d22-3aaa2a2b3d5e.png)



1.Inkscapeで360度全天球を描く。
png形式で出力する
<img width="1098" alt="スクリーンショット 2019-06-20 20.00.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ad8c0ca8-c5d6-6cdf-4074-061daa4c8b13.png">

2.GIMPに取り込み、サイズを縮小する。
試しに、幅を「３６００」にしてみた。
jpg形式で出力する。
<img width="839" alt="スクリーンショット 2019-06-20 20.02.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/63a5f22b-c2ee-92e1-8ead-2e4babece63e.png">


3.A-freameで
index.htmlで、画像を指定する
<img width="769" alt="スクリーンショット 2019-06-20 22.02.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/925c9767-a0dd-e391-90e8-aa43b4f12e2a.png">

```index.htm
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame360度全天球</title>
    <meta name="description" content="A-Frame Panorama Sample">
    <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="non/piyokumaroom.jpg" rotation="0 170 0"></a-sky>
    </a-scene>
  </body>
</html>
```


<img width="275" alt="スクリーンショット 2019-06-20 22.07.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/aa5dda94-5663-5207-c23f-aa709780a6de.png">

※サーバーは、こちらを参照
WebAR(AR.js)で使用するホスティングサービスNetlifyを使う
https://qiita.com/nonkapibara/items/fd70842c59059f0dfd97


完成！

類似内容

【Unity】360度全天球をSkyBoxに設定する（Skybox/Cubemap）
https://qiita.com/nonkapibara/items/27aac80da1fb4ff03d0f


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🎁Unity🎁<br>🌠360度全天球🌠をUnityに取り込んでみたよぉ🤩<br>「福岡市文学館（赤煉瓦文化館）」の建物を<br>「カシャっ！！」ってスマホで撮って📱GIMPで軽く加工してみたよぉ😆（思い付きで色をつけてみた。）<br>Unityでマウスぐりぐりして360度みれるのね〜<a href="https://twitter.com/hashtag/unity?src=hash&amp;ref_src=twsrc%5Etfw">#unity</a> <a href="https://twitter.com/hashtag/unity3d?src=hash&amp;ref_src=twsrc%5Etfw">#unity3d</a> <a href="https://t.co/3jdZhmbi0P">pic.twitter.com/3jdZhmbi0P</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1142279959416696833?ref_src=twsrc%5Etfw">June 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>