こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。
※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1
今日は久しぶりにWebVRについてのお話です。
今までのWebVRの記事は下記からご確認ください。
第四回となる今回は、WebVRのフレームワークとして知られる”A-Frame”をご紹介します。
まずは、A-FrameでのWebVR開発に必須な「シーンの設定」、立方体や平面などの「図形の描画」、複数の図形をまとめて処理する「グルーピング」についてお話ししようと思います。
初心者の方にもわかりやすいように解説していきますので、最後までよろしくお願いします。
1.A-Frameとは
A-Frameとは、ブラウザのFireFoxなどで知られるMozilla社が開発しているフレームワークです。
WebVRをHTMLを書いているような感覚で開発できるというのが一番の特徴です。
また、3Dをブラウザで表示する技術である”WebGL”の知識がなくても開発できます。
そのため、普段HTML+CSS、javascriptでコーディングしているWebデザイナーの方でもとっつきやすいフレームワークかと思います。
ちなみに、WebVR対応ブラウザで閲覧した場合、デフォルトでVR表示に対応しています。
下記のページに数多くのサンプルが用意されています。
どんなことができるのか、体験してみてください！
https://aframe.io/aframe/examples/
2.構築準備
まずはA-Frameのgitリポジトリからファイルをダウンロードしてきます。
下記からダウンロードできますので、ご用意ください。
https://aframe.io/
たくさんファイルがありますが、その中から”dist”ディレクトリの”aframe-master.js”を使用します。
3.A-Frameタグの記述
シーンの初期化
シーンとは、WebVRに必要な要素を全て包括するものです。
これからご紹介する様々なA-Frameタグの親要素となります。
タグの書き方は下記のようになります。
|
1 2 |
<a-scene> </a-scene> |
必ず、<body>タグの内側に記述してください。
A-FrameでWebVR開発を行う場合は、”a-scene”タグは必須になります。
立方体の描画
tree.jsで立体を描画するのは少しだけ複雑なコードを描く必要がありますが、A-Frameのコードはとてもシンプルです。
“a-cube”というタグで
|
1 2 3 4 5 6 7 |
<a-scene> <a-cube color="#0095DD" position="0 1 0" rotation="20 40 0"> </a-cube> </a-scene> |
これだけで立方体の描画が完了しました。
主なプロパティにはいかのようなものがあります。
- color: 立方体の色を指定します。
- position: 立方体の位置を指定します。左から、X座標、Y座標、Z座標の位置を表します。
- rotation: 立方体の回転（傾き）を指定します。こちらも”position”プロパティと同じく、X座標、Y座標、Z座標を順に指定します。
ちなみに、A-Frameは本体のJSを読み込むだけでマウスドラッグにも対応します。
下のサンプルをドラッグしていただくと、どういう動きをするかイメージを掴みやすいと思います。
See the Pen QrXEjN by ito nao (@chokuro) on CodePen.
また、右下のゴーグルアイコンをクリックすると、VRモードに切り替えられます。
VRのゴーグルをお持ちの方は、VR対応ブラウザで閲覧してみてください。
平面の描画
先ほどは立方体を描画しましたが、今度はWebVR上に平たい板状のオブジェクトを描画してみましょう。
平面の図形を描画する際は、”a-plane”というタグを使用します。
|
1 2 3 4 5 6 7 |
<a-scene> <a-plane color="#0095DD" position="0 1 0" rotation="20 40 0"> </a-plane> </a-scene> |
このタグにも、先ほど立方体の時にご紹介したプロパティと同じものが使用できます。
See the Pen WyRPrE by ito nao (@chokuro) on CodePen.
オブジェクトのグルーピング
複数のオブジェクトをシーンの中に描画していくと、複数のオブジェクトをグルーピングしたい時があると思います。
その場合は、タグを入れ子にすると一つのオブジェクトの集まりとして処理をすることができます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<a-scene> <a-plane color="#0095DD" position="0 1 0" rotation="20 40 0"> <a-plane color="#0095DD" position="0 1 0"> </a-plane> </a-plane> </a-scene> |
例えば、親要素の”position”プロパティを調整すると、グルーピングされた子要素も合わせて動かすことができます。
HTLM感覚でオブジェクトを操作できるので、この辺りがA-Frameのお手軽で便利なところです。
See the Pen zaNeoe by ito nao (@chokuro) on CodePen.
まとめ
今回はA-Frameの基本的なタグの書き方をご紹介させていただきました。
扱える図形の数は相当数あり、全て公式サイトのドキュメントからご確認いただけます。
興味のある方はぜひ以下のページをご確認ください。
https://aframe.io/docs/0.8.0/introduction/
次回はテキストの扱い方、描画したオブジェクトのアニメーションのかけ方など、応用的な内容をお送りしたいと思います。
