Join 6000+ Students Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code. Start Learning Now 150$ for all 3 courses (SAVE 70%)

What is ReactVR

ReactVR aims to help developers to create web-based VR experiences quickly. ReactVR uses JSX syntax. It is a special syntax that resembles HTML. It makes it easy to create components for virtual reality.

Behind the scenes of ReactVR

ReactVR is not a simple mapping of React components to Threejs objects. It has multiple layers.

React VR layer

React VR code layer is the top most layer with which most of the developers will interact. It contains the View , Pano and more components. React Native is used to create this layer.

React code runs in WebWorker and uses message-passing to communicate with the browser window. It helps the main rendering thread to run faster.

React Runtime

React runtime converts React primitives to OVRUI or Threejs objects. It runs on the webpage and supports React abstractions to networking, timers, and async storage. It is used if you need to create custom geometry or shaders using Threejs.

OVRUI

OVRUI is a separate UI library that provides geometry types for Threejs. It includes abstractions for objects that describe text, buttons, and other components to be included in a VR scene. Currently, the library is built to support ReactVR.

OVRUI provides the player UI that you can see in ReactVR. OVRUI initialises the Threejs scene and displays the buttons for fullscreen and for viewing in VR.

Threejs

Threejs provides a simpler interface to WebGL API in the browser. OVRUI create Threejs objects when necessary.

Getting Started in ReactVR

Since ReactVR is still in the pre-release state, you have to download it from here. It contains the samples and the docs for ReactVR. If you already tried our few samples of ReactVR, let’s create our first ReactVR project.

To create your first project, you need to install react-vr-cli from npm.

npm install -g react-vr-cli 1 2 3 npm install - g react - vr - cli

You can use react-vr command to create your ReactVR project once it’s installed.

react-vr init vrProject 1 2 3 react - vr init vrProject

Enter vrProject folder and use npm start to start a local server once the process is completed.

The VR component code is sitting in index.vr.js file. If you run this project, you should be able to see a panorama with text hello.

import React from 'react'; import { AppRegistry, asset, Pano, View } from 'react-vr'; Class PanoView extends React.Component { render() { return ( hello ); } } 1 2 3 4 5 6 7 8 9 10 11 12 import React from 'react' ; import { AppRegistry , asset , Pano , View } from 'react-vr' ; Class PanoView extends React . Component { render ( ) { return ( hello ) ; } }

This example is using three components.

View : View component is the container for ReactVR. In React, the component should only return a single element. Hence, View component should wrap all code.

: View component is the container for ReactVR. In React, the component should only return a single element. Hence, component should wrap all code. Pano : Pano component creates a sphere with 1000m. The source attribute can be used to set the texture of the Pano component.

: Pano component creates a sphere with 1000m. The attribute can be used to set the texture of the component. Text: Text component is used to display text in the Threejs scene.

Remember that this is a pre-release, so there will be more features and attributes added based on developer feedback once ReactVR is released on Github.

You can view the result in your browser at http://localhost:8081/vr

Viewing ReactVR in mobile

ReactVR can also be used to view VR in mobile. It doesn’t include any polyfill to display stereoscopic rendering when WebVR API is not available. However, WebVR is gaining traction fast, and within a few months, it should be available in the majority of mobiles. For now, it can be viewed on Samsung Internet browser in Oculus store as well as Carmel browser by Oculus. WebVR API is coming to Chrome app for Android in coming months.

If you have a Samsung S6 or Samsung S7, you can use React VR to view the content using Carmel browser.

Make sure the mobile is connected to the same WiFi network as the computer. Then visit http://localhost:8081/vr . If you are using a browser that supports WebVR API like Chrome Beta, then you should be able to view in Google cardboard. If you have Samsung S6 or Samsung s7, then Carmel will ask you to put the phone inside Gear VR. It supports GearVR.

Developing further

With this initial release, you should be able to create different VR experiences that work in browsers with WebVR API. In case the WebVR API is not present, then you can drag around with your mouse on desktops, and using device orientation using mobiles. If you face any issue, then make sure you let the ReactVR developers know at the issues repository.

Once you try out ReactVR, don’t forget to let us know what you think.