React360の紹介
React 360 (またはReact VR)は、Reactでバーチャルリアリティ体験を作成するために使用されるライブラリであり、レンダリングにThree.jsを使用します。 これはReactプロジェクトであるため、APIはすでにReactを知っている人にはおなじみのはずです。
React 360の使用法は、React Nativeの使用法と似ています。これは、カスタムコンポーネントを使用するライブラリであり、私たちが知っているようにDOMとインターフェイスしません。
React360CLIのインストール
まず、マシンにNode.jsがインストールされていることを確認します。 次に、React360CLIをからダウンロードする必要があります npm
:
$ 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
に hello_vr
にあるReactコンポーネント index.js
、これが文字列名によってどのように参照されているかに注意してください。
を使用して環境と対話することができます 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
.