reactjs
VR
React
reactnative
JavaScriptVR
0
yushimatenjin@yushimatenjin
RevisionsEdit RequestsShow all likersShow article in Markdown
Report article

ReactでVR空間が作れてiPhoneでグルグル動かせるらしいので触れて見る【React 360】

reactjsVRReactreactnativeJavaScriptVR

Image 34.png

VRとReactに興味があったので、React 360に触ってみます。

React 360とは?

React 360は、Facebook社製の3DおよびVR空間上のユーザーインターフェイスを実装するためのフレームワーク
https://qiita.com/shiruco/items/3e77babe80a373c71fd5

公式サイトはこちらになります
https://facebook.github.io/react-360/

React 360のインストール

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

npm
npm install -g react-360-cli
yarn
yarn global add react-360-cli

環境を構築する

mkdir workspace //作業用のディレクトリを作成します
cd workspace

react-360 init Hello360 // 今回はHello360というreact-360のプロジェクトを作ります
cd Hello360

これで環境ができあがるので実行してみます。
実行する
yarn start

ローカルサーバーが立ち上がるのでアクセスします。
http://localhost:8081/index.html
Image 35.png

実機で確認
ローカルホストで立っているサーバーに対して同じLAN内にいるiPhoneからアクセスをしてみます。
http://ホストのIPアドレス:8081/index.html

めっちゃグリグリ動かせる

Routput5.gif

動かせることが確認できたので少しいじってみたいと思います。

tree
.
├── __tests__
├── client.js
├── index.html
├── index.js
├── node_modules
├── package.json
├── rn-cli.config.js
├── static_assets
└── yarn.lock

initした直後のファイル構成はこの様になっており、実際いじるファイルは index.js とclient.jsの２ファイルになるかと思います。
https://facebook.github.io/react-360/docs/explore-code.html
https://facebook.github.io/react-360/docs/explore-code.html

index.js

実際にアプリのメインのコードをこちらに記述します。

client.js

ランタイムに接続するために使用します。
React 360のインスタンスを作成する。
アプリを初期化するためのオプションを渡すことができる。

React 360が提供しているコンポーネント

使用できるコンポーネントコンポーネントは５つあるようです。

  • View
  • Text
  • Image
  • Entity
  • VrButton

init時の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);

単純にボックスを重ねてみます。

index.js
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>

                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                </View>
                <View style={styles.greetingBox}>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>

                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                </View>
            </View>
        );
    }
};

Image 36.png

縦に２列並びました。VRなのでどうせならぐるぐる回転しながら全画面を見たいので、横に並べてみたいと思います。横に並べるにはCSSの方を少しいじります。

index.js
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,
    },
});
flexDirectionを指定して見ましょう。
const styles = StyleSheet.create({
    panel: {
        // Fill the entire surface
        width: 1000,
        height: 600,
        backgroundColor: 'rgba(255, 255, 255, 0.4)',
        justifyContent: 'center',
        alignItems: 'center',
flexDirection: "row",
    },
    greetingBox: {
        padding: 20,
        backgroundColor: '#000000',
        borderColor: '#639dda',
        borderWidth: 2,
    },
    greeting: {
        fontSize: 30,
    },
});

Image 37.png

横並びになりました。

タップできるようにする。
タップできるようにするにはVrButtonのコンポーネント新たにインポートします。

index.js
index.js
import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    VrButton
} from 'react-360';

importしたVrButtonはrender内で使用します。View コンポーネントと同じような機能を持っているようなので、詳細は２つのコンポーネントのドキュメントを御覧ください。

https://facebook.github.io/react-360/docs/vr-button.html
https://facebook.github.io/react-360/docs/view.html#props

SHOWボタンがされたらアイコンが表示されHIDEボタンがタップされたらアイコンを消すようにします。

VRの画面上にタッチできるイベントを追加する。

index.js
import React from 'react'
import { AppRegistry, StyleSheet, Text, View, VrButton, Image } from 'react-360'

export default class Hello360 extends React.Component {
  state = {
    imageUrl: ''
  }

  render() {
    return (
      <View style={styles.panel}>
        <VrButton
          style={styles.greetingBox}
          onClick={() =>
            this.setState({
              imageUrl: ''
            })
          }
        >
          <Text style={styles.greeting}>Hide</Text>
        </VrButton>
        <Image style={styles.image} source={{ uri: this.state.imageUrl }} />
        <VrButton
          style={styles.greetingBox}
          onClick={() =>
            this.setState({
              imageUrl:
                'https://pbs.twimg.com/profile_images/1037603664863449088/THB1myp8.jpg'
            })
          }
        >
          <Text style={styles.greeting}>Show</Text>
        </VrButton>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1200,
    height: 600,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2
  },
  greeting: {
    fontSize: 30
  },
  image: {
    padding: 100,
    width: 300,
    height: 300
  }
})

AppRegistry.registerComponent('Hello360', () => Hello360)

変更点

  • state
  • onClickの動作
  • Imageコンポーネント

現在の画像のURLを保持しているStateの定義

index.js
state = {
    imageUrl: ''
  }

クリック時の動作

VrButtonコンポーネントではボタンがタッチされたときに起こる挙動を書きます。

index.js
<VrButton
          style={styles.greetingBox}
          onClick={() =>
            this.setState({
              imageUrl:
                'https://pbs.twimg.com/profile_images/1037603664863449088/THB1myp8.jpg'
            })
          }
        >
          <Text style={styles.greeting}>Show</Text>
</VrButton>

Imageコンポーネント

Imageコンポーネントを利用するためにまずImageコンポーネントをインポートします。

index.js
import { AppRegistry, StyleSheet, Text, View, VrButton, Image } from 'react-360'

利用方利用方法はドキュメントにある通りの使い方をします。 this.state.imageUrlには先程指定した値が入ります

index.js
<Image style={styles.image} source={{ uri: this.state.imageUrl }} />

完成

Routput5.gif

早速動かしてみるといい感じに動きました。取り敢えずここまでReact 360に触れて見たでした。

Twitter https://twitter.com/mxcn3
GitHub https://github.com/yushimatenjin
必要とあればこちらのアカウントに上げたいと思います。

追記

デプロイまでを行うQiitaを書きました。

React 360で作ったウェブページを今流行りのNetlifyを使ってサクッとデプロイをする

https://qiita.com/yushimatenjin/items/870c2b8c965489884571

Edit request
7
  • index.js
  • client.js
  • React 360が提供しているコンポーネント
  • SHOWボタンがされたらアイコンが表示されHIDEボタンがタップされたらアイコンを消すようにします。
  • VRの画面上にタッチできるイベントを追加する。
  • 現在の画像のURLを保持しているStateの定義
  • クリック時の動作
  • Imageコンポーネント
  • 完成
  • 追記
    • Sign in to continue the action.
    Sign in with EmailSign in with TwitterSign in with GitHubSign in with Google
    or