今回は簡単かつ無料でARを実現することができる、A-Frameについて解説したいと思います。
A-Frame最大の特徴は、何といってもHTMLを記述するだけで簡単にARを実現できてしまうことです。簡単なアニメーションだけであれば、HTMLのタグだけで実装できてしまいます。
そんなA-Frameの基本的な使い方を解説していきたいと思います。
基本コード
ここではA-Frameの公式サイトに記載されている、サンプルコードをもとに説明していきます。
<html>
<head>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>まずは3行目にある、こちら↓のコード
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>ここで、A-Frameのjsファイルを読み込んでいます。これを書かないとA-Frameの機能を利用することができません。（よく分からない人は、A-Frameを使うための「おまじない」だと思ってもらえればOKです！）
コードの中に「1.4.0」とありますが、これはA-Frameのバージョンを表しています。
執筆時点（2023/5/2）で、Githubにあるサンプルソースを見ると、「1.4.2」となっていますので、好みに合わせてバージョンを選択すれば良いと思います。
（特にこだわりがなければ、最新バージョンを利用するようにすれば良いでしょう）
続いて、6行目から12行目です。
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>ここがA-Frameのメイン部分になります。
<a-scene>～</a-scene>で括った部分がAR空間として認識されます。
各タグについては、以下のような意味を持っています。
a-box
立方体（box）を描画するためのタグです。サンプルコードでは、3つのプロパティが設定されています。
- position
-
オブジェクト（立方体）の座標を指定します。左から順に、X座標-Y座標-Z座標の順になります。
デフォルトでは、すべて0が指定されており、中心にオブジェクトが表示されます。 - rotation
-
オブジェクトの回転を指定します。左から順に、X座標軸-Y座標軸-Z座標軸を中心とした回転度数になります。
デフォルトでは、すべて0が指定されており、回転していない状態です。 - color
-
オブジェクトの色を指定します。色は16進数で指定することができます。
デフォルトでは、「#FFF」が指定されており、白色で表示されます。
a-sphere
球体（sphere）を描画するためのタグです。サンプルコードでは、3つのプロパティが設定されています。
- position
-
<a-box>と同じ
- radius
-
球体の半径を指定します。デフォルトでは「1」が指定されています。
- color
-
<a-box>と同じ
a-cylinder
円柱（cylinder）を描画するためのタグです。サンプルコードでは、4つのプロパティが設定されています。
- position
-
<a-box>と同じ
- radius
-
<a-sphere>と同じ
- height
-
円柱の高さを指定します。デフォルトでは「1」が指定されています。
- color
-
<a-box>と同じ
a-plane
平面（plane）を描画するためのタグです。サンプルコードでは、5つのプロパティが設定されています。
- position
-
<a-box>と同じ
- rotation
-
<a-box>と同じ
- width
-
平面の横幅を指定します。デフォルトでは「1」が指定されています。
- height
-
<a-cylinder>と同じ
- color
-
<a-box>と同じ
a-sky
空（sky）を描画するためのタグです。空と言っても、ここでは背景として理解しておけば大丈夫です。
サンプルコードでは、1つのプロパティが設定されています。
- color
-
<a-box>と同じ
その他
サンプルコードにはありませんが、以下のようなタグも用意されており、単純な形であればすぐに描画することができます。
- <a-cone>（円錐）
- <a-ring>（リング）
- <a-torus>（ドーナツみたいな形）
こちらのA-Frame公式サイトの中で、左にあるスクロールバーを下へ送っていくと、「PRIMITIVES」というところにいくつか紹介されています。
英語で書かれていますが、難しい単語は使われていませんし、サンプルコードも記載されていますので、実際にコードを書いて試してみるのが早いと思います。
実際に動かしてみる
サンプルコードを実際に動かしてみた結果は、このようになります。
See the Pen A-frame01 by kotapan (@kotapan) on CodePen.
こんな感じでたった数行のHTMLコードだけで、3D空間が作れてしまうのはすごいですよね。
上記のコードは、編集できるようにしてありますので、座標を変えたり色を変えたりしていろいろと遊んでみてください。
まとめ
今回は、簡単かつ無料でARを作れるA-Frameについて紹介しました。
実際に使用するときには、立方体や球体といった形だけでなく、画像や3Dモデルとかも使うことでより本格的なARを作りたくなると思います。A-Frameでは、そういったものも簡単に表示させることができるので、試行錯誤しながら作っていくとオリジナルのARを作成することができます。
また、ここでは紹介しませんでしたが、スマホのカメラを起動させるようにすることもできます。そうすれば、スマホをマーカー（特定の図形）にかざすことでARを出現させるといったこともできるようになります。
こちらはまた別の機会に紹介できればと思います。
最後まで読んでいただきありがとうございました！
コメント