はじめに

こんにちは！かほです♪🐥
本業では技術広報業務や開発業務などに従事しています。
また完全にプライベートでTECH WOMAN KANSAIという関西の女性エンジニア限定のコミュニティをゼロから立ち上げ運営したりもしています。

今回の記事では、A-Frameと呼ばれるWebVRフレームワークを用いて初めてVR表現を実装してみた過程について紹介します♪

この記事の読者対象

・WebVRを簡単に実装してみたい方
・WebVRに興味のある方
・A-Frameに興味のある方
・A-FrameでWebVRを実装してみたい方

開発環境

htmlファイルのみ準備が必要

A-FrameでWebVR実装をしようと思った経緯

いきなりVR！？と思われた方が多いと思うので、このテーマを執筆した経緯について簡単に説明します。

〜これはTECH WOMAN KANSAIのコミュニティ内での会話〜
Aさん💁‍♀️「あのー、今回のLT会で発表するテーマについて相談したいので、お話できますか？」
自分「もちろん！」
Aさん💁‍♀️「３つぐらいテーマの候補はあって、A-Frameを候補に入れています🙌」
自分「初めて聞くなぁ〜どんなツール？」
Aさん💁‍♀️「VR空間を作るためのフレームワークです！少しコード書いたらすぐにVR表現ができますよ！」

公式ホームページを教えてもらってVR空間のデモを触ってみた！
.

自分「おおー!!!なんか動いとる!!!（語彙力皆無）」
Aさん💁‍♀️「もともとVRを触ってたので知ってたんですけど、すぐできるんでぜひ触ってみてください〜。」
自分「|ू•ω•)ﾁﾗｯ」

といったコミュニティメンバーとの会話で、A-Frameのことを初めて知りました。
今までVRに触れたことが一切なかった自分にとっては、この出来事はとても新鮮だったので、VR表現の実装に対して純粋に好奇心が湧きました。
そこでA-Frameを使ってVR表現を実装してみることにしました！

A-Frameとは？

A-Frameの概要をざっくりと把握すると、VR体験を構築するWebフレームワークです🐥
おおよそHTMLもしくはJavaScriptにより、至ってシンプルに実装できる点がメリットと言えます。
また、単なるマークアップ言語というわけではなくて、Three.jsがベースになっているらしいです！

A-Frameを使ってVR表現を実装しよう！

A-Frameを使って実装を開始します！

①headタグ内にscriptタグを追加しよう

最初に、headタグ内にscriptタグを入れ子として、A-Frameフレームワークをページに取り込みます。
詳しくはA-Frame JavaScripライブラリーファイルをチェックしてみてください🙌

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
</html>

②sceneを追加しよう

次に、全てのオブジェクトを描画するためには　sceneが必要なため、sceneを追加します。
全てのエンティティ(映したい物体)がsceneに含まれる構成になります。

index.html

<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    </a-scene>
  </body>
</html>

③各物体を追加しよう！

②sceneを追加しようで追加した<a-scene>タグの入れ子に物体を追加し、上記のVR画像の中にあるような物体を設置してみましょう♪🐥
下記では3つの物体例を挙げて説明します。

箱の設置

立方体のような物体を設置したい場合は、<a-box>タグを使用し、追加します。

index.html

<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 1 -5" rotation="0 90 0" color="#FFCCFF"></a-box>
    </a-scene>
  </body>
</html>

<a-box>タグ内の各要素の意味は下記の通りです。
position: その物体の位置、rotation: その物体の回転、color: その物体の色

また、この物体のVR画像は下記のようになりました😆

<a-box>タグで使用できる要素については他に様々なバリエーションがあります。
説明はリンク先にありますので、ぜひご覧ください🙌

球体の設置

球体のような物体を設置したい場合は、<a-sphere>タグを使用し、追加します。

index.html

<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
       <a-sphere position="1 1 -3" color="#9057FF" radius="0.5"></a-sphere>
    </a-scene>
  </body>
</html>

<a-sphere>タグ内の各要素の意味は下記の通りです。
position: その物体の位置、color: その物体の色、radius: その物体の半径、

また、この物体のVR画像は下記のようになりました😆

<a-sphere>タグで使用できる要素については他に様々なバリエーションがあります。
説明はリンク先にありますので、ぜひご覧ください🙌

アニメーションがついた物体例

上記のような物体にさらにアニメーションの動きをつけることができます。
今回は球体を表す<a-sphere>タグを入れ子にして、外側の<a-entity>タグの要素としてanimationを付与します。

index.html

<a-scene>
  <a-entity rotation="0 0 0" animation="property: rotation; to: 0 360 0; loop: 2; dur: 5000">
    <a-sphere position="5 0 0" color="red"></a-sphere>
  </a-entity>
</a-scene>

animation要素のプロパティの意味は下記の通りです。
property:アニメーションの動きにつけたいコンポーネントの名前
to:アニメーションさせる数値を指定
loop:アニメーションを繰り返す数
dur:アニメーションする時間をミリ秒で指定

また、この物体のVR画像は下記のようになりました😆

animation要素については他に様々なプロパティのバリエーションがあります。
説明はリンク先にありますので、ぜひご覧ください🙌

最後に

今回は、実際に試してみたVR表現の事例を画像と共に3つほど挙げました。
VR表現の幅は広く、物体に影をつけたり、平面の物体を動かしたりなどまだまだ試せることはたくさんあるようです！
気になった方々はぜひ公式サイトを見て色々チャレンジしてみてください♪
(私も気になるので、また触ってみようっと👀)

また、ほぼHTMLを書くだけでVR表現が可能であることにびっくりしました！
これはまだまだVRの入り口に過ぎないんだろうけど、ワクワクするなぁと感じるばかりです💓

今後もまた時間がある時に触ってみようかな！ではでは〜🐥

Twitterアカウント:https://twitter.com/kaho_eng

参考資料