maesblog

WebVRコンテンツをReactで開発するためのaframe-react紹介

各WebブラウザーでのWebVRの対応が徐々に進んできています。つまり、VR（バーチャルリアリティ）コンテンツがブラウザーで体験できるようになってきています。VRヘッドマウントディスプレイを開発するOculusを傘下に持つFacebookは、React360というReactでWebVRコンテンツを開発するツールを提供したりするなど、WebVRコンテンツを開発するツールも世の中に出回ってきました。今回は、以前にこのブログで紹介したMozillaが開発しているA-FrameというWebVR開発ツールをReactの作法で開発できるようにするaframe-reactというツールについて紹介します。

はじめに – 2018年のWebVR

「WebVR元年」と言われた2017年。2018年になり、まだまだWeb全体で盛り上がっているようには感じませんが、MozillaとW3Cが仕様の策定を進めているWebVR APIのブラウザーの対応も少しずつ進み、WebブラウザーでVR（バーチャルリアリティ）体験を試せる土壌ができつつあります。SupermediumというVR専用のWebブラウザーなども登場しています。VRの普及が進めば、Webの使い方にも大きな変化が現れます。開発者であれば、このWebVR周辺の技術もそろそろキャッチアップしておく必要が出てきたのではないでしょうか。

当ブログでは、これまでにWebVR開発のフレームワークである、「A-Frame」、「ReactVR（現React360）」、「Google VR View」について記事を書いています。サンプルなども載せていますので、参考に当記事と併せてチェックいただけるとよいかと思います。

aframe-reactの紹介

その中で今回紹介するツール「aframe-react」は、A-FrameとReactを連携させて、A-FrameのタグをReactのコンポーネントとして開発できるようにしたものです。作者はA-Frameの開発者でもあるMozillaのKevin Ngo氏です。React360（旧ReactVR）とほぼ同じような手法でコードを書きます。

aframe-react
ngokevin/aframe-react

以下は、aframe-reactのボイラープレートです。簡単なサンプルとなっているので、併せてご確認ください。

さて、今回はこの「aframe-react」の開発環境の構築からサンプルを表示するところまでをご紹介したいと思います。

create-react-appを使ってプロジェクトの準備

「aframe-react」を利用するには、reactの開発環境を準備する必要があります。昨今のフロントエンドの開発環境が複雑になってきていますが、Reactの開発環境も例外ではありません。今回は、Facebookの提供しているコマンド一発でReactの開発環境を構築してくれる「create-react-app」を使って開発環境を構築します（なお、ゼロコンフィグのビルドツール「Parcel」を使っても簡単にReactの開発環境を作ることができます）。

create-react-appのインストール

以下のコマンドをたたくとシステムにcreate-react-appがインストールされて、お使いのパソコンでcreate-react-appコマンドが使えるようになります。

$ npm install -g create-react-app

プロジェクトディレクトリの作成

create-react-appをインストールしたら、プロジェクトディレクトリを作りたいフォルダに移動して、以下のコマンドを実行します。コマンドの後ろには任意のプロジェクト名を指定します（今回はaframe-react-sampleとしました）。Reactの開発環境が構築された状態でプロジェクトディレクトリが作成されます。

$ create-react-app aframe-react-sample

プロジェクトディレクトリに移動

プロジェクトディレクトリが作成されたら、その中に移動します。通常であれば、新たにnpmのプロジェクトを開始する場合npm initコマンドを実行する必要がありますが、すでに開発環境が構築されているので、その必要はありません。

$ cd aframe-react-sample

aframe-reactのインストール

プロジェクトディレクトリを作成し、中に移動したら、さっそくA-Frame本体である「aframe」とA-FrameとReactの連携を行う「aframe-react」をプロジェクトディレクトリにインストールします。

aframeとaframe-reactをインストール

インストールするには以下のコマンドを実行します。

# yarnでインストールする場合
$ yarn add aframe aframe-react

# npmでインストールする場合
$ npm install --save aframe aframe-react

aframeがインストールできない場合

上記の通り、aframe-reactに加えaframe本体もインストールするのですが、この記事の執筆中のaframeの最新バージョン0.8.2が以下のエラーによってインストールできませんでした。

error https://codeload.github.com/dmarcos/three.js/tar.gz/9be3a8056dead5edbdb4ff2b532138ea5e74054e: unexpected end of file
    at Zlib.zlibOnError [as onerror] (zlib.js:153:17)
info Visit http://yarnpkg.com/en/docs/cli/add for documentationabout this command.

仕方なく私の場合は、以下のようにバージョンを指定してaframe v0.7.0をインストールしました。v0.7.0は問題なくインストールできました。

