Build 360 and VR Website with React 360

In this post, we'll explore React 360 — a framework for building immersive 3D and VR experiences right in the browser. We'll set up a basic React 360 project from scratch and walk through the key files that make it all work.

#What is React 360?

React 360 is a framework that lets you create 3D and VR user interfaces. It's built on top of the React framework and is optimised for the creation of user interfaces that power rich multimedia experiences.

Let's understand its usage with a small React 360 app.

#Building a Basic React 360 App

#Prerequisite

Before getting started, you'll need to have Node.js installed in your system. While React 360 runs in your web browser, the build pipeline that bundles up your code relies on Node.

#Getting Started

Install the React 360 CLI tool that will be used to create and manage React 360 apps:

npm install -g react-360-cli

Now you have React 360 CLI installed. Let's create an app called "my360app":

react-360 init my360app

When you build React 360 applications, you have a number of source code and library files that need to be bundled into a single file for a web browser to load. Metro is the JS bundler used by projects like React 360 and React Native, and is designed to meet their needs.

Go to the project directory and start the app:

cd my360app
npm start

After starting the app, go to http://localhost:8081/index.html. It will take some time to bundle the files, after which you'll see the default React 360 template screen.

Now you have the default template of React 360. When you open the directory, you'll see that a few files have already been created. Let's explore what each file does, and how it fits into the whole.

#Exploring the Code

#index.js

This is the main code of your application — it is where all of your React code lives. 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 organise 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:

1. Creates a new instance of React 360
2. Loads your React code and attaches it to a specific place in the DOM
3. Provides a place to pass initialization options (discussed in the official docs)

#index.html

This is the web page you load when viewing your application. All it does is provide a mount point for your JavaScript code. Most functionality is left out of HTML, so that you can easily integrate your React 360 application into server-rendered pages or existing web apps.

That's it for our super-simple introduction to the React 360 library. Explore the code and build awesome 360 VR experiences!