A-FrameでVRアプリを作る
VRアプリを作ると言ったら、iOSやAndroidのようなネイティブアプリをイメージするでしょうか。
実は、HTMLでもVRアプリを作れます。
JavaScriptライブラリ「A-Frame」
WebブラウザのFirefoxで有名なMozillaが開発したA-FrameというVRライブラリがあります。
どのようなことができるかは、公式サイトのデモを見るとイメージしやすいです。
早速、触ってみましょう。
A-Frameを試してみる
サンプルソース
Box(立方体)を配置するサンプルソースは以下となります。
box.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frameサンプル - 立方体の配置</title>
<meta name="description" content="Box(立方体)オブジェクトを配置する">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="0 2 -3" rotation="0 45 45" color="green"></a-box><!-- 立方体 -->
</a-scene>
</body>
</html>
実行
これをPCのWebブラウザで表示すると以下のように表示されます。
これはマウスのドラッグや、キーボードのW,A,S,Dで視点を移動できます。
このとき、右下のゴーグルマークをクリックすると、全画面表示になります。
これは没入モードと呼ばれ、スマホであれば本体を横向きにし、スマホ用VRゴーグルに装着してみるために二眼表示になりますし、Oculus Goであれば、通常のアプリと同じようにヘッドトラッキングによるVR空間にいるかのような表示になります。
ソースコードの解説
A-Frameの呼び出し
この部分でA-Frameのライブラリそのものを呼び出しています。
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script>
当サイトはHTTPS化をしているので、https://～となっていますが、httpでも呼び出せます。
<script src="http://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script>
aframe.min.jsをダウンロードしている場合は、例えばHTMLと同じフォルダに置いて、以下のように指定しても構いません。
<script src="./aframe.min.js"></script>
Boxの表示
この部分がboxを表しています。
<a-box position="0 2 -3" rotation="0 45 45" color="green"></a-box>
positionがboxの位置を3次元座標で表しています。
順にx, y, zに対応していて、画面に向かって右がX軸の正、上がY軸の正、手前がZ軸の正です。
注意点として、カメラの視点座標はデフォルトで原点(0, 0, 0)です。
(ただし、若干上にいるようで、0, 0.8, 0くらいにも見えます)
positionを指定しない場合(0 0 0)となるため、画面ロード時に立方体が見えません。
(キーボードで移動すれば見えます)
(0, 2, -3)とは、左右中央で、少し上の方で、少し奥の方に位置します。
rotationが回転を3軸で表しています。
順にx, y, zに対応していて、回転方向は右ネジの法則と同じ方向(軸の正の方向から見て、反時計回り)となります。
colorは、立方体の表面の色で、上記は緑に設定しています。#336699のようにRGBで指定することもできます。
まとめ
A-Frameを使ってHTMLでVRアプリのサンプルを作りました。
立方体を配置し、画面内で見てみました。