【これからはじめるReact 360】 まずは環境構築

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay8です！

昨日はsorceryで実装するLINEログインについての記事でした。

sorceryで実装するLINEログイン

このシリーズではReact 360の使い方を、実際にランニングに関するVRを開発しながら解説していきます。
今回はFacebook社によるReactでVRコンテンツを開発可能な、React 360の環境構築やファイルの概要をご紹介します。

React 360とは

ReactはFacebook社が開発したJavaScriptライブラリです。
bageleeでも過去にこのような入門シリーズでご紹介しています。

Reactでスマートスピーカーのコマンド発音サービスを作ろう（１）【作りながら覚えるReact】

今回ご紹介するReact 360（旧React VR）は、ReactでWebVRの開発をする為のライブラリです。
VR（Virtual Reality）は皆さんご存知の通り、ヘッドセットを使用し仮想現実への「没入感」を味わうものです。

また、WebVRはその名の通り、Web上でVRを再現したものです。
ヘッドセットを使うVRとは異なり、スマートフォンをかざすことで擬似的に自分がその空間にいるような感覚を味わうことができます。
もちろん、ヘッドセットがない分没入感は弱くなりますが、より手軽なVR体験を行うことができます。

React 360はVRモードを用意しており、ヘッドセットをつけて本格的なVR体験をすることも可能です

では、WebVRのサンプルを見てみましょう。
bageleeの運営企業であるeishisでは、Web上でARやVRを実現可能なWebAR、WebVRを開発しており、そのサンプルコンテンツとなります。

WebVRゲーム – 寿司ポップ

プレイ動画はこちらです。
視点を合わせることでお寿司をキャッチしていくという簡単なゲームです。

このように、WebブラウザからVR体験することができるのがWebVRで、更にそれをReactで開発できる技術がReact 360（旧React VR）です。

3Dオブジェクトを配置してみる

環境構築

では、実際にReact VRで3Dのオブジェクトを配置していきましょう。
まず公式リファレンスに沿って環境を構築していきます。
※Mac OSでの開発フローをご紹介します。

まず、ターミナルからReact360のCLIをインストールします。
npm install -g react-360-cli

次にreact-360-cliからプロジェクトを作成します。
react-360 init bagelee360

Now enter the new project directory by running `cd bagelee360`
  Run `npm start` to initialize the development server
  From there, browse to http://localhost:8081/index.html
  Open `index.js` to begin editing your app.

メッセージの通り、bagelee360ディレクトリにcdで移動し、npm start を実行しましょう。

するとコンパイル後、http://localhost:8081/index.html にアクセスするとこのように表示されるはずです。

これで準備は完了です！

各ファイルやディレクトリの役割

ではReact360を構成する各ファイルやディレクトリをみていきましょう。

client.js
React360としてのインスタンスを生成し、背景画像を組み込み、index.jsのReactのコードを画面上にVRとしてレンダリングする役割を担っています。

index.html
アプリケーションを読み込むWebページです。

static_assets
画像や動画などの静的なアセッツを置いておくディレクトリです。

index.js
アプリケーションのメイン部分を担っています。
様々なコンポーネントを読み込み、表現することができます。
このファイルを中心に触っていきます。

package.json
React360ではnpmを使用し、様々なライブラリを読み込むことができます。
npmについてはぜひこちらの記事も参考にしてみてください。

npmのpackage.jsonと依存関係を理解しよう！

yarn.lock
インストールされたライブラリのバージョン情報が格納されています。
これにより、異なるマシンでも同じライブラリの同じバージョンでの環境構築が可能となります。

node_modules
読み込んだnode moduleがこのディレクトリに格納されます。

rn-cli.config.js
React Nativeの動作時の設定を行うことができるファイルです。

__tests__ディレクトリ
テストに関するファイルを置くディレクトリです。

index.jsを確認する

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class bagelee360 extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Welcome to React 360
          </Text>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

AppRegistry.registerComponent('bagelee360', () => bagelee360);

では、主な部分を解説していきます。

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

ここではreact-360のコンポーネントをimportしています。
他にも画像を扱うImageコンポーネントや3Dオブジェクトを扱うEntityなどもあります。
次回以降の記事では実際に3Dオブジェクトを配置していきます！

export default class bagelee360 extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Welcome to React 360
          </Text>
        </View>
      </View>
    );
  }
};

ここではViewコンポーネント内にTextコンポーネントでテキストを表示しています。
また、styleは後述のStyleSheetで定義されています。

ここでは先程のコードで当てているスタイルを定義しています。
React Nativeと同じStyleSheetを使用しています。

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

まとめ

ざっくりとですが、React 360の環境構築やファイルの構成をご紹介しました。
これから、index.jsをコンポーネント分割していき、また3Dオブジェクトなど様々なコンポーネントを使用し、リッチなランニングVRを作っていきます。