How I created Universe in less than a week.
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 😉 )
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):
$ npm install -g react-vr-cli
$ react-vr init vr-universe
$ cd vr-universe
$ npm start
Wait for packager to launch, and visit http://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 translateZ
transformations:
Big shoutout to Michael Straßburger for creating react-native-animated-math
that simplified math in animations of planets! ⭐️
Now, we have our planet spining and rotating around the Sun.
What Sun!? We don’t have it yet, let’s quickly correct that omission.
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, if so, you can leave a clap (or fifty 😉) and follow me here and also follow our Callstack Engineers Blog for more cool content.
Happy hacking and let the Force be with you!