• 技術が集うTECH GUILD

    VRアプリを作ると言ったら、iOSやAndroidのようなネイティブアプリをイメージするでしょうか。
    実は、HTMLでもVRアプリを作れます。

    JavaScriptライブラリ「A-Frame」

    WebブラウザのFirefoxで有名なMozillaが開発したA-FrameというVRライブラリがあります。
    どのようなことができるかは、公式サイトのデモを見るとイメージしやすいです。

    https://aframe.io/

    早速、触ってみましょう。

    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アプリのサンプルを作りました。
    立方体を配置し、画面内で見てみました。


    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください