偏差値20くらいのブログ

はるみちゃんのブログだよ。えへへ。

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

A-Frameとは?

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

aframe.io

Entity-Component-System

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

エンティティ・コンポーネント・システム - Wikipedia

ざっくり言うと、汎用的なオブジェクト「エンティティ」に「コンポーネント」をどんどんくっつけていく感じ。
外観を設定するコンポーネントや、アニメーションを行うコンポーネント、イベントを行うコンポーネントなどが存在します。
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

便利なツールとか

A-FRAME INSPECTOR

f:id:deeptoneworks:20161028012059p:plain

github.com

シーンをビジュアライズしてGUIで作成可能なツールです。
静的なシーンはこれだけで作れちゃいます!凄いですね・・。

MagicaVoxel

f:id:deeptoneworks:20161028012043p:plain

ephtracy.github.io

本来3Dオブジェクトを作るのは大変ですけど、MagicaVoxelでならまるでマインクラフトをやってるかのように作れちゃいます!
もちろん、A-FRAMEで読み込めます。
これなら自分でも3Dが作れそうです!!

flickr

www.flickr.com

おなじみflickr
Equirectangularで検索すると360度パノラマ写真を入手できます。

Search | Flickr(検索結果)

textures.com

www.textures.com

3Dで使えそうなテクスチャがたくさんあります。

感想

楽しそうや・・すごく簡単に色々できる事がわかったし、何か作ってみたいなあ・・