VRFREEK を参考にしながら A-Frame を使って webVR を作ってみた記事をいくつか書きましたが、 A-frame についてあまり触れていませんでした。
なので、概要や使い方を sample code つきで解説してみます。
これだけ知っていればすぐに A-frame で webVR を作れる！
A-frame sample
小難しい話しはおいておいてまずは sample を見てみて下さい。
IE以外のブラウザ、またはスマホ推奨。
アニメーション VR sample はマウスドラッグで視点を回転することができます。
360度ビューワー VR sample は左後を向くと東京タワーが見えるよ！
アニメーション VR sample
360°ビューワー VR sample
A-frame とは？
3D ソフトや Unity の知識がなくても html の知識があれば A-frame の javascript のライブラリを1行読み込むことで、 Oculus Rift などに対応する web VR サイトのベースを簡単に作ることができるようになるオープンソースフレームワークのこと。
Firefoxで知られるMozillaが公開しました。
A-frame の script 1行と、 < a- > から始まる A-frame タグでマークアップしていくことができます。
Webデザイナーでも簡単に 3DCG コンテンツをページのデザインに組み込めるようにタグだけで操作できるようにしたいというのが A-frame の主旨のようです。
A-frame 公式サイトはこちら
A-frame 特徴
- html 感覚で A-frame タグをマークアップすることができる
- 拡張子はもちろん” .html “
- MozVR が開発している
- WebVR にデフォルトで対応している
- WebVR に特化した機能（視点変更など）を備える
- MIT ライセンスでソース公開されている
対応ブラウザ
- Chrome
- Firefox
- Safari
※IEについてはWindowsを所持していないため確認できませんでした…
A-frame の使い方
3stepであら不思議！360度見渡せるまでに作れます。
（htmlファイル作るところから数えたら4step）
- < script >タグにhttps://aframe.io/releases/latest/aframe.min.jsを指定
- < a-scene >の中にオブジェクトやアニメーションを追加してhtml形式で保存
- サーバーにアップロードしてブラウザで確認！
A-frame タグの書き方
1.htmlファイルの作成
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>VRテスト</title> <script src="https://aframe.io/releases/latest/aframe.min.js"></script> </head> <body> <a-scene> <!-- ここにシーンに追加するオブジェクトを記述していきます --> </a-scene> </body> </html>
2.aframe.jsの読み込み
< script >タグにhttps://aframe.io/releases/latest/aframe.min.jsを指定します。
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
3.オブジェクトの追加
< a-scene >〜< /a-scene >この中にオブジェクトの形や動きなどを記述していきます。
a-scene は html でいうと div の役割でしょうか。
下記の sample code をメモ帳なんかに貼付けて拡張子を.htmlにしてサーバーにアップロードするとsample siteと同じものが作れるのでぜひ試してみて下さい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>VRテスト</title> <script src="https://aframe.io/releases/latest/aframe.min.js"></script> </head> <body> <a-scene> <a-cube position="0 0 0" color="lightblue"></a-cube> <a-sphere position="-2 2 -1" color="pink"></a-sphere> <a-cylinder position="2 2 -1" color="gold"></a-cylinder> <a-plane postion="0 -1 0" rotation="90 45 0" scale="10 10 10" color="#444444"></a-plane> </a-scene> </body> </html>
3-2.画像をつけてアニメーションを入れ子にすることも可能
オブジェクトにテクスチャーを貼付けて、入れ子としてアニメーションを記述することができます。
<a-sphere src="image/left.png" position="-10 2 -1" color="#ffffff"> <a-animation attribute="rotation" dur="10000" to="0 -360 0" repeat="indefinite" direction="nomal" easing="ease-out-bounce"></a-animation> </a-sphere>
4.サーバーへ上記で記述したhtmlファイルをアップロード
VRテスト sample
↑sample作ったので見てみてね。ブラウザで開くとこんな感じになります。
もちろんマウスドラッグでぐりぐりできるし、VRHMDデバイスを持っていればVR体験できますよ！
A-frame タグの説明
たくさんあるので最初に使いそうなものをピックアップします。
以前書いた記事にも少し載せているのでこちらもどうぞ。
主にアニメーションの解説をしています。
リンク：数行のHTMLとA-frameでつくるwebVR【sample code】
更に詳しい説明は A-frame 公式サイトを見てみて下さいね。
a-cube
正方形のオブジェクト。横幅や高さを変更することも可能。
例：< a-cube width="3.0" height="1.5" depth="0.5" color="pink" >< /a-cube >
その他のジオメトリー：cube(直方体),cylinder(円柱),sphere(球),image(画像),
model(モデル),plane(平面),curvedimage(曲がった画像),sky(全天球),
video(動画),videosphere(360°動画)
a-light
シェーディング。光をあてることができます。
例（ポイントライト）：
< a-light position="0 0 0" type="point" intensity="1.25" color="#ffffff" >< /a-light>
ライトの種類：ambient,directional,point,spot,hemisphere
a-animation
アニメーションをつけることができます。
例：< a-animation attribute="rotation" dur="4000" to="-360 -360 -360"
repeat=”indefinite” direction=”normal” >< /a-animation >
種類：rotation(回転),scaling(拡大),moving(移動)
a-sky
背景(画像を配置したりできます)
例：< a-sky src="image/visualtest.jpg" >< /a-sky >
a-camera
カメラの位置を設定することができます。
例：< a-camera position="0 0 0" >< /a-camera >
感想
ね、 A-frame って意外と簡単でしょ？
htmlとだいたい一緒で< a-scene >＝< div >で入れ子になる要素がclassのポジションというイメージでしょうか。
マテリアル（オブジェクトの表面上の質感）には属性として透明度や金属度なんかも変えられるようです。モデリングができないMayaだな〜という感想ですね。
あとはタグを覚えられればもう少し使いこなせるかな？たくさん作って早く覚えたい(・x・)
今後調べるリスト
- DOCTYPE宣言（html5を基準にしてるけどどのバージョンでもいいの？）
- テキストはシーンの中に配置できる？
- リンクはオブジェクトにつけたりテキストに設置したりできる？
ランキング参加中。よかったらぽちっとお願いします(*｡･ᴗ･。)
