はじめに
Webブラウザで動かせるA-Frameの紹介です（今更ですが）。
何回続くか分かりませんが、週刊ぐらいでA-Frameの連載してみます。
完成図
全体ソースコード
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Web VR Test</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#a0d8ef" wireframe="true"></a-sky>
<a-box position="0 0 -10" width="2" height="1" depth="1.5" color="#333"></a-box>
</a-scene>
</body>
</html>
ちなみに公式ドキュメントのサンプルも１４行で、やっていることは似たようなものです。
https://aframe.io/docs/0.9.0/introduction/
コード解説
<head>
...
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
WebGLのJavaScriptライブラリ「Three.js」を元に作られた、WebVR用フレームワーク『A-Frame』を読み込んでいます。
<a-scene>
...
</a-scene>
A-Frameはこんな感じに、HTML要素のように記述していきます。
a-sceneの宣言は必須で、これを入れるだけでVR空間が出来上がります。
更に、完成図右下にあるようなVRアイコンや、VRデバイスで見た時のトラッキング等の実現がこれ一つでできます。
Three.jsでVRアプリを作ろうとしたことがある方なら、この手軽さには感動モノ。
<a-sky color="#a0d8ef" wireframe="true"></a-sky>
a-skyで空を定義できます。
wireframe=trueを入れないとベタ塗りの空が表示されて上下左右が分かりづらいので、敢えてワイヤーフレームにしています。
<a-box position="0 0 -10" width="2" height="1" depth="1.5" color="#333"></a-box>
a-boxを入れることで直方体(、立方体)ができます。
A-Frameは幅、高さ、奥行き（x,y,z軸）のサイズや位置・回転、色や各種プロパティをjsコードではなくHTML属性として記述することで操作ができるので、可読性高く記述ができます。
最後に
A-Frameは公式ドキュメントやチュートリアルが丁寧ですが英語なので、英語が分からないと少々ハードルが高いかもしれません。
記述自体は非常にシンプルなので、ぜひいろいろ使ってみてください。
次回はA-Frameで3Dオブジェクトの選択できるようにしてみます。