HTMLで簡単WebVR!A-Frameの紹介

A-Frameとは？

Mozilla VR teamが開発したWebVRフレームワーク。
HTMLを書くだけでWebVR開発ができる優れもの

Entity-Component-System

A-FRAMEはEntity-Component-Systemというパターンで実装されている。

ざっくり言うと、汎用的なオブジェクト「エンティティ」に「コンポーネント」をどんどんくっつけていく感じ。
外観を設定するコンポーネントや、アニメーションを行うコンポーネント、イベントを行うコンポーネントなどが存在します。
f:id:deeptoneworks:20161027221208g:plain
（転載:https://aframe.io/docs/0.2.0/core/#composition)

Entity

全ての基本になるのがa-entity。
こいつの属性値としてコンポーネントをどんどん追加していくわけですね。

<a-entity>

JavaScriptのDOM APIを経由してこのエンティティのオブジェクトを取得できます。
エンティティには様々なプロパティ、メソッドがあり操作可能です。

Entity – A-Frame

状態の登録方法やプロパティの取得,変更などの重要な機能が提供されていることがわかりますね。

Component

a-entityの属性値として登録するコンポーネントです。
どんなコンポーネントが存在するのかはドキュメントを参照してください。

さて、コンポーネントはAFRAME.registerComponentメソッドにより独自で追加することも可能です。

AFRAME.registerComponent(‘position’, {
    schema: { type: ‘vec3’ },
    update: function () {
        var object3D = this.el.object3D;
        var data = this.data;
        object3D.position.set(data.x, data.y, data.z);
    }
});

schemaでどんな値を取得していくるかを決めるんですね。
定義の仕方は以下のような感じです。

schema: {
 type: ‘int’, default: 5
}

で、あとはupdateの部分でthree.jsのクラスであるobject3Dのオブジェクトを取得して、
こいつのプロパティを変更すればOKです。

Animation

a-entityの子としてa-animation entityを定義することによってアニメーションが実装できます。

<a-entity>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-animation attribute="rotation"
dur="10000"
fill="forwards"
to="0 360 0"
repeat="indefinite">
</a-animation>
</a-entity>

たったこれだけで以下のようなアニメーションになります。凄いですね！
f:id:deeptoneworks:20161027231726g:plain

ちなみに<a-sphere>は<a-entity geometry=“primitive: sphere>のエイリアスです。

結局どんなことができるの？

ドキュメントを読んでわかった、A-FRAMEでできる事を列挙していきます。

・3Dモデルをロード
・イベントを登録（fuseが許可されてる場合,目でクリックイベントを発火させる事も可能）
・霧の表示・立方体/球/円錐/円柱/板・・などを作成。トーラスのような複雑な形状も定義されたりします。
・シェーダーを変更
・位置/倍率/回転角度を変更
・アニメーション
・オブジェクトAにオブジェクトBを追従
・Rayを飛ばす
・音を鳴らす
・表示非表示を切り替える
・WASDボタンで移動する
・360度画像/動画を表示する
・通常の画像/動画を表示する

などなど。

あと、サンプル集がとても参考になります。

A-Frame Examples