React VR 触ってみた！

こんにちは。メゾンマークでフロントエンドを担当している、k-taroです。

現在Reactを勉強しており、React VRが気になっていたのでこの機会に少しだけ触ってみることにしました。
今回はReact VRを導入して、ナビゲーションメニューを作るところまでやってみます。

環境導入

公式ドキュメントの手順通りやれば簡単に導入できました！
手順は以下です。

1.　CLI toolをインストール

npm install -g react-vr-cli

2.　React VRのテンプレートを生成

react-vr init react-vr-test

3.　ビルド実行

npm start

上記の手順で、http://localhost:8081/vr/
にアクセスすればデフォルトの画面が表示されます。

簡単にVR環境が構築できました！感激。。。

ちょっとアレンジしてみる

デフォルトのソースを少しアレンジしてみます。
webサイトっぽくなるように、ナビゲーションメニューを作ってみました！

完成品

まずは完成した画面から！ f:id:marctech:20170710162624p:plain f:id:marctech:20170710162648p:plain VR対応機器ではみていないので、ドラッグで画面を動かすことができます。

続いて、完成ソースがこちら！

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
  VrButton,
} from 'react-vr';

export default class react_vr extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('click!!');
  }

  render() {
    const nav = ['HOME', 'ABOUT', 'COMPANY', 'RECRUIT', 'CONTACT'];
    const styles = {
      container: {
        flexDirection: 'row',
        width: 5,
        justifyContent: 'center',
        alignItems: 'center',
        transform: [{translate: [-2.5, 1, -5]}],
      },
      item: {
        flex: 1,
        height: 0.3,
      },
      btn: {
        flex: 1,
        height: 0.3,
        backgroundColor: 'black',
      },
      txt: {
        fontSize: 0.2,
        textAlign: 'center',
        color: '#fff',
      }
    }
    return (
      <View>
        <Pano source={asset('8580462876_395de5128b_o.jpg')}/>
        <View style={styles.container}>
          { nav.map((item, i) =>
            <View key={i} style={styles.item}>
              <VrButton
                style={styles.btn}
                onClick={this.handleClick}>
                <Text style={styles.txt}>{item}</Text>
              </VrButton>
            </View>
          )}
        </View>
      </View>
    );
  }
};

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

Reactを使っている方には見慣れたソースかと思いますが、React VR特有のコンポーネントもありますね。

ちょこっと解説

それでは少しだけみていきます。
まずは背景画像を変えてみましょう！

Flickrからかっこいいパノラマ写真をダウンロードし、static_assetsフォルダに格納します。
引用：photo by See-ming Lee

<Pano source={asset('ファイル名')}/>

背景が変わりましたね！

次にナビゲーションメニューを作ります。
ナビゲーション内のボタンはクリック可能にしたいので、React VRのコンポーネントのVrButtonを使いました。

<View style={styles.container}>
  { nav.map((item, i) =>
    <View key={i} style={styles.item}>
      <VrButton
        style={styles.btn}
        onClick={this.handleClick}>
        <Text style={styles.txt}>{item}</Text>
      </VrButton>
    </View>
   )}
</View>