Build the UI of the Future with React 360

Share

Virtual Reality

Creating Compelling User Experiences with React 360

From the image used, it must be obvious that this blog is about or has something to do with Virtual Reality (VR). And why we chose the title as “Build UI of the Future” is mainly because, more and more users are contemplating to try out VR devices for games and entertainment in today’s world. But with devices like Oculus Quest, people can use VR devices to browse the web as well.

This opens a whole new world of possibilities for the web. But as of now, there are only a few websites which seem to cater to the WebVR users with 3D content. The rest of web is the simple and conventional 2D websites. We are about to see an increase in websites which have a VR view in the near future. So with this in mind, it’s high time that we utilize this opportunity to start creating UI/UX for the world of Virtual Reality.

What is React 360?

“React 360 is a framework for the creation of 3D and VR user interfaces built on top of React.”

It’s mostly similar to React or React Native and at the same time it has some major differences as one would expect, mainly because we are not creating a regular website here rather providing a VR experience.

For a person with some basic knowledge of React or React Native, it’s easier to understand the workflow of React 360 by learning the importance of these three files.

  • index.js: This is the main code of your application where you will find all of your React code. This is the code that makes your application unique, and determines how it looks. Any code imported by index.js will also become a part of your app, allowing you to organize your app into many different files.
  • client.js: This is the code that connects your browser to your React application — the Runtime. This file does three things. First, it creates a new instance of React 360, then loads your React code and attaches it to a specific place in the DOM. This is also where your application can pass a variety of initialization options.
  • index.html: This is the web page you load when viewing your application. All it does is provide a point to mount your JavaScript code.

React 360

The major difference between React 360 and React projects is the clear distinction between the React code and Runtime — (the code that turns your React components into 3D elements on the screen). This separation between the React code and Runtime is intentional as web browsers are single-threaded, and any blocking behavior in the app could cause rendering to stall, resulting in a bad user experience.

React 360 Use Case – Building a VR World of Pokemon

Now that we have a fundamental understanding of React 360, we will walk you through a real world use case on building a VR world of Pokemon using React 360. Here’s a sneak peek into the final product:

Pokemon VR

You can view the final product hosted in the below given URL’s.

Supported Devices

  • Desktop web browsers (Chrome, Firefox etc.)
  • Mobile web browsers
  • VR Devices
  • Google Cardboard (React 360 does not directly, provide support for google cardboard, but we can provide it using various other methods which are to be discussed at a later stage)

Pre-Requisites

You should have basic knowledge of the following:

  • React.js or React Native
  • Javascript
  • CSS (Cascading Style Sheets)
  • NPM (Node Package Manager)

Installation required in your system:

  • Node.js

Getting Started

npx react-360-cli init pokemon-vr
cd pokemon-vr

If the above statement doesn’t work, you might have an older version of NPM. In that case, run the below block of code in your terminal.

npm install -g react-360-cli
react-360 init pokemon-vr
cd pokemon-vr

With this, you can set up a basic template of React-360 in your machine. You can view the project in your local machine by executing the below code block.

npm start

Known Bug with Metro Bundler

Windows users might encounter an error in the terminal, while running NPM start. It’s due to an issue in the regex configured in one of the dependency files for the metro bundler, which is used to bundle the code and related dependencies of our React 360 project. To solve the issue, one needs to follow the below mentioned path.

Pokemon React 360

And replace the variable declaration named sharedBlacklist with the below code block.

React 360 Code

Finally, if you open the browser with the URL mentioned in the terminal (http://localhost:8081/index.html) you can see a welcome screen similar to the below image.

React 360 App

This is the default landing page for a basic React 360 application. If you are viewing this from your desktop browser you can use the mouse to click and move around, to see the full 360 view. And if you are viewing this from your mobile, then by holding the phone you can physically move around to see the 360 view.

Click here to know more about how to build UI of the Future with React 360 and get step-by-step knowledge of the detailed process.

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 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
Software Engineer, RapidValue

Please Share Your Thoughts & Comments Below.

How can we help you?