React 360 is a library for the creation of 3D and VR UI . This article gives detailed steps to build the UI of the future with React 360.

1. [Type the document title] [Year]
Build UI of the Future with React 360

2. Build UI of the Future with React 360
© RapidValue Solutions 2
Detailed Steps to Build the UI of the Future with React 360
Project – Poke World
Now that we have understood the basics, we can go on to creating the actual project as mentioned in
the beginning.

3. Build UI of the Future with React 360
© RapidValue Solutions 3
Action Plan
The environment that we plan to create is built on top of the 360 Photo backgrounds, which was
shipped along with the React 360 template. Other than that, we require 3D models of the following
items.
 Pokemon
 Pokeball
 Stadium
These 3D models can be imported from any websites which help us download free models. In our
example, we have used the free low poly models that were provided by poly.google.com. We can
also, use the 3D models created in 3D software's like Maya as well.
There are two types of file formats supported by React 360 platform (GLTF2 and OBJ model). Fpr
this project, we will be using the OBJ model.
Other than the 3D models, we have a welcome screen which shows the title image of the Pokemon.
(You can refer to this demo). The welcome screen has a background image attached to a cylindrical
surface which is among one of the pre-built components provided by React 360. We also play a
background audio of Pokemon theme song and sounds of individual Pokemon.
All of these external assets are stored in a folder called static_assets, which is present at the root
level of our folder, created by default. Any asset in this folder can be referred to in our code files or
components imported inside index.js, using the below statement.
asset('item-name.ext')
Creating Components
Let’s discuss how the various components are built. We will be using a total of five components
together as per the requirement. First of all, we will create a folder called Components in the root
directory. All the components will be created inside this folder, which will contribute towards a better
structure of our application.

4. Build UI of the Future with React 360
© RapidValue Solutions 4
Screen Component
This is the most basic component that is used in our project. It only displays a static text in a
transparent screen in the background of our poke-world. You can rotate the scene to view this in the
background here.
You can find the code in the repo URL.
We have used a number of pre-built components provided by React 360 like Stylesheet, Views, Text.
These are the components which are built to support the 3D environment:
 Stylesheet is used to create styles and inject it into our components. It follows jss like syntax.
 Views are used to create either group content, or provide visual boxes on the screen. You can
use them to provide layout without actually rendering anything, or they can be used to create
the kinds of border and background effects.
 Text is for adding characters to the screen. If you’re creating a 2D UI, this is a critical element
for surfacing information to the user, labeling UI elements, and more. Now that we have
created a component for screen, it needs to bind to a surface.
 Surfaces allow you to add 2D interfaces in 3D space, letting you work in pixels instead of
physical dimensions. Currently, there are two different shapes of Surfaces: Cylinder and Flat.
We will be using a flat surface for the screen component. Since a flat surface can be positioned
anywhere within the environment, unlike a cylinder component which will always appear at the front of
the user, no matter where you turn.

5. Build UI of the Future with React 360
© RapidValue Solutions 5
To attach a React component to a Surface, it must be registered with the AppRegistry.
In index.js file you can see a block of code like below, where we are registering the component with
the AppRegistry. This step needs to be repeated for all the components that we are creating in our
project.
import React from 'react';
import { AppRegistry } from 'react-360';
import Screen from './components/Screen';
AppRegistry.registerComponent('Screen', () =>
Screen);
index.js
For creating a surface in our client.js file, use the below code in the init function.
const screenSurface = new Surface(800, 400,
Surface.SurfaceShape.Flat);
screenSurface.setAngle(-3.3 /* yaw angle */, 0 /* pitch
angle */);
// Render your app content to the default cylinder
surfacer360.renderToSurface(r360.createRoot('Screen'),
screenSurface);
client.js inside init function
The name used here in createRoot should be the same as the one we register the component with in
AppRegistry. Now, that we have completed the steps for a basic component, save and reload the
page and you can see the screen component with the message at the rendered position.
Store (Utility)
Since our previous screen component was a static component which rendered a surface, we didn’t
require any communication with other components. But all of our other components need to
communicate with each other. The initial props to each component can be passed from
our client.js file. Any other communication needs to be handled through a global store like redux,
same as the one that we use in react.
Since this is for a demo purpose, we will be creating a store on our own.
You can find the code in the repo URL.
connect function is a higher order component similar to the one in React.js which accepts another
component as argument and returns the provided component with binding required data. We will be

6. Build UI of the Future with React 360
© RapidValue Solutions 6
using this method from store to connect our components to the global store, which will help them to
communicate with each other.
Loading Screen Component
The purpose of our loading screen component is to show a loading message and the title of our
theme. The title is an image attached to a cylindrical surface that we mentioned in the screen
component.
You can find the code in the repo URL.
The main difference we can see in this component is the use of Animation, Image and connecting to
a store.
Animated library is designed to make animations fluid, powerful and easy to build and
maintain. Animated library makes it possible to toggle the size, position, and appearance of elements
in your scene in a declarative style that fits into React. It was originally designed for React Native and
you can read further about its supported methods from the React Native documentation.
Image A React component for displaying 2D images on a surface. Image sources can be externally-
hosted resources, or referenced from your static_assets directory and hosted alongside your app.
Here, instead of exporting the default component we are using the component returned from our
connect method in store, which we discussed in the above section. And we are referring to the
additional props provided by the connect method ( PokeDesk.ShowPokeballs) to toggle the
component’s presence in our environment.

7. Build UI of the Future with React 360
© RapidValue Solutions 7
World Component
The purpose of the world component is to load the 3D model for the stadium which we are
considering as one of the 3D prop in our scene. The world component will have an environmental
audio which is the theme music of Pokemon being played in the background.
You can find the code below or in the repo URL.
The new items that are being introduced in this component are AudioModule and Entity.
 AudioModule - React 360 gives you a number of ways to play audio, including background
