Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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が表示されたら成功です.
A-Frame_HelloWorld.PNG

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away