簡単にWebVRが扱えるフレームワーク「A-Frame」

A-Frameとは

A-FrameとはWebVRを作成することができるオープンソースのフレームワークです。

HTMLのマークアップのみで、簡単にVR空間にオブジェクトを表示することができるので、WebVR初心者の方におすすめです。

それではさっそく使い方を見ていきましょう。

3Dオブジェクトを表示する

1. ファイルを読み込む

HTMLを記述していく前に、フレームワークのjsファイルを読み込みます。

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

2. シーンを追加する

初めにHTMLに<a-scene></a-scene>を記述し、シーンを追加します。

シーンを追加するとは、一つのVR空間を生成するという風に捉えていただければイメージしやすいかと思います。

シーンを追加しないと、画面上には何も表示されません。

3. オブジェクトを表示する

それではお待ちかね、3Dオブジェクトを表示していきます。

A-Frameには四角形、丸、円錐など様々な形のオブジェクトが初めから用意されており、HTMLタグを追加するだけで任意のオブジェクトを表示することができます。

今回は四角形を表示したいので、先ほど記述した<a-scene></a-scene>の中に <a-box color="red"></a-box>と追記してください。

<a-scene>
 <a-box color="red"></a-box>
</a-scene>

A-Frameではcolor="red"のようにHTMLタグに属性を追加していくことで、オブジェクトの色や大きさなどプロパティの値を指定できます。ここではオブジェクトの色を赤に指定しています。

これだけでオブジェクトを表示することができます。

4. カメラの位置を移動する

すでにオブジェクトは表示されているはずですが、画面上には何も見えていません。

その理由は、オブジェクトがカメラと同じ位置にあるためです。

カメラを後ろに下げてみます。<a-camera position="0 0 3"></a-camera>と追記してください。

<a-scene>
 <a-box color="red"></a-box>
  <a-camera position="0 0 3"></a-camera>
</a-scene>

positionはposition="x, y, z"のように3軸で指定します。ここではカメラをz軸に3移動させています。

ちなみにA-Frameではz軸をプラスの値に指定すると画面の手前側、マイナスの値に指定すると画面の奥側に対象が移動します。

これで赤い四角形が画面上に表示されたと思います。

5. 背景の色を変更する

次に、VR空間の背景色を変更してみましょう。

背景を変更するには<a-sky></a-sky>を使用します。

今回は背景色を変更したいので、先ほど表示した四角形と同じようにcolor属性を追記します。

<a-scene>
 <a-box color="red"></a-box>
  <a-camera position="0 0 3"></a-camera>
  <a-sky color="gray"></a-sky>
</a-scene>

これで背景色がグレーに変化したと思います。

a-skyタグでは背景色を変更するだけでなく、画像を読み込んで背景画像として使用することも可能です。360度パノラマ画像を用意すれば、リアルなVR空間を表現することができます。

アニメーションさせる

それでは次に、表示した四角形に回転のアニメーションを加えたいと思います。

A-frameではこれまでと同じように、HTMLタグに属性を記述するだけでオブジェクトをアニメーションさせることが可能です。

先ほど用意した<a-box></a-box>にanimation="property: rotation; to: 0 360 0; dur: 3000; loop: true; easing: linear;"を追加します。

<a-scene>
 <a-box color="red" animation="property: rotation; to: 0 360 0; dur: 3000; loop: true; easing: linear;"></a-box>
  <a-camera position="0 0 3"></a-camera>
  <a-sky color="gray"></a-sky>
</a-scene>

これで、四角形を回転させることができました。

animation属性では、まず何のプロパティをアニメーションさせたいのかを記述します。

ここではrotationプロパティをアニメーションさせたいのでproperty: rotationと指定しています。

続けてto: 0 360 0でどの値へとアニメーションさせるのかを記述します。

他にも様々なプロパティが用意されているので、詳しくは公式ドキュメントをご確認ください。

JavaScriptでオブジェクトを操作する

最後に、JavaScriptを使ってオブジェクトを操作してみましょう。

今回はクリックしたオブジェクトの色を変化させるというインタラクションを加えてみたいと思います。

まずはHTMLに、位置の異なる四角形2つとカーソルを追加します。

ここで重要なのが、カーソルです。カーソルを追加しないと、オブジェクトに対してホバーやクリックなどのインタラクションを加えることができません。

カーソルはa-cameraタグの中に<a-cursor></a-cursor>を追加することで表示することができます。

画面上に小さな丸が表示されていればOKです。

<a-scene>
  <a-box color="red" position="0 0 0" animation="property: rotation; to: 0 360 0; dur: 3000; loop: true; easing: linear;"></a-box>
  <a-box color="red" position="-2 0 0"></a-box>
  <a-box color="red" position="2 0 0"></a-box>
  <a-sky color="gray"></a-sky>
  <a-camera position="0 0 3">
    <a-cursor></a-cursor>
  </a-camera>
</a-scene>

html側の準備ができたら、JavaScriptを追記していきます。

A-frameでは基本的にhtml要素と同じようにオブジェクトを扱うことができます。

まずは<a-box></a-box>要素を全て取得します。

const boxes = document.querySelectorAll('a-box');

次にそれぞれの要素にクリックイベントを付与し、color属性の値に応じて赤色か青色かを指定します。

const boxes = document.querySelectorAll('a-box');

boxes.forEach((box) => {
  box.addEventListener('click', function() {
　　　　　// オブジェクトが赤の場合は青、青の場合は赤に変更
    if(this.getAttribute('color') === 'red') {
      this.setAttribute('color', 'blue');
    } else {
      this.setAttribute('color', 'red');
    };  
  });
});

これでそれぞれのオブジェクトをクリックすると、色が変化するようになりました。

以下に本日作成したデモを用意しましたのでご確認ください。

終わりに

いかがでしたでしょうか？

A-Frameを使用すれば、思ったよりも簡単にWebVRを扱うことができます。

VR空間に簡単な図形や3Dモデルを表示するだけなら、必ずしも学習コストの高いthree.jsやWebGLを用いる必要はありません。

ぜひWebVRの入門として、A-Frameを使用してみてください！