Exploring React 360 VR Library
React 360 is a framework for the creation of 3D and VR user interfaces
React 360 is a library built on top of React. It is designed to simplify the creation of complex UI. React 360 allows you to use familiar tools and concepts to create immersive 360 content on the web.
How Is React 360 Different From React VR?
If you’re unsure what VR is, check out this book to get up to speed: What Virtual Reality Is, How It Works, and What It Can Do. Find the Kindle version of the book here.
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. See full comparison here.
You’ll need to install Node.js. While React 360 runs in your web browser, the build pipeline that bundles up your code relies on Node.
- Mac: On Mac, we recommend installing Node.js through Homebrew.
- Windows: Get the Windows installer from the nodejs.org download page.
- Linux: Go to the nodejs.org package manager page to find specific instructions for your Linux distribution.
Next, we’re going to need the React 360 command line tool. This CLI tool lets you create and manage your React 360 projects.
npm install -g react-360-cli
Once we have the CLI, we can initialize our project.
react-360 init hello-react-360
You can start your project now by running
If we open the browser at
http://localhost:8081/index.html, we should be able to see the welcome message.
React 360 Project Structure
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.
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.
Creating a Counter
For the short and sweet demo, let’s create a counter. The React 360 library uses similar concepts as React Native. If you’re interested in React Native concepts, check out this tutorial.
First, we need to import the
VrButton elements from the react-360 library.
Second, let’s declare our initial
state and create the
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.
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.
Where to Go From Here
I highly recommend reading through the official React 360 documentation for an in-depth dive.
React 360 · Create amazing 360 experiences
Create amazing 360 experiences
Create amazing 360 experiencesfacebook.github.io
WebVR provides support for exposing virtual reality devices - for example head-mounted displays like the Oculus Rift or…
VR Applications using React 360
If you've used React, you know how it can provide smart solutions to complex problems. And how exciting that can be…
Introduction to React 360
React 360 (or React VR) is a library used to create virtual reality experiences with React and uses Three.js for…
Thanks for reading! ❤