Help us understand the problem. What is going on with this article?

【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

開発環境(筆者の環境です。)

  • macOS Mojave 10.14.5
  • Node.js 12.6
  • npm 6.9

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

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

開発環境を整える

react-360-cliをインストール

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

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

$ npm install -g react-360-cli

アプリを立ち上げる

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

$ 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を実行します。

$ cd Hello360
$ npm start

http://localhost:8081/index.html
上記のURLにアクセスしてみましょう。ロードに時間がかかると思いますが、しばらくすると下記のような表示が出るかと思います。
localhost_8081_index.html.png

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

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

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 360Hello Worldに書き換えます。
ファイルを保存して、ブラウザを更新しましょう。
下記のように表示されれば成功です!
localhost_8081_index.html (1).png

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

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

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

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

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行目にある

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

こちらの360_world.jpgを先ほどダウンロードしたファイル名に書き換えます。
今回はp1.jpgに変更します。
保存して、ブラウザを更新しましょう。
下記の表示になれば成功です!
マウスでグリグリ動かしてみましょう。
localhost_8081_index.html (2).png

最後に

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away