Early exploration with React VR

Including takeaways, tips, and tricks

React VR hello world starter

Getting Started

Getting started with React VR is extremely easy. Follow the steps in the documentation linked below and you’ll get the hello world running in 5 minutes or less.

Getting Started

X, Y & Z axes

If you look inside the <text> tag in “index.vr.js” file, you will see an item called transform, like this:

transform: [{translate: [0, 0, -3]}]

The ‘translate’ array are the X, Y and Z coordinates of the VR world. In VR, everything revolves around you. You are the zeroth position of all three axes. That means X is the left-right axis ; Y is up and down, and Z is moving closer or further away from you.

Here is a list of some important properties:

• The location of your eyes is the zeroth position of all three axes
• All three axes are measured from the default orientation.
• X axis is right and left, with right being positive and left being negative.
• Y axis is up and down, with up being positive and down being negative.
• Z axis is forwards and backwards, with forwards being positive and backwards being negative.
• Everything is measured in meters. So a lot of decimals.

Object Rotation

One thing that you might notice early on is that when you move an object with text behind you, the text will look backwards. Like this:

That’s because the object needs to be rotated, so that the right side is facing the center (you).

React VR makes it easy to rotate along any of the three axis using rotateX, rotateY, and rotateZ inside transform, like this:

transform: [{translate: [0, 0, 3]}, {rotateY: 180}],

The diagram below shows the direction of rotateX, rotateY and rotateZ in their respective axes:

With that in mind, all we need to do now is to add the “rotateY” as shown in the above code and “hello” should render correctly, like this:

Embedding

To get 360 degree content into your website, you just have to add an iframe that points the video server location. Like this:

<iframe src="http://localhost:8081/vr/index.html"></iframe>

Questions yet to be answered:

• How to float an object so it’s always in the view?
• How well does react native work with React VR?
• How does React VR stack up against A-frame?

Final thoughts

I will be documenting my exploration into VR with the goal of publishing a module that lets developers add stories (like instagram stories) for 360 degree photos and videos into their VR apps. Stay tuned for the next post!