React360の紹介
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に表示されます。
マウスの左ボタンを押したままにすると、画面をパンできます。 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_vr
Reactコンポーネントに設定しています。これが文字列名でどのように参照されているかに注意してください。
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
が増加します。
製造
React 360プロジェクトの本番ビルドを生成するには、ターミナルで次を実行します。
$ npm run bundle
これで、./build
で新しくビルドした本番ファイルにアクセスできるようになります。