【Mac】ReactでVR!? React 360を使用して、パノラマ画像を表示させる手順方法。

#はじめに

セブ島もくもく会の中で、初学者を対象にしたVR開発入門講義を行いました。
環境構築から、パノラマ画像を表示させるまでの手順をこちらに残しておきます。

#やること
タイトル通りです。
ただし、各用語の解説はいたしません。手順のみです。
ご了承ください。

#React 360って？
Facebook社製のVR専用アプリケーションフレームワークです。
実はReactの書き方で、VRアプリも開発できます！
https://facebook.github.io/react-360/
![facebook.github.io_react-360_ (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/12aba70b-bd60-f32d-93e3-ce595ea79aad.png)



#開発環境(筆者の環境です。)
- macOS Mojave 10.14.5
- Node.js 12.6
- npm 6.9

Node.jsのインストール方法はこちらから。
https://qiita.com/AwesomeArsAcademia/items/4f685e2f46bab122f6cf

必要なツールはこちらから。

- [iterm2](https://www.iterm2.com/)
- [Homebrew](https://brew.sh/index_ja)


#開発環境を整える

##`react-360-cli`をインストール
https://facebook.github.io/react-360/docs/setup.html
公式ドキュメントを参考に、開発環境を構築していきます。

npmを使って、`react-360-cli` をインストールします。

```bash
$ npm install -g react-360-cli
```

##アプリを立ち上げる

下記のコマンドを打つとフォルダが作成されます。

```bash
$ react-360 init Hello360
Creating new React 360 project...
Project directory created at Hello360

~省略~

success Saved lockfile.
✨  Done in 21.60s.
Done!
  Now enter the new project directory by running `cd Hello360`
  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.

$ ls
Hello360
```

上記の指示通り、Hello360に移動して`npm start`を実行します。

```bash
$ cd Hello360
$ npm start
```

http://localhost:8081/index.html
上記のURLにアクセスしてみましょう。ロードに時間がかかると思いますが、しばらくすると下記のような表示が出るかと思います。
![localhost_8081_index.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/7bcae6ca-ff85-5076-d783-6959884034a9.png)


#`Welcome to React 360`から`Hello World`に変えてみる。(index.js)

エディタを開きます。
`index.js`を開くと下記が記載されているかと思います。

```react:index.js

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

export default class Hello360 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('Hello360', () => Hello360);

```

ここで、15行目の
`Welcome to React 360`を`Hello World`に書き換えます。
ファイルを保存して、ブラウザを更新しましょう。
下記のように表示されれば成功です！
![localhost_8081_index.html (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/ab5b790b-7ee9-cc59-287b-6647f6423bdc.png)


#パノラマ画像を表示させる。

パノラマ画像のフリー素材ですが、僕は下記のURLからダウンロードしました。
http://panoroman.nao3.net/

ダウンロードしたら、`static_assets`のフォルダの配下に移動します。
名前も変更しましょう。
※今回は`p1.jpg`で進めていきます。

背景の画像を変更する際は`client.js`のファイルを編集します。

```react:client.js
// This file contains the boilerplate to execute your React app.
// If you want to modify your application's content, start in "index.js"

import {ReactInstance} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    ...options,
  });

  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('Hello360', { /* initial props */ }),
    r360.getDefaultSurface()
  );

  // Load the initial environment
  r360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));
}

window.React360 = {init};
```

20行目にある

```react

  r360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));
```

こちらの`360_world.jpg`を先ほどダウンロードしたファイル名に書き換えます。
今回は`p1.jpg`に変更します。
保存して、ブラウザを更新しましょう。
下記の表示になれば成功です！
マウスでグリグリ動かしてみましょう。
![localhost_8081_index.html (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/392ad977-4f30-6f6d-b363-21be1673fa2b.png)


#最後に
解説が欲しい方は下記の記事がおすすめです。
https://qiita.com/shiruco/items/3e77babe80a373c71fd5
https://qiita.com/bayarea-techblog/items/46531e0a64ffa1c0d181