React360の紹介

投稿日: 2022-04-20 2022-04-20
タグ: React

React 360 （またはReact VR）は、Reactでバーチャルリアリティ体験を作成するために使用されるライブラリであり、レンダリングにThree.jsを使用します。これはReactプロジェクトであるため、APIはすでにReactを知っている人にはおなじみのはずです。

React 360の使用法は、React Nativeの使用法と似ています。これは、カスタムコンポーネントを使用するライブラリであり、私たちが知っているようにDOMとインターフェイスしません。

React360CLIのインストール

まず、マシンにNode.jsがインストールされていることを確認します。次に、npmからReact360CLIをダウンロードする必要があります。

$ npm install -g react-360-cli

これで、react-360をマシン上でグローバルに使用できるようになります。

新しいプロジェクトを作成する

CLIを使用して、initコマンドで新しいプロジェクトを作成できます。

$ react-360 init hello-vr

$ cd hello-vr

$ code .

$ npm run start

これにより、hello-vrという名前の新しいディレクトリが作成され、ここに新しいプロジェクトの足場が作成されます。このディレクトリ内でnpm run startを実行すると、Metroバンドラーが起動し、アプリケーションが http：// localhost：8081 /index.htmlに表示されます。

Screenshot: our starting app

マウスの左ボタンを押したままにすると、画面をパンできます。 React 360（名前で参照）は、180〜360度の正距円筒図法の写真/ビデオで動作するように構築されており、このパワーは最初のプロジェクトで確認できます。

また、使用できるさまざまな組み込みUIコンポーネントが付属しています。これらの例は、 View 、 Image 、 Entity 、およびVrButtonです。

例

client.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(
      'hello_vr',
      {
        /* initial props */
      }
    ),
    r360.getDefaultSurface()
  );

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

window.React360 = { init };

r360.createRootのルートをindex.jsにあるhello_vrReactコンポーネントに設定しています。これが文字列名でどのように参照されているかに注意してください。

VrButtonコンポーネントを使用して、環境と対話できます。

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

export default class hello_vr extends React.Component {
  state = {
    counter : 0
  };

  _incrementCounter = () => {
    this.setState({
      counter : (this.state.counter += 1)
    });
  };

  render () {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <VrButton onClick={this._incrementCounter}>
            <Text style={styles.greeting}>You've clicked me {this.state.counter} times.</Text>
          </VrButton>
        </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('hello_vr', () => hello_vr);

ボタンをクリックするたびに、counterが増加します。

Screenshot: counter increased

製造

React 360プロジェクトの本番ビルドを生成するには、ターミナルで次を実行します。

$ npm run bundle

これで、./buildで新しくビルドした本番ファイルにアクセスできるようになります。

getdocs

13036