Thursday, 7 March, 2019 UTC
Summary
React 360 (or React VR) is a library used to create virtual reality experiences with React and uses Three.js for rendering. As it is a React project, the API should be familiar to those that already know React.
Usage of React 360 is similar to that of React Native, it is a library that uses custom components and does not interface with the DOM as we know it.
🐊 Alligator.io recommends ⤵
Fullstack Advanced React & GraphQL by Wes Bosⓘ About this affiliate link
Firstly, ensure that you have Node.js installed on your machine. Next, we’ll need to download the React 360 CLI from
npm:$ npm install -g react-360-cli We’ll now be able to use
Create a new project react-360 globally on our machine.Using the CLI, we can create a new project with the
init command:$ react-360 init hello-vr $ cd hello-vr $ code . $ npm run start This’ll create a new directory named
hello-vr and scaffold a new project here. By running npm run start inside of this directory, we’re starting the Metro bundler and our application appears at http://localhost:8081/index.htmlYou can hold down the left mouse button to pan around the screen. React 360 (as referenced by the name) is built to work with 180-360 degree equirectangular photos/videos, and the power of this can be seen with the starting project.
It also comes with a variety of inbuilt UI components that we can use. Examples of these are: View, Image, Entity, and VrButton.
Example Let’s take a look at how this works by diving into
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 }; We’re setting the root with
r360.createRoot to the hello_vr React component found in index.js, note how this is referenced by string name.We can interact with the environment by using the
VrButton component: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); Each time that we click the button, our
counter is increased:To generate a production build for our React 360 project, run the following in your terminal:
$ npm run bundle You should then be able to access your newly build production files in
./build.