A-Frameを使ったWebVR制作ことはじめ

2016年12月11日

「WebVRフレームワーク「A-Frame」で3Dコンテンツを作成してみよう」でささくら先生が紹介をしていた「A-Frame」というWebVRフレームワークの導入方法を解説していきたいと思います。

A-Frameに関しては、ささくら先生の記事で紹介がされていますが、簡単に説明すると、Webブラウザー上でVR体験を実現するためにMozillaが開発を進めているフレームワークです。基本的に、裏側ではWebGLが使われていますので、コンテンツはcanvasタグ上に書き出されるという仕組みになっています。そのため、A-Frameをベースにコンテンツを制作していき、細かい動きやイベントの取り扱いに関しては、JavaScriptで処理をして行くということができます。

今回は第一回ということで、A-Frameを導入して、簡単なデモコンテンツを制作するところまでをご紹介したいと思います。

A-Frameの読み込み

まずは、A-Frameを使えるように、JavaScriptファイルを読み込みましょう。ローカルにダウンロードするも良しですし、CDNを利用するも良しです。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>A-Frame | ことはじめ
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js">
  </head>
  <body>
    <!-- コンテンツを記載 -->
  </body>
</html>

jQueryや、Bootstrapなど、外部のライブラリを使用するのとまったく同じですね。難しいことはありません！

コンテンツを作ってみよう

A-Frameは、3D空間の構築に必要な基本的な要素をマークアップ言語化してくれています。そのため、3Dで基本となるような、立方体や球体などのオブジェクトは、HTMLを書くようにタグを記述するだけで、3D空間にサイズ、色、位置を決めて配置することができます。文章で説明しても想像がしづらいと思いますので、コードを見てみましょう。

  <body>
    <a-scene>
      <a-box position="0 1 -3" color="#ff0" width="1.5" height="4" depth="2">
      </a-box>
    </a-scene>
  </body>

どうでしょうか？このコードを書くだけで、3D空間上に直方体を配置できました。みなさん、お察しの通りだと思いますが、<a-box>というタグで、立方体/直方体を作ることができます。このタグに、HTMLと同じように、属性と属性値で色やサイズを指定することができるのです。color、width、height、depthはごそのまま「色」、「横幅」、「高さ」、「奥行き」の値を指定しています。position属性の値は、左からx軸、y軸、z軸の位置を指定できます。

ここの<a-box>を、例えば球体を表示したければ、<a-sphere>に変更して対応した属性値を与えるだけです。

  <body>
    <a-scene>
      <a-sphere position="0 1 -3" color="#0FF" radius="1">
      </a-sphere>
    </a-scene>
  </body>

これで、球体が表示されます。radiusは球体の半径を指定しています。

他にも、タグと属性を変更することで、いろんな形のオブジェクトを表示することができます。また、Blenderなどの3Dオブジェクトツールで制作した3Dオブジェクトを読み込んで配置することもできます。その辺りは次回、ご紹介していきたいと思います。

A-Frameを使ったWebVR制作ことはじめ

A-Frameの読み込み

コンテンツを作ってみよう

関連ブログ記事

テーマ

最新の記事

スタッフ別ブログ

Produce by