A-Frameをさわってみた

VR-FREEKという雑誌の中で、A-Frameを使った3DCGコンテンツの作成方法が載っていたので、実際にさわってみたときの感想やメモです。

A-Frameとは？

2015年12月にMozillaからリリースされた3DCGコンテンツをHTMLで作成することができるオープンソースのフレームワーク。→A-Frame
OculusRiftなどに対応したVRウェブサイトを簡単に構築できるらしい。

web上に3DCGコンテンツを作成する場合、WebGLを使う方法が多く取られているが、WebGLよりも敷居が低いため初めて3DCGコンテンツを作成する場合は取り掛かりやすい？？

2016年3月時点でのバージョンは、v0.1.3でv0.2.0がリリース間近といった状況。
https://github.com/aframevr/aframe/releases

※ Chrome, Firefox, Safariで確認。IE11は動かなかった。

開発環境をつくる

https://aframe.io/docs/guide/installation.html
上記ページより、jsファイルをダウンロードして読み込むか、npm上にも公開されているので、モジュール管理して開発を進める場合は、

npm i aframe -D

としても開発環境に導入することができます。

つくってみる

htmlファイル上にA-Frameが提供している独自のHTMLタグを追加していき、コンテンツを作成します。

<a-scene>タグが3DCG上の仮想空間を表す要素となるので、このタグの子要素に3DCGオブジェクトを配置していきます。

<a-scene>
  <a-sky color="#9fbfff"></a-sky>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-cube>
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>

sample
http://ryotahirano.github.io/A-Frame-sample/

アニメーションさせることも可能で(内部でtween.jsを使用)、<a-animation>タグでアニメーションの指定を行います。

<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E">
  <a-animation attribute="position" from="0 1.25 -1" to="0 -1.4 0" dur="2000" repeat="indefinite" direction="alternate" ease="ease-out-bounce"></a-animation>
</a-sphere>

sample
http://ryotahirano.github.io/A-Frame-sample/animation.html
http://ryotahirano.github.io/A-Frame-sample/target.html

まとめ

少ない工数でそれっぽいものを作ることはできそうだが、内部的にThree.jsやtween.jsを使っているため、細かいアニメーションの指定や表現方法を実装するためには、結局Three.js(WebGL)の知識が必要になるのでは？
jsをさわらない人がちょっとした3DCGを作るためのツールという感触。

まだまだA-Frameだけではできることは少なさそうですが、今後この手軽さのまま機能が増えていったら使う場面が出てくるかも。