React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing applications that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React 360 aims to simplify the construction of cross-platform 360 experiences.
How Is React 360 Different From React VR?
In early 2017, Facebook and Oculus released a JavaScript library called React VR, which was designed for the creation of 3D and VR experiences in the web browser. At the same time, Oculus began using a native C++ version of the framework to build its own first-party apps.
Over time, the APIs of the two projects diverged as we addressed the different needs of the frameworks. To avoid confusion between the two systems, the open-source framework has been renamed React 360. This better reflects its use case: the creation of immersive 360 experiences that can be consumed across PC, Mobile, and VR devices.
If you previously used React VR, you should find React 360 to be very similar. We’ve simplified a lot of the more common workflows, such as placing 2D UI elements in 3D space, and optimized performance for these use cases.
We don’t need the Oculus or Google Cardboard to develop our VR apps. We only need a browser and a code editor to get our VR apps to work. How cool is that?
Getting Started
We’ve designed the React 360 developer experience to get your first project up and running in only a few minutes. Before installing the developer tools, you’ll need to make sure that you have two prerequisites installed:
- Node.js version 6.0.0 or higher
- yarn or npm (>= v3.0.0) package managers
Next, install the React 360 CLI – a command-line tool that generates the basic layout of new projects.
npm install -g react-360-cli
Or
yarn global add react-360-cli
You’ll only need to install this CLI once. It will alert you when it’s out of date, and provide instructions on how to update it.
Once installed, the CLI can be used to create a new project by running
react-360 init PROJECT_NAME
where PROJECT_NAME is the name of your new application. Once it’s been created and the dependencies are installed, change your working directory to PROJECT_NAME, and start the application server by running npm start (or yarn start). You can also use –https option to run the server with https.
When the server has booted, you can access your application by navigating to http://localhost:8081/ in your web browser. Your application’s code can be found in index.js, and you can learn more about available framework features by diving into our documentation.
React 360 Project Structure
index.js
Where all of your React code lives. This is the code that makes your application 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, loading your React code and attaching 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. This is intentional. Most functionality is left out of HTML, so that you can easily integrate your React 360 application into server-render pages or existing web apps.
Creating a Counter
For the short and sweet demo, let’s create a counter. The React 360 library uses similar concepts as React Native.
First, we need to import the View, Text, and VrButton elements from the react-360 library.
Second, let’s declare our initial state and create the decrement and increment functions.
Pretty standard stuff. Next up, we’re going to use the React 360 elements we imported earlier.
Once we have the markup, we should be able to interact with our 360 counter.
React 360 VR example
That’s it for our super-simple introduction to the React 360 library. I encourage you to take a deeper dive and explore all the possibilities to build VR apps.
Github Link:- https://github.com/kamakshi-successive/react360-counter
