Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@nonkapibara

【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

1眼でもジャイロが動く。
スクリーンショット 2019-06-20 22.04.34.png

2眼になる。
IMG_0512.png

1.Inkscapeで360度全天球を描く。
png形式で出力する
スクリーンショット 2019-06-20 20.00.46.png

2.GIMPに取り込み、サイズを縮小する。
試しに、幅を「3600」にしてみた。
jpg形式で出力する。
スクリーンショット 2019-06-20 20.02.52.png

3.A-freameで
index.htmlで、画像を指定する
スクリーンショット 2019-06-20 22.02.36.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>

スクリーンショット 2019-06-20 22.07.33.png

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

完成!

類似内容

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?