Home Linux HTML/CSS PHP React VR Blog PHP Fiddle

React VR: Setting Up








Font End VS Back End:

Web Development: Back VS Front


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

DONATE

Check out my blog:

Coding Commanders Blog

JavaScriptReact VRSetting Up React VR

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



VR Testing

With React VR, you can run and test your code in the web browser. This makes it a great way to get started in VR! However, if you plan on creating anything for actual virtual reality use, you will want to test your application with VR headsets.

VR Headset Recommendations

The Best VR Headset:
Oculus Rift + Touch Virtual Reality System



More Affordable Option:
Google Daydream View - VR Headset (Crimson)



Cheap Option:

Google Cardboard,Topmaxions 3D VR Virtual Reality DIY VR Headset For 3D Movies and Games Compatible with Android & Apple Up to 6 Inch Easy Setup Machine



Instructions for setting up ReactVR on cardboard:
React VR dev environment working with an Android Cardboard HMD

Coding Commanders Newsletter



Color Selector



Hex:


RBG:


Intro to Git:

Git + GitHub









Continue to React VR Lesson 1