environmental audio, one-off sound effects, and spatialized audio. All audio playbacks are
controlled through the AudioModule provided by the Native Module.
 Entity allows you to render 3D objects, as described in the 3D Object documentation. At the
moment, React 360 supports Wavefront OBJ files and GLTF files. The external resource (or
resources) containing the model’s information are provided using a source attribute, which is
an object of key-value pairs mapping resource types to their locations.
The following properties are currently supported:
obj - Location of an OBJ-formatted model
mtl - Location of a MTL-formatted material (the companion of OBJ)
gltf2 - Location of a standalone GLTF2 model

8. Build UI of the Future with React 360
© RapidValue Solutions 8
In the style attribute using transform, we can provide the values for the x, y, z axis for positioning of
the object and we are providing the scale value as well.
Poke-ball Component
The Poke-ball component has a click event and it toggles its design on each click. It also plays a
different sound when opened and closed using the audio module’s playOneShot method.
You can find the code in the repo URL.
The new items that we got introduced to in this are the Interpolate, VrButton and the Props used.
 Interpolate is an operation applied on an animated value to transform it from the input value to
a corresponding output value.
 VrButton is a utility class that detects click-type actions across a variety of input devices. By
default, a VrButton has no appearance and will only act as a wrapper to capture events, but it
can be styled in the same way as a View.
 Props are being passed from the store as well as from the client.js file where we bind the
component to runtime.
r360.renderToLocation(
r360.createRoot('PokeBall1', {
position: {
x: -1,
y: 0,
z: -2
},
open: { angle: 125 },
close: { angle: 240 },
pokemon: 'Pikachu'
}),
r360.getDefaultLocation()
);
A snippet from client.js file

9. Build UI of the Future with React 360
© RapidValue Solutions 9
Here, we can see that instead of renderToSurface method that was used in the case of 2D surfaces
we created before, we are using renderToLocation method since the 3D models can only be bound
to a location with co-ordinates rather than a 2D surface. We are using
the getDefaultLocation method to fetch the default location. We can also create custom locations if
we want to, based on the demand. The props, like position, are being passed to the component
which they are being referred from within the component.
Pokemon Component
The Pokemon component is responsible for toggling the display of Pokemon which is passed as a
prop set in our global store, when we click on the corresponding poke-ball. It also plays the sounds of
individual Pokemon when it is summoned or clicked upon.
You can find the code in the repo URL.
Here, we can see the assets are dynamically loaded, based on the prop name, passed from the
component binding to runtime. This ensures the re-usability of the same Pokemon component for
loading a different Pokemon.
We are now done with creating different components and all that is left is to register them with
AppRegistry in index.js, as mentioned in the first screen component and also, binding each
component to the runtime in client.js file.
You can see the demo and completed code base in the below listed URL’s:
 Demo-URL
 Git hub-code-base-URL
Google Cardboard Support
There is no direct support provided by React 360 for Google Cardboard devices but we can provide
the support using WebVR or WebXR polyfills. As there seems to be an issue with the current version

10. Build UI of the Future with React 360
© RapidValue Solutions 10
of React 360 and the polyfills, we can’t use that now. Hence, we are limited to the web browser view
or VR Devices like Oculus. We hope that this issue gets resolved soon by the React 360 team.
The Final Steps
Now that we have created our application, these are the final steps that are remaining:
 Build
We can generate a production build by executing the below command in terminal.
npm run bundle
After running build, we need to move the static_assets folder into the build directory as this is not
automatically taken care of, since assets can be hosted externally as well. To avoid repetition of
moving the assets folder into the build directory, we are using a plugin called ncp which is a package
provided by npm. We are using that in the script section of our package.json file like shown below:
{
"scripts": {
"start": "node node_modules/react-
360/scripts/packager.js",
"bundle": "node node_modules/react-360/scripts/bundle.js",
"move-assets": "ncp static_assets build/static_assets",
"predeploy": "npm run bundle && npm run move-assets",
"deploy": "gh-pages -d build"
}
}
 Deploy
Since in this project we are using github pages for hosting our website, we need to configure the
github pages plugin in our project (refer online) and execute the below statement in the terminal.
npm run deploy
Conclusion
React 360 can be a good entry level tool for developers who want to build for the users of VR. But in
comparison with Aframe, which is a framework for building VR worlds using declarative HTML-like

11. Build UI of the Future with React 360
© RapidValue Solutions 11
components, one might feel React 360 is not at par with Aframe. This is addressed by the React 360
team itself.
We believe that React 360 serves a different use case optimized around applications that rely on user
interfaces, or are event-driven in nature.
By,
Arun Anto, Senior Software Engineer, RapidValue

12. Build UI of the Future with React 360
© RapidValue Solutions 12
About RapidValue
RapidValue is a global leader in digital product engineering solutions including mobility, omni-channel, IoT, AI, RPA and
cloud to enterprises worldwide. RapidValue offers its digital services to the world’s top brands, Fortune 1000 companies and
innovative emerging start-ups. With offices in the United States, the United Kingdom, Germany and India and
operations spread across the Middle-East, Europe and Canada, RapidValue delivers enterprise services and
solutions across various industry verticals.
www.rapidvaluesolutions.com www.rapidvaluesolutions.com/blog
+1 877.643.1850 contactus@rapidvaluesolutions.com
Disclaimer:
This document contains information that is confidential and proprietary to RapidValue Solutions Inc. No part of it may be used, circulated, quoted, or
Reproduced for distribution outside RapidValue. If you are not the intended recipient of this report, you are hereby notified that the use, circulation,
quoting, or reproducing of this report is strictly prohibited and may be unlawful.