A-Frame の基礎

A-Frame とは、WebVR/WebAR を HTML のタグで簡単に作るための Web フレームワークである。 特別なアプリをインストールする必要がなく、Web ブラウザ上で体験できる。

Web ブラウザは Google Chrome を推奨。

A-Frame は HTML の仕組みを利用している。 HTML ではタグの中に要素を書いて様々な意味を持たせるのが基本となる。改行は適宜行って構わない。

タグは要素名を < と > ではさんだ形をしている。

<要素名>

要素の中身は、<要素名> という開始タグと </要素名> という終了タグではさんで記述する。

<要素名>中身</要素名>

<要素名> と </要素名> は同じ要素名のタグのセットであるが、<要素名> のみで中身がない場合もある。

要素の中には別の要素を入れることができる。

<要素名1>
  <要素名2>
    <要素名3></要素名3>
    <要素名4></要素名4>
  </要素名2>
 </要素名1>

要素には属性を持たせることができる。 属性を持たせる場合は要素名の後に半角空白を入れて 属性=“属性値” のように記述する。

<要素名 属性="属性値">

複数個の属性は空白で区切って記述する。

<要素名 属性1="属性値1" 属性2="属性値2" 属性3="属性値3">

シーンは A-Frame におけるオブジェクトを記述する場所である。 シーンにはタグ (要素) でオブジェクトを記述し、そのオブジェクトは 3D 空間の中に配置される。 <a-scene> と </a-scene> の間に様々なオブジェクトを追加していく。

<a-scene>
  <a-sky></a-sky>
  <a-camera>
  <a-cursor></a-cursor>
  </a-camera>
  ...
</a-scene>

アセットとは「資産」という意味で、A-Frame ではアセットで定義した画像や属性などをひとまとめにして管理する仕組みがある。 例えば、複数のオブジェクトに共通の属性を各オブジェクトに記述していくのは非効率なので、アセットを利用するとよい。

IDを指定することで共通の属性を使いまわす方法である。 アセットと組み合わせて利用する。

スカイは 3D 空間において自分を囲む大きな球体のスクリーンを背景とみなすオブジェクトである。 スクリーンの内側に背景画像が張られるため 360° どの方向にも背景として見える。 スカイオブジェクトは <a-sky></a-sky> で記述する。

<a-sky src="背景画像"></a-sky>

A-Frame では 3D 空間に仮想的にカメラを設置して、そのカメラで見たものがブラウザに表示される。 カメラは初期状態では $z$ 軸の負の方向を向いている。 カメラオブジェクトは <a-camera></a-camera> で記述する。

カメラで見えるのは、奥行きが near 面から far 面までの範囲、上下が fov の範囲である。 それを超えた範囲にあるものは映らない。

3D 空間内に球体オブジェクトを置く。 球体オブジェクトは <a-sphere></a-sphere> で記述する。

オブジェクトの位置は position 属性で指定し、属性値 “x y z” には座標を数値で記述する。

<a-sphere radius="半径" position="x y z"></a-sphere>

3D 空間内に直線オブジェクトを置く。 直線オブジェクトは <a-entity line></a-entity> で記述する。

属性 line の属性値には、直線の設定値を「プロパティ:値;」のように記述する。 複数個のプロパティはセミコロンで区切って記述する。

<a-entity line="start: x1 y1 z1; end: x2 y2 z2; color: 色"></a-entity>

属性マテリアルはオブジェクトの外観を設定するためのものである。

よく使うプロパティには以下のようなものがある。