Introduction to React VR at DailyDrip

Last week we spent the whole week talking about React VR.

Facebook released react-vr this year. It is a framework for creating VR applications, whose goal is to simplify our lives when we are creating our apps. It uses WebGL and WebVR APIs, but also it uses the expressive and declarative power of React.

Here are the episodes you can take a look at. The first one is a good introduction and it's free:

Animations

Very similar to how React Native does it, we have animations in React VR. We just need to import Animated, create an Animated.Value and play with it.

If we use images, our Image will be an Animated.Image. Using this, It enables animations on the image.

<Animated.Image
        style={{
          width: 200,
          height: 200,
          transform: [
            {
              translate: [-250, 250, -500]
            },
            { translateY: this.animatedValue }
          ]
        }}
        source={{
          uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png"
        }}
      />

For example, here we are using a URI from the react logo, and we are varying the values in the translateY transformation. It means, we are varying the Y axis, making the object move in the Y axis, up or down.

Buttons

One of the ways the user can interact with us is by using Buttons. React VR has VrButton.

<VrButton
  style={{
    transform: [{ translate: [-250, 250, -500] }, { scale: 3 }]
  }}
>
  <Text style={{ color: "gray", fontSize: 40 }}>Animate</Text>
</VrButton>

Another cool feature from VrButtons are the properties: onEnter and onExit. So, once the mouse or gaze enters or exits the button, we can do something.

Panorama images

It's really easy to add panorama images. Adding these images, we can have an immersive feeling. It's really good! Especially, if you have a google cardboard or a VR glass.

In the folder static_assets (it comes when you create a React VR project), we have the image files, in our case the chess image(by default). We use a 360 photo, a spherical photo. Today, there are two types of these photos. Cubic format and equirectangular. The equirectangular is more widely supported, and probably your camera can take this type of photo. It is a 360 degrees horizontal and 180 degrees vertical photo.

You can go to Flickr and search for equirectangular photos, you can get one of these photos and put it in your app.

We can change the <Pano> source, and use the jpg of our picture. Panos are images projected in our Application. Now, if we reload, we can see ourselves inside of this picture.

<Pano source={asset("new_york.jpg")} />

Adding 3D objects

We can easily add 3D objects. We can use Poly from Google to get a 3D object.

When we download the object, it contains some files: the .obj file, the .mtl file and the texture.

For adding the object, we will use the Model component. It allows us to add a 3D object. Our source will be our object file, and we will need to apply some transformations on this object.

<Model
source={{
  obj: asset("astronaut.obj"),
  mtl: asset("astronaut.mtl"),
  texture: asset("Astronaut_BaseColor.jpg")
}}
style={{
  transform: [
    {
      translate: [4, 1, -4]
    },
    { scale: 2 },
  ]
}}
/>

We can apply any transformations we want in the object. Let me add a rotateY transformation. Rotation is in degrees. So, I will rotate 30 degrees to the left. I'm also applying a scale transformation in the object, increasing all the sizes by 3.

  <Model
    source={{
      obj: asset("astronaut.obj"),
      mtl: asset("astronaut.mtl"),
      texture: asset("Astronaut_BaseColor.jpg")
    }}
    style={{
      transform: [
        {
          translate: [10, -10, -50]
        },
        { scale: 3 },
        { rotateY: -30 }
      ]
    }}
  />

Travel App

We played with panorama images and we created a travel app. In this app, you can choose a city from a given list and then it changes the panorama. And It seems you're in the place.

Quiz Game

In the last episode we built a simple game and we can answer questions by using our head(in the case we are using a VR glass). To do this, we have used the properties from VrButton and once the person submit a response, we check if this is correct or not.

This is a cool thing we could do, just using simple components in React VR.

At a glance

If you're a JavaScript developer or if you already work with React, I think you should give React VR a try. Even if you don't have a VR project in mind, it's a really fun library and you could use 100% of your React knowledge. Plus, if you like Computer Graphics, working with 3D models, images, transformations in objects you should absolutely give it a try!

Resources