A World Tour Produced by React VR

Rose Shumei Huang
Sep 5, 2018 · 4 min read

I’m currently Mod 4 student in Flatiron School learning React. During the study, I saw the terms as React Native & React VR a few times. So I decided to take a peek into the React VR just out of curiosity.

I followed a tutorial on Udemy named React VR — Creating Virtual Reality Apps presented by David Joseph Katz. It’s very smooth to get start.

Getting start

  1. node & npm : Make sure to have node and npm on the computer and both of them require a new version. So I updated both.
  2. react-vr-cli : Install it globally with the -g flag.
  3. react-vr : I checked react-vr version to make sure I have it.

4. react-vr init appname : initiate the React-VR project from the terminal

5. npm start & navigate to localhost:8081/vr/ and it’s there! First peek is pretty amazing! And disappointed a little. React-VR is powerful enough that I didn’t need to do other things to make it work. But at the meantime, I was hoping to learn more through the experience. I realized at the moment that quality 360 panoramas are all the application required to start.

First peek!

Here is the code inside index.vr.js:

Some special key words are required, such as: AppRegistry, asset, Pano & View as the minimum.

  1. AppRegistry: used on line 34. It’s some syntax I haven’t fully understood yet. Just chain on ‘registerComponent’ function which takes in two parameters: (1) Project name and (2) a callback function point to the root component

2. asset: used for require 360 panoramas jpgs on line 14.

3. View: as a wrapped component

4. Pano: ask for panoramas

Note: for a better programming experience, I enabled the hot reload inside client.js. Later I figured out another way to do it through URL, just add ‘?hotreload’ after the actually url.

Building Something from Scratch

With all the knowledge I learned from the starting code, I deleted the whole index.vr.js file and started from scratch.

  1. Render a Panorama jpg

And it shows like this!

2. Add a Button with text inside

CSS logic is better living somewhere else, so I’ve a variable styles for that. And Add a child View with the button and text inside.

3. Toggle the Button from ‘open’ to ‘close’

The text would change based on a state named ‘showMenu’

And the setState method would be called on an event handler named ‘toggleMenu’ based on the event ‘onEnter’. I assume later if I could make the code work on a headset, the code would be triggered by user gaze instead of click on the screen.

4. Set another state for place to be easily modified

declare a variable places

5. Then add the buttons for different places based on the open/close button.

6. Add ‘onEnter’ EventListener each time entering the different buttons.

6. Find some good 360 panos from google and enjoy myfirst React VR app!

Reference:

  1. VR panoramas
  2. VR panoramas

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade