More than 5 years have passed since last update.

A-FRAME で簡単全天球画像表示を試す

A-Frame

Last updated at 2017-02-09Posted at 2016-12-27

今更な感じですが、少し前の勉強会で Mozilla さんの A-FRAME のお話を聴き A-FRAME の公式サイトを見てみたら、Examples のメニュー 360° Image を発見！
球体や立法体などのオブジェクトをおいてVRを楽しむだけじゃなく、360° の全天球画像も簡単に表示できる感じだったので、ちょっと試してみた。

少し前から RICOH THETA で 360° の全天球画像を撮りまくっていたものの、全天球画像を共有するのが面倒なので、自前で簡単に全天球画像を見れるアルバムやビューワーを作れたらいいなと思っていたので、グッドタイミング！

A-FRAME とは？

公式サイトはこちら。https://aframe.io/

詳しいことはたぶん既にいろいろ情報があると思うので省きますが、A-FRAME の Docs の introduction （ https://aframe.io/docs/0.3.0/introduction/ ）には次のようにあります。

A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR 　scenes that work across smartphones, desktop, the Oculus Rift, and the room-scale HTC Vive.

HTML でVR体験を作るためのオープンソースの WebVR framework との事。

実際に試してみる

全天球画像の準備

今回は RICOH THETA S で撮影した次のような全天球画像を用意。

ちなみに THETA のアルバムサイトでどんなふうに見えるかは次のリンクから確認できます。
THETAアルバムサイトから表示

Webサーバの準備

ここは本題とあまり関係がないので詳しい事は割愛。手っ取り早く試したかったので、次の環境をサクッと構築。

Microsoft Azure - App Servise の Web App

htmlを書く

とりあえずドキュメントを見ながら必要最小限のコードを書いてみると、たったこれだけ。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame360写真テスト</title>
    <meta name="description" content="A-Frame Panorama Sample">
    <script src="aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="sample-photo.jpg" rotation="0 170 0"></a-sky>
    </a-scene>
  </body>
</html>

ざっくり言うと、こんな感じでできました。

<script> タグで aframe.min.js を読み込む
- 今回は手っ取り早く試したかったので aframe.min.js をダウンロードして index.html と同じ場所に置きましたが、CDN から include しても良いです
  - Production Version の場合 <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  - Development Version の場合 <script src="https://aframe.io/releases/0.4.0/aframe.js"></script>
  - releases の後ろの 0.4.0 は、そのときの A-FRAME の Version
A-FRAME で用意される <a-scene> タグで囲んだ中に表示させたい全天球画像を A-FRAME で用意される <a-sky> タグで指定する
- DOCS で <a-sky> タグは The sky primitive adds a background color or 360° image to a scene. と説明されています
- ここでは index.html と同じ場所に置いた sample-photo.jpg を指定
- rotation はすべてのエンティティにあるコンポーネントで roll (x), pitch (y), yaw (z) の 3つを指定することで、エンティチィの方向を指定できます
- 今回の場合は全天球画像が最初に表示されたときの画像の向きを rotation で決めている感じです