If you find my tutorials helpful, please consider donating to support my free web development resources.The more money I raise, the more content I can produce.Thank you,Commander Candy

React VR is a JavaScript framework used to create Virtual Reality applications. In this lesson we will install and setup React VR.



This lesson was inspired by a workshop I attended: ReactVR - a VR Workshop with Javascript. Thank you to Praveen Yalamanchi and Damian Montero.

Step 1: Install

You will need Node.JS and React VR installed



GOTO: React VR: Getting Started



Follow the instructions.

Step 2: Go to Terminal

$ mkdir reactVR

$ cd reactVR/

$ react-vr init Basics

➼ mkdir - make a directory called reactVR

➼ cd - Change directory to reactVR

➼ init - Add the Basics code to the directory

Step 3: Open in Text Edior

Open /reactVR/Basics/index.vr.js in text editor

You will see the following JSX components:

✶ Pano Component -- Panoramic Picture

✶ Text Component -- "Hello" centered on the screen

✶ View Component -- Data structure returned by render()

Step 4: Add Hot Reloading

You can add hot reloading, by editing the configuration file. This will automatically update the web browser to reflect saved changes. You will not have to refreash the browser.

Open: /reactVR/Basics/vr/client.js

function init(bundle, parent, options) { const vr = new VRInstance(bundle, 'Basics', parent, { // Add custom options here enableHotReload: true, ...options, });

➼ enableHotReload: true, - We turned on hot reload.

Step 5: Return to Terminal

$ cd Basics/

$ npm start

Step 6: Open Web Browser

✶ Open Google Chrome or Firefox.



✶ Goto: localhost:8081/vr/



✶ The first load will take a while, but don't worry. Subsequent loads are much quicker!

You should see something like the picture below