I have been exploring with React VR recently and it is quite interesting to write code for Virtual Reality compared to web. I mean for the most part you are still writing React code so a lot is very similar. But since you are working within a 3D space you have to think in terms of meters instead of pixels. Your canvas is no longer of rectangular shape but a sphere (or cube) that wraps around you. The viewport is now a camera with a horizontal and vertical Field OF View (FOV). And of course, you can position elements or the user (camera) anywhere on the X, Y or Z axes.
Getting Started With React VR
Getting started with React VR is very easy, as you would expect! If you have worked with React before then it is extremely quick to pick up and get your first app up and running. Check out the Getting Started Guide for full documentation.
To get started with your first React VR App all you have to do is run 2 commands from your terminal (on Mac). The frist command installs React VR CLI tools.
npm install -g react-vr-cli
The second command creates your React VR App.
react-vr init WelcomeToVR
To run your app, simply cd WelcomeToVR and run npm start. That’s it! Your app should be running at http://localhost:8081/vr/index.html.
Some Helpful Comments & Tips
While playing with React VR and getting to learn it there were a few tasks that were harder to accomplish for me than others. As I mentioned in my open paragraph, it had a lot to do with changing the way you think about writing code. Thinking in meters and not pixels or forgetting to place elements on the Z axis and then wondering why I don’t see them. In many cases I was overcomplicating things.
Hopefully the comments and tips below save you some time if you decide to explore the realm of Virtual Reality using React VR.
Use transform: [{ translate: [x, y, z] }]
As I mentioned, one of the dumbest things I got hung up trying to debug was sometimes not seeing an object that I had just added to my VR world. In most cases it was because I forgot to apply the translate property in my styles which positions the element in all 3 axes.
It makes total sense when you think about it. If your camera is at position [0, 0, 0] and you place an object in the same position then that object will not be in your camera’s FOV unless it is huge. As a result it will seem as if the object is not there.
Adding a positive or negative integer to the Z axis moves the object behind or in front of the camera respectively, making the object visible by the camera’s FOV.
Read more about React VR 3D coordinates and transforms.
Understand VrHeadModel
VrHeadModel is an incredibly useful utility module. The VrHeadModel API from React VR makes it easy to get the camera’s position and orientation during runtime.
Using data from VrHeadModel you can do useful things like showing a modal or dialog that stays fixed to the camera’s position like in this example where a dialog message appears before you can begin playing.
