A-Frameはじめました #A-Frame

はじめまして、jyuko@VR/AR初級者です。
Qiita初投稿になります。

VR元年と言われた2016年も終わりが近付いていますが、今からでも間に合うVRフレームワーク、A-Frameを使ってみたいと思います。

A-Frameとは

MozzillaのVRチーム(MozVR)が開発したWebVRフレームワークです。内部でthree.jsを使っています。
とにかく簡単にVRコンテンツが作れます。

A-Frameの準備

公式サイトからインストールします。
https://aframe.io/

githubでソースがまるっと公開されていますし、npm版もあります。
今回は手軽さ重視で、ビルド済みのファイル(aframe.min.js)をダウンロードして使います。

HTMLの作成

A-Frameの特徴として、SceneをHTMLベースで書くことができます。
ミニマム構成は以下のようになります。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Sample</title>
    <script src="./aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" color="#ff0000"></a-box>
      <a-sky color="#dddddd">
    </a-scene>
  </body>
</html>

ブラウザで表示すると、こんな感じです。

<a-scene>タグを配置するだけで、デフォルトのlight(光源)、camera(カメラ)をセットしてくれます。
<a-sky>はSceneの背景で、画像をセットすることでGoogleストリートビューのような表示もできます。

画面右下にVRアイコンが表示されていますが、スマートフォン実機を横にして見ると、VRモードで閲覧ができます。
デフォルトで、camera(カメラ)のlook-controlsが有効になっているので、デバイスの向きに合わせて視点が動きます。

まとめ

HTMLで書けるので初心者にも扱いやすそうですし、<a-scene>の1行で、VRコンテンツに必要な初期設定を全部やってくれている感じです。
three.jsを内包しており、拡張性にも優れていそうです。

これから色々試してみる予定ですが、当座の目標として、VRで動き回れる迷路でも作ってみようかなと思っています。