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
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 😉 )
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.
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
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.
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:
index.vr.js file should look like that:
Scene component I moved viewing point 35 meters in both
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:
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!