# yarnでインストールする場合
$ yarn add aframe@0.7.0

# npmでインストールする場合
$ npm install --save　aframe@0.7.0

これで開発環境の準備は完了です。

A-Frameで書いたサンプル

aframe-reactは、A-FrameをReactで書くためのツールです。従って、A-Frameで書いたコードが、aframe-reactだとどのように書くことができるのかがわかるように、まずはA-Frameで書いたサンプルを紹介します。サンプルは当ブログの過去記事『HTML感覚でWebサイトに「VR」コンテンツが作れるツール「A-Frame」』で扱ったものです。

A-Frameで書いたサンプルコード

A-Frameのサンプルコードは以下となっていました。

<body>
  <a-scene>
    <a-box
      color="red"
      position="0 2 -5"
      rotation="0 45 45"
      scale="2 2 2"
    >
    </a-box>
    <a-sky color="#ccc"></a-sky>
  </a-scene>
</body>

実行結果は以下のようになりました。

See the Pen jBOWPY by Takanori Maeda (@maechabin) on CodePen.
別ウィンドウで開く（A-Frame-sample – CodePen）

aframe-reactでサンプルを書き換える

A-Frameで書いたコードをaframe-reactで書き換えてみましょう。プロジェクトディレクトリをお使いのエディタで開いてください。

今回は、サンプルなのでプロジェクトディレクトリ内のsrcフォルダ内のApp.jsファイルを使用します。App.jsを開くと、すでにcreate-react-appのサンプルコードが記載されているので、記載されているコードを一旦すべて削除し、以下のコードを記述してください。

import 'aframe';
import { Entity, Scene } from 'aframe-react';
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <Scene>
        <Entity
          geometry={{ primitive: 'box' }}
          material={{ color: 'red' }}
          position={{ x: 0, y: 0, z: -5 }}
          rotation={{ x: 0, y: 45, z: 45 }}
          scale={{ x: 2, y: 2, z: 2 }}
        />
        <Entity primitive="a-sky" material="color: #ccc" />
      </Scene>
    );
  }
}

export default App;

実装のポイント

簡単に説明しますと、aframe-reactで用意されているSceneコンポーネントとEntityコンポーネントは、それぞれA-Frameの<a-scene>と<a-entity>をラップしており、A-Frameと同じように振る舞います。A-Frameではタグに属性を指定することができましたが、aframe-reactでは、同様の属性値をReactのPropsを通して渡すことができるようになっています。

なお、aframe-reactでは、A-Frameで用意されている<a-scene>と<a-entity>以外の<a-*>タグには対応していないので、基本的にはEntityコンポーネントを使って、それぞれのタグを再現するようにします。

従って、A-FrameのEntity-Component Systemをしっかり理解しておく必要があります。

結果を出力 / ビルド

結果を確認する場合は、以下のコマンドを実行します。ローカルサーバーが起動し、ブラウザーに結果が表示されます。なお、こちらはcreate-react-appの機能（HMR: Hot Module Replacement）となりますが、コマンドの実行中は、コードを変更するたびに自動的にブラウザーに変更箇所が反映されるようになります。

$ npm start

また、ビルドする場合は、以下のコマンドを実行します。distディレクトリ内にプロダクションビルド版のファイル一式が作られます。

$ npm run build

aframe-reactで書き換えたサンプルコードの結果は以下の通りです。

別ウィンドウで開く

（スマホ用のメガネのマークが表示されなかったのが気になるところです。aframe-reactのサンプルを見るとちゃんと表示されているので、別に対応が必要なのかもしれません。）

まとめ

以上、紹介してきたようにaframe-reactはReactの作法で開発ができることを目的として作られていて、Facebookの提供するReact360とほぼほぼ同じような感覚で使えるんじゃないかと思います。Reactの作法でVRコンテンツ開発できるということは、Reactの開発者にとっては、大変なアドバンテージにもなるはずです。もちろん、VRコンテンツを組み立てるための専用の知識が別途必要なので、それなりに敷居は高いと思います。

なお、React360とaframe-reactの違いとして、React360はReact Native上に構築され、WebVR用のJavaScriptのランタイムを備えていまるのに対して、aframe-reactはReactとブリッジするためのA-Frame上の薄いレイヤーとなります。いずれにせよ、開発スタイルに関しては大きな違いはないので、すでにA-FrameでVRコンテンツを開発していてEntity-Component Systemの扱いに慣れているのであれば、aframe-reactの選択はありかなと思います。また、どちらが好みかReact360とaframe-reactの両方を試してみるのよいかと思います。

今回の記事で紹介したサンプルのコードですが、GitHubにアップしています。最後に、紹介しておきます。

関連記事

コメント

  • 必須

コメント