As a technology executive, you probably know about virtual reality and its various applications. Video games, web and mobile apps can all benefit from VR’s amazing capabilities.

If your next development goal is to build VR apps, and you’re familiar with the React ecosystem, you’re in luck. You can now develop amazing VR experiences using React 360 and JavaScript.

In this tutorial, we will show you how to develop a simple and interactive React VIRTUAL reality application using React 360. By the end, you should be ready to build your first VR app in React.

We will cover the following.

  • What is React 360?
  • Install the React 360
  • Adding background Assets
  • VR interaction
  • Add immersive sounds
  • Run your React VR app

What is React 360?

React 360 is a library that makes use of a number of React Native features to create virtual reality applications that run in a web browser. It is rendered using three.js and appears as an NPM package. React 360 helps simplify the process of creating cross-platform VR experiences by combining modern apis like WebGL and WebVR with the declarative capabilities of React.

Learning how to use React 360 is a great way to jump-start your VR development career. In this tutorial, we’ll cover all the basics to help you get started with React 360.

Install the React 360

First, you need to install the React 360 CLI. This will give you access to all the necessary commands to assist you in developing a virtual reality application.

Now go to the desired folder from the command terminal and run the following command.

npm install -g react-360-cli
Copy the code

This is a one-time installation, so you don’t have to do this every time. The advantage of being in the project folder is that it makes the following steps easier.

Once installed, create a new project called my-Project (creative, right?). , and then enter.

react-360 init my-project
Copy the code

You’ve successfully created your first virtual reality app with React 360.

To view the application in a browser, navigate to the my-Project folder through the terminal, and then run NPM start. This will lead you to the destination in the browser. Or, you can access the output by the following way [http://localhost:8081/index.html] (http://localhost:8081/index.html).

Here’s what the application should look like.

React 360 template screen

Now that you have the application up and running, let’s talk about the code in detail. The two important files we will work with are client.js and index.js. The index.js file consists of four parts.

  • class
  • The input
  • style
  • Component registry

We’ll import React to use its class functionality. We’ll gather some parts from React 360 to build a VR environment.

import React from 'react'; import { AppRegistry, StyleSheet, Text, View, } from 'react-360'; export default class my_project extends React.Component { render() { return ( Welcome to React 360 ); }}; const styles = StyleSheet.create({ panel: { 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('my_project', () => my_project);Copy the code

The syntax and components of the class are quite similar to React and React Native, respectively. The View component allows you to render aspects of the VR world and, if you wish, play with the look and feel. The Style attribute and StyleSheet will help you do this. There are many similarities with React Native and CSS functionality.

When it comes to the Text component, you can create dynamic Text that displays various data for the user. Finally, the class needs to be registered with the client for rendering.

You’ll notice that the init function in the client.js file creates a new instance of your project, and then assigns a render method to the project using the classes in the index.js file. After that, the project environment is applied to the panorama and init function is executed.

import {ReactInstance} from 'react-360-web'; function init(bundle, parent, options = {}) { const r360 = new ReactInstance(bundle, parent, { fullScreen: true, ... options, }); r360.renderToSurface( r360.createRoot('my_project', { }), r360.getDefaultSurface() ); r360.compositor.setBackground(r360.getAssetURL('simmes-start-screen.jpg')); } window.React360 = {init};Copy the code

These are the basics of React 360, and you’re ready for your first VR app development. Now that you know how the React VR app is made, let’s go through some steps to customize it.

Adding background Assets

You can use React 360 to apply any panoramic image to a VR background. In this tutorial, we use a free image of Simmes; You can use any image you like.

To use the panoramic image as the background, add the required image to the static_assets folder. This folder contains all static assets like images, music, and models, and React 360 will search for them here.

Use the following command to update the background.

r360.compositor.setBackground(r360.getAssetURL('simmes-start-screen.jpg'));
Copy the code

VR interaction

One of the most important and engaging aspects of any application is interaction. Without interaction, an application has no life. You can add this important feature to your React VR app by adding the VrButton component to the index.js file import, as shown below.

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

Copy the code

Next, add a counter to count clicks. First set the number of clicks to zero.

state = {
  count: 0
};
Copy the code

The next step is to write an incremental function.

_incrementCount = () => {
  this.setState({
    count: this.state.count + 1
  })
}
Copy the code

Finally, we will render VrButton like this.

<View style={styles.panel}>
        <VrButton
          onClick={this._incrementCount}
          style={styles.greetingBox}>
          <Text style={styles.greeting}>
            {`You have visited Simmes ${this.state.count} times`}
          </Text>
        </VrButton>
</View>
Copy the code

You have successfully set this button and now you can see the number of people visiting your VR world.

Add immersive sounds

Not all applications you create need sound. However, when it comes to games, video, and other immersive experiences, sound is essential.

To add sound to our VR app, we needed a few more things from React 360.

import {
  asset,
  AppRegistry,
  NativeModules,
  StyleSheet,
  Text,
  View,
  VrButton
} from 'react-360';
Copy the code

The next step is to import the AudioModule from NativeModules and set a new const.

const { AudioModule } = NativeModules;
Copy the code

Once the new const is set, we can add specific functionality to the way the sound is played. For example, we could make it start playing when the button is clicked and stop when the button is clicked again.

To do this, we will add a Boolean value to the state.

state = {
  count: 0,
  playSound: false
};
Copy the code

Finally, we’ll write a function to manage how the sound is played.

_playSound = () => { this.setState({ playSound: ! this.state.playSound }); If (this.state.playsound) {AudioModule. CreateAudio ('sza', {source: asset('brokenclocks. Mp3 '), volume: 0.5}); AudioModule.play('sza'); } else { AudioModule.stop('sza'); }}Copy the code

Once executed, this function upgrades the playSound state, which is set to false. How the sound is played will depend on the value assigned to playSound. In order for it to play, you must create an audio instance through the createAudio component.

Once created, you can play audio by the name specified. This only happens when playSound is set to true. When it is false, the sound stops playing. That’s why every time playSound is True, we make a new instance.

We will now create a button to start and stop playing the sound. Here’s what the code looks like.

<View style={styles.panel}>
 <VrButton
    onClick={this._incrementCount}
    style={styles.greetingBox}>
    <Text style={styles.greeting}>
     {`You have visited Simmes ${this.state.count} times`}
  </Text>
 </VrButton>
 <VrButton
   onClick={this._playSound}
   style={styles.greetingBox}>
   <Text style={styles.greeting}>
     {'You can play the music of your people'}
   </Text>
  </VrButton>
</View>
Copy the code

Your VR app is now complete! Let’s run the application and see how it looks.

Run your React VR app

You can view the application with the run NPM start command. Your first React VR app, called “My Project,” should contain a background of your choice and two buttons. One button controls the audio, and the other keeps track of the number of users accessing the application.

You can now invite your friends and family to play with your new VR app and brainstorm with other programmers to come up with new ideas for the app. The possibilities are endless.

I hope this tutorial helps you understand React 360 better.

Tell us about your experience with React 360. What do you think is the best way to create VR apps? We’d like to hear your opinion.

The postBuilding a VR app with React 360appeared first onLogRocket Blog.