The 6 coolest React VR projects

It’s quite clear that virtual reality is where the world is headed. Art galleries, auctions, real estate and automobile sales are going the way of virtual reality. Even sight seeing trips are not going to be left behind as you can now tour the world through your VR headset. There’s so much to explore and yet so much to be done in the world of virtual reality, we’re just getting started!

What is React VR?

React VR is a JavaScript framework developed by Oculus, a division of Facebook with the aim of creating web based virtual reality apps. It can be considered to be a part of the larger React ecosystem.

Creating a React VR App

To start a React VR project we install the React VR CLI tool using npm:

bash
1npm install -g react-vr-cli
Copy

After installation, we create a new React VR app. Let’s call our directory newap``p:

bash
1react-vr init newapp
Copy

After that we then change our directory to our newly created app

bash
1cd newapp
Copy

we finally test if it works with a local server

bash
1npm start
Copy

To initialize the application in our local browser, open the URL http://localhost:8081/vr. You should see an animated VR environment like the one below:

With this brief introduction, you can build your own web based virtual reality app with React VR. To get the full experience of what you’ll be doing you’ll need a virtual machine. You can test locally in your browser too, but to make use of Oculus Rift and get the VR experience, you will need the virtual machine. You also need the latest version of Node.js and a browser that supports the WebVR API, such as FireFox Nightly. You can also check out this cool article to get you started. You’ll need to install the Carmel Developer Preview browser to explore your React VR app via your headset if you’ve got an Android device and a Gear VR headset. You can also explore on iOS; refer to this article to learn more.

Also, check our tutorial on how to build a realtime experience with React VR and Pusher.

React VR Coolness.

There’s been a lot of activity in the VR community lately. With Oculus Rift slowly closing the gap in VR market share, let’s take a look at React VR projects that have been creating significant impressions lately. Let’s now take a look at the six coolest React VR projects right now!

LiveTourLAB

Project Type: Open Source

LiveTourLab is a cool framework for creating Live VR tours. The LiveTourLab project is quite a contender in the GitHub VR community with over 600 stars. We did some digging and discovered they’ve got predefined components that enable navigation, preloading, blending photography and so much more. Every bit of interactivity is defined in a json text file and can be easily extended with custom code meaning we get to use the same static code build for different tours. This project offers tours that are interactive and deeply engaging. Tours can either be played on the web, a phone and most importantly a VR headset. Besides offering a hands-on experience and predefined components, here are some other features of the project:

• It’s 10 times more extensible than GUI authoring tools.
• It’s got ten times faster creation than game engine VR.
• It’s 100% standard camera compatible.
• It’s ten times more interactive than 360 videos.
• It’s 100% cross-platform including custom code.

LiveTourLabs is open source, contributions and ideas are welcome. You can work on the source code and come up with great, amazing stuff that you can push to GitHub afterwards. For a more animating experience of LiveTourLabs, you can check out this cool demo here.

WebVR Experiments

Project Type: Open Source

WebVR experiments is a collection of cool projects which were built by Nikolaus Graf using React VR. The most notable of these projects is a 3D forest. For the full experience, you have to use a VR headset, for example Gear VR or Oculus Rift. Graf has done some quite amazing work here by involving extensive 3D modeling as well as computer graphics. Animations and moving objects are yet to be included but he plans to do all of that as soon as possible. He has made his project open source, for a full overview of the code you can check it out here and contributions are also welcome. You can also check out the Graf’s 3D forest demo here. He also made a video guide on this demo in React Amsterdam.

CENTRO UI

Project Type: Open Source

Created by Hristo Georgiev, CentroUI is a set of reusable and extendable UI components and utilities for building interfaces for Web VR applications. It was developed with cross-device and cross-browser compatibility and features cards, lists, navigation items, grids and plug-and-play text input controls. Contributors from all levels, beginners included, are encouraged to make contributions to the Centro UI project. They’ve also got an interactive demo that’s sure to make you want to try out some stuff of your own. Check it out here.

Earth-Moon-VR

Project Type: Open Source

Esteban Herrera certainly felt a special kind of need to contribute to the VR community with his project, earth-moon-vr. Although not a true replica of the Earth-Moon system, earth-moon-vr was built with React VR and uses the concept of cubemapping (a method of environment mapping that uses the six faces of a cube as the map shape) to render 3D models of the Earth and the Moon. Herrera also wrote a cool article where he goes at length to explain the 3D modeling concepts as well as how this project was built from scratch. For a more detailed walk-through of earth-moon-vr as well as an overview of the interactive demo, you can check out Herrera’s article as well as the earth-moon-vr project on GitHub.

React VR Player

Project Type: Open Source

Created by Antoine Jaussoin, react-vr-player is a 360 degree video player extended as a React Component. It is adapted from the eleVR player, a web player for 360 degree video which was written with JavaScript and WebGL. react-vr-player works with native browser support from FireFox Nightly and Chromium. Videos shown in the player can be rotated using keyboard controls. Viewers can also use a VR headset such as Oculus Rift if they are running an experimental Web VR browser. react-vr-player has certain security restrictions thus only videos from the same domain will work. Due to WebGL restrictions, users can’t reference a video from another domain as the URL Other features of react-vr-player include:

• 360° Videos
• Play/Pause
• Manual rotation (using the keyboard)
• Seek
• Mute
• Fullscreen
• HMD device (tested on Oculus Rift DK2, and Homido)
• Local file loading

Antoine encourages contributions to his video player and has plans to make the features of react-vr-player correspond largely with that of eleVR. He also plans to add control helpers when the video is not started and add support for different video chapters. You can check out react-vr-player’s source code on GitHub and make contributions. You can also check out this cool demo of react-vr-player here.

React VR GraphQL

Project Type: Open Source

react-vr-graphql was created by Scaphold, a startup that offers GraphQL back-end as a service. It’s basically a starter kit to building VR applications with React Native and GraphQL. The project comes with a public GraphQL API hosted on Scaphold’s website. With react-vr-graphql, you can update messages on GraphiQL, an in-browser IDE for exploring GraphQL, and view these messages in real-time on your VR app. After creating your VR app, all you need to do is open GraphiQL and your VR app side-by-side in two browser windows and watch as messages you create on GraphiQL are automatically updated on your VR app. Because of the powers of GraphQL, you can start building blazing fast projects like VR games.

You can contribute to react-vr-graphql or get inspired and even use it to create something of your own by cloning the repo. Check it out here.

Conclusion

And there we are! Those are the six coolest React VR projects right now. Even if it’s just a few months old, React VR has definitely gotten the interest of the developer community. Lots of open projects are springing up encouraging innovation and collective collaboration. It can be said that, at the current pace React VR is going, the future of virtual reality has a lot in store for us indeed.

Are they any projects we forgot to include here? Kindly let us know in the comments. Cheers!