A-Frameとは

A-FrameとはWeb上に簡単にVR空間が表示できるThree.jsをベースにしたフレームワークです。
WebVRコンテンツを制作できるフレームワークはReactVRなどありますが、
HTMLのようにタグを記述するだけでVRコンテンツを制作できるA-Frameが現状最も簡単で、敷居が低く、短時間に実装できる選択肢といえるでしょう。

実装方法

WEBサイトに360°画像を埋め込み表示するまでを実装してみます。
まず、必要ファイルをダウンロードしてサイトに読み込みます。

ソースコードはGitHubから一式ダウンロードするかCDNで読み込むことができます。
GitHub

今回はCDNで提供されているソースコードを利用するのでheadタグ内に下記scriptタグを追加して読み込みます。

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

次に、実際にVRコンテンツを表示するためのタグをbody内に記述します。

<a-scene>
  <a-assets>
    <img id="sky" src="/path/file_name">
  </a-assets>
   <a-sky src="#sky"></a-sky>
</a-scene>

今回表示する背景画像は「flickr」にて提供されている全天球画像を利用します。
なお、A-frameで画像ファイルや音楽ファイルを読み込むプログラムを実行する場合、何らかのサーバー環境での動作が必須となりますのでご注意ください。

なんと、たったこれだけのコードでVRコンテンツが表示できてしまいます。
右下のボタンを押すことでVRモードでの表示ができます。

DEMO

これだけのリッチコンテンツを数行のコードで実装できてしまう、すごい時代になったものです。
以上、Web上で簡単にVRコンテンツを実装できるA-frameの紹介でした。