最近ハマっている、HTMLだけでVR空間を作れるライブラリ「A-Frame」について紹介します。
準備
ヘッダーでA-Frameのライブラリを読み込む必要があります。今回のサンプルは下記のCDNを使っています。
https://cdnjs.cloudflare.com/ajax/libs/aframe/0.3.2/aframe.min.js
サンプル
See the Pen A-Frame Basic : plane & box by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
A-Frame表示の中はドラッグで視点操作や、WASDキーで移動もできます。
今回使っているA-Frameのタグは3つ。
<a-scene> //A-Frameを開始するタグ。いわばA-Frameの<body>タグ <a-plane> //基本形状の一つ、平面を作るタグ <a-box> //基本形状の一つ、箱を作るタグ
これらタグにHTMLのようにプロパティを書くことができます。
a-plane
<a-plane color="#696" width="5" height="5" position="0 0 -3" rotation="-90 0 0" ></a-plane>
緑色で5×5の面積をもつ平面を設置しています。
A-Frameの中で大きさや位置の数値はメートルなので、25平方メートルの床になります。
a-planeはデフォルトではZ軸方向を向いて立っているので、床として使う場合はrotationでX軸に-90度します。
a-planeにはdepthの値はありません。厚みがゼロなので真横から見たら何も見えなくなるため、地面としてやオブジェに貼り付けるなどの使い方がメインになります。 厚みのある平面を作りたい時はa-boxを加工することになります。
a-box
<a-box color="#f60" width="1" height="1" depth="1" position="0 .5 -3" rotation="0 45 0" ></a-box>
オレンジ色の箱を45度回して置いています。
今回はwidth,height,depthに1ずつ指定していますが、デフォルトもすべて1です。
positionに「0 .5 -3」と指定していますが、これには2つの理由があります。
まず、カメラの初期位置から見えるように中心点（0 0 0：カメラの初期位置）から少し引いた（Z軸-3）に置いています。
次に、Y軸の「0.5」については、A-Frameのオブジェは基準点が全て中心にあり、Y軸に0を指定しているとオブジェの高さ半分が地中に埋まります。そのため地面より上に出したければ高さの半分をY軸に入れる必要があります。
続きはまた後日。
