How to Create a Universe in React VR

In short

React VR, an extension of React Native, simplifies virtual reality (VR) development. The tutorial guides through setting up a project, creating a rotating 3D Earth, and adding the Sun. It provides a hands-on introduction to React VR, demonstrating basic Solar System creation using React VR components and animations. The full code is available on GitHub for exploration.


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:

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.

animated image of spinning globe

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:

React VR 3D Sun

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.

React VR solar system

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

FAQ

No items found.
React Galaxy City
Get our newsletter

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.