※2016年7月頃のメモです
動作環境
| 項目 | 内容 |
|---|---|
| OS | macOS Sierra 10.12.3 |
| A-Frame | 0.2.0 |
| Chrome | 55.0.2883.95 (64-bit) |
A-Frameについて
本題の前にA-Frameについて簡単に紹介します。
A-Frameは、WebブラウザFirefoxで有名な「Mozilla」のMozVR開発チームが開発したWebVR用のオープンソースフレームワーク。
Three.jsをベースに開発されたとのこと。
特徴は以下の通り。
- HTMLライクなマークアップ言語
- HTMLの知識があればVRコンテンツの開発が可能
- WebGLの知識無しで3DCGを扱える
- 開発にあたって必要な物は「.html」のファイルのみ
- つまり、初期投資や開発環境の構築は必要なし
ブラウザで3DCGを扱うとなるとWebGLが一般的ですが、「WebGLでは難しい！」という人向けに作られたのがThree.jsで、そのThree.jsをさらに扱いやすくしたものがA-Frameなのでしょう。
いくつか特徴はありますが、HTMLで開発を行うので作成したものをサーバーにさえ置いておけばブラウザでURLを叩くだけでVRコンテンツにアクセスできるため、開発・アクセス共にブラウザだけで完結するというのが一番の特徴でしょう。
サーバーやファイルの扱いが難しいのであればjsdo.itやCodePenなどのブラウザ上でコーディングやプレビュー可能なサービスを使えば簡単に動作を確認することができます。
--- 2020/05/04 追記 ---
※jsdo.itは 2019/10/31 にサービス終了しました
A-Frameで作るVRコンテンツ
前置きが長くなりましたが本題です。
今回作成したVRコンテンツはコチラ。
非常にシンプルなページですが、上記のリンクをスマートフォン（iPhoneのみ動作確認済み）からアクセスし、横向きでブラウジングすることでスマートフォンのジャイロセンサーと連動したVRコンテンツを楽しむことが可能です。
※iOSのバージョンやSafariの設定によっては正しく動作しない場合もあります
ハコスコなどのVRゴーグルを持っている方は、スマートフォンでアクセスした後に画面右下のゴーグルマークをタップすることで3Dモードでの視聴が可能です。
PCのブラウザ（Firefox推奨）でもVR空間をグリグリと動かすことができるのでぜひ試してみてください。
今回作成したサンプルは、正面には球体と箱のオブジェクト、後ろ側には巨大な球体のオブジェクトを設置しています。
ソースコード
上記のWebVRコンテンツは以下のHTMLファイルで動作しています。
<html>
<head>
<title>A-Frame</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="7 0 -3" color="skyblue" width="2" height="2" depth="2"></a-box>
<a-box position="-7 0 -3" color="skyblue" width="2" height="2" depth="2"></a-box>
<a-sphere position="0 3 -3" color="#EF2D5E"></a-sphere>
<a-sphere position="0 2 6" color="gray" radius="1"></a-sphere>
<a-plane position="0 -1 1" rotation="-90 0 0" width="30" height="30" color="silver"></a-plane>
</a-scene>
</body>
</html>
たったこれだけのコードでVRコンテンツが作れてしまうのがA-Frameの凄いところ。
では簡単にソースコードを解説していきます。
A-Frameの読み込み
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
まず初めに必要なのが「aframe.min.js」の読み込み。
<script>のタグで読み込むだけではあるのですが、注意すべきなのは読み込むべきバージョン。
2016年7月24日現在では「ver 0.2.0」が最新版のため、本記事では最新版を読み込んではいますが、ver 0.1.×系で存在した記述が0.2.0ではなくなっていたり、その他細かな仕様が変更されているので「ver 0.1.× 系で作成されたコンテンツはver 0.2.0では動作しない」と思っておいたほうがいいでしょう。
A-Frame HTMLでのコーディング
<a-scene>
<!-- ここにA-Frame HTMLを記述 -->
</a-scene>
<a-scene>のタグがVR空間を表しています。
このタグで囲まれた部分にA-Frame HTMLを書いていくことで、VR空間にオブジェクトを置いたり様々なアクションを設定することができます。
オブジェクトの設置
<a-box position="7 0 -3" color="skyblue" width="2" height="2" depth="2" ></a-box>
<a-box position="-7 0 -3" color="skyblue" width="2" height="2" depth="2"></a-box>
<a-sphere position="0 3 -3" color="#EF2D5E" ></a-sphere>
<a-sphere position="0 2 6" color="gray" radius="1" ></a-sphere>
作成したVRコンテンツには球体と箱型のオブジェクトが配置されていますが、これらを呼び出しているのが上記のコード。
<a-box>タグでは箱型のオブジェクトを指定し、属性としては見ての通りですが、colorでオブジェクトの色を指定し、width height depthで箱の大きさ（幅, 高さ, 奥行）を指定しています。
もちろんcolorは16進数のカラーコードでも制御が可能です。
また、<a-sphere>では球体を取得し、radiosで大きさ（半径）を指定しています。
positionタグでは3D空間上のどこにオブジェクトを配置するのかを制御しています。
例えば正面のピンクの球体の場合、position="0 3 -3"を指定することで、X軸方向に0、Y軸方向に3、Z軸方向に-3の位置にオブジェクトを配置することができます。
座標軸はこのようなイメージ。
床オブジェクトの設置
<a-plane position="0 -1 1" rotation="-90 0 0" width="30" height="30" color="silver"></a-plane>
<a-plane>では平面を取得することができ、今回作成したサンプルでは床として平面のオブジェクトを配置しています。
widthとheightで平面の大きさを指定し、床にするためrotationで平面を-90°倒しています。
今回使用したA-Frameのタグはこれだけですが、他にも様々なタグが用意されているので、興味のある方は公式のマニュアルを参考にしてみてください。
最後に
見ての通りいとも簡単にVRコンテンツを作ることができるA-Frame。
ブラウザ上で動くのでコンテンツの公開も非常に手軽なのがいいところ。
複雑なものを作る場合はJavaScriptでのコーディングも必要にはなりますが、VRコンテンツ開発の入り口として「A-Frame」を活用するのは個人的にはありだと思います。
参考リンク
A-Frame – Make WebVR
新しいWebVRフレームワークA-Frame入門 - Qiita
VR開発フレームワークA-frameでつくる360度ビューワー | 涙彩