【A-Frame】UnityなしではじめるOculus Go VR開発入門

更新日 2018年10月4日
著者花井雅敏
カテゴリー VR

この記事では、A-Frameを使ってHTMLでVRコンテンツを開発する方法を紹介します。

Oculus GoなどのVRヘッドセットを購入して、自分でもVRコンテンツを作ってみたい！と思っている人は多いのではないでしょうか？

調べて見るとよく出てくるのはUnityやUE4を使ったVRコンテンツの開発ですが、Webデザイナーやエンジニアではない人にとっては難しいイメージがあるかもしれませんが、実はA-Frameを使えばHTMLを書くだけでブラウザからアクセスできるVRコンテンツが作成できます。

A-Frameとは？
対応ブラウザ・デバイス
- Oculus Goは対応してないの？
A-Frameを試してみよう！
まとめ

A-Frameとは？

A-FrameはカスタムHTMLタグを使ってWebVRを作成する、Firefoxを作っているMozVRが開発しているオープンソースのフレームワークです。three.jsやWebGLを使ってVRに対応したページが作れます。簡単なVR体験をするためであれば、Unityや他のWebGLのライブラリ比べても導入ハードルが低く、気軽に取り組めます。

またブラウザで動作するので、各VRヘッドセットに合わせてアプリ化しなくても色々な端末からVR体験できるのもお勧めできるポイントの１つです。

サンプルもたくさんあるのでこちらから見てみてください。

対応ブラウザ・デバイス

WebVRの仕様を実装しているブラウザであれば閲覧することができるので、Chrome、Firefox、Edge、Operaではデスクトップ上でインタラクティブな3D体験ができます。

またVRでの3D体験は、VRヘッドセットが必要になります。

今現在対応しているヘッドセットは以下の通りです。

詳しくはA-Frameのサイトの「VR Headsets & WebVR Browsers」のページを確認してください。

VR Headsets & WebVR Browsers

Oculus Goは対応してないの？

この一覧には、Oculus Goは出てきませんが、自分の持っているOculus Goでサンプルサイトなどを見てみたところ、問題なく3D体験できましたので、単純にこのページが更新されてなかっただけかなと思います。

Oculus Goは対応しています！

A-Frameを試してみよう！

以下のページをベースに日本語で使い方を解説していきます。

Introduction – A-Frame

aframe.io

1. aframe.jsを読込む

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

ここでは、手軽にCDNを読み込んでいきます。

公式の方に、ローカルにダウンロードしてきて読み込み方法も書かれているので参考にしてください。

2. シーンをつくる

まずは、<body>タグ内に、<a-scene>タグを書きます。A-Frameの要素はこの中に書いています。

<a-scene>
    <!-- ここにA-Frameの要素を書いていく -->
</a-scene>

3. 背景に色をつける

続いて、背景色をつけていきます。<a-sky>タグにcolor要素で、背景色を決めていきます。ちなみに初期値は黒です。

今回は、明るめのグレーを指定します。

<a-scene>
    <a-sky color="#ECECEC"></a-sky> <!-- 背景色の指定 -->
</a-scene>

4. オブジェクトを配置する

続いて、オブジェクトをシーンに配置していきます。

Boxを配置する

まずは、箱 (Box)を配置します。<a-box>タグで作成します。それだけでは表示されないので、各要素をしていきます。

<a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <!-- Boxを配置する -->
    <a-sky color="#ECECEC"></a-sky>
</a-scene>

最低限必要なのがposition要素です。シーンないの位置を決めていきます。数字は左から、x y zの位置を決めます。ちなみに、シーンの左右がx、上下がy、奥行きがzです。

続いて、オブジェクトの回転をrotation要素です。こちらも左から、x y z軸に対して回転します。

そして、オブジェクトの色を変えるcolor要素です。これでオブジェクトの色が変えられます。

これらの要素は、他のオブジェクトでも共通です。

球を配置する

続いては、球(sphere)を配置します。今度は、<a-sphere>タグで追加します。

<a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <!-- 球を配置する -->
    <a-sky color="#ECECEC"></a-sky>
</a-scene>

こちらもboxと同じように、position要素、color要素を指定します。先ほど出てこなかった要素として、radius要素がありますが、これは球の半径をして球の大きさを調整できます。

円柱を配置する

続いては、円柱(cylinder)を配置します。今度は、<a-cylinder>タグで追加します。

<a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder><!-- 円柱を配置する -->
    <a-sky color="#ECECEC"></a-sky>
</a-scene>

こちらも基本的は、今まで紹介してきた要素と同じで、a-cylinder特有のところはradius要素とheight要素で大きさを指定しています。

板を配置する

続いては、板(plane)を配置します。今度は、<a-cylinder>タグで追加します。

<a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane><!-- 板を配置する -->
    <a-sky color="#ECECEC"></a-sky>
</a-scene>