How to Create a Universe in React VR

Introduction to React VR

Ever heard about React VR? You’ve probably heard about React, and React VR is the youngest child in React family. As it stands in the Docs:

React VR takes it to the next level, creating UIs and 3D scenes in virtual reality.

React VR builds on top of React Native, and it shares similar concepts and components as its mobile counterpart, such as View and Text tags, and similar layout but extended with 3rd dimension.

Without further ado, let’s try it out and give it a spin (pun intended).

Project setup

Setting up a new project is as easy as installing React VR CLI and bootstrapping the project with it (pretty much the same as you’d do with React or ReactNative):

Wait for packager to launch, and visit localhost:8081/vr in your browser. You should be presented with 3D React VR welcome screen:

You can also view it on your phone, or if you’re using a web browser that supports WebVR (e.g. Carmel Developer Preview browser for Oculus), you should be able to put on your headset and explore the world in full VR.

Planets

Let’s explore some basic components and core APIs delivered with react-vr and build something neat.

Replace existing code in index.vr.js with those lines:

You should now see a blue Sphere component — it will be a building block of our app. We have moved it 3 meters along z-axis to see the whole object.

View is core component used also in react-native. It is main container for all other components. PointLight is a light source — without it we wouldn’t see a thing.

Let’s finish our Earth:

To spin it around, we have used Animated API. It’s a library used also in react-native that let us create nice and fluid animations. We’ve also added the new texture prop to our Sphere component — an image that React VR will render to 3D image of the planet.

And voila, we now have our own planet that we can spin around and view from different angles.

Last thing — rotate our planet around the Sun. To do so, we can create another Animated.Value, and interpolate it to tranlsateX and translateZtransformations:

Big shoutout to Michael Straßburger for creating react-native-animated-math that simplified math in animations of planets! ⭐️

Now, we have our planet spinning and rotating around the Sun.

What Sun!? We don’t have it yet, let’s quickly correct that omission.

Adding the Sun

It should be pretty straightforward — Sun does not move around, so we can position it at the center of our app, and just make some styling:

Our index.vr.js file should look like that:

Using Scene component I moved viewing point 35 meters in both Y and Z axis, and I’ve also added inclination prop to planet to reflect tilt of Earth’s orbit around a Sun.

And here’s the result:

Remaining work

Having Earth, the rest of Solar System planets is just a matter of adding different props to next Planet components. I’ve also added a mouse click listener with which I can zoom in and out the camera, and watch whole Solar System with one glance. You can view all code on my GitHubRepo, and check out how it was all done.

Hope you’ve enjoyed this brief introduction to React VR. Happy hacking and may the force be with you!