A-Frameで始めるWebVR 　"Hello World"やってみよう #HTML

A-Frameとは

「A-Frame」はFireFoxで有名なMozillaのVRチームが開発したWebVR用のオープンソースフレームワークです。web上で3Dを描画するための標準仕様「webGL」や、そのwebGLを簡単に扱えるようにするjavascriptライブラリ「three.js」を用いてweb上にVRに特化したコンテンツを作成することができます。

また構築にあたりjavascriptをゴリゴリに書くのではなく、htmlタグとしてシーンやカメラ、オブジェクトなどの設定ができるため、かなりとっつきやすくなっています。さっそくはじめてみましょう．

[関連サイト]
A-Frame
https://aframe.io/

Hello Worldをやってみよう

特にダウンロードなどは必要ありません．
htmlファイルを作成し，以下のコードを打ち込むことで，BOXが現れます．


<!DOCTYPE>
<html>
    <head>
        <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <a-box color="#4CC3D9" width="2" height="1" depth="2" position="0 0 0" scale="1 3 1">
            </a-box>
            <a-sky color="#ECECEC"></a-sky>
        </a-scene>
    </body>
</html>

BOXが表示されたら成功です．

このBoxをマウスでグリグリ動かすことができるので体験してみてください．
通常のVRの開発と比較にならないくらいお手軽で，衝撃的でした．

A-Frameで始めるWebVR "Hello World"やってみよう

A-Frameとは

Hello Worldをやってみよう

A-Frameで始めるWebVR 　"Hello World"やってみよう