[004.1] Introduction to React VR

What is React VR and how to start building apps with it.

Subscribe now

Introduction to React VR [11.06.2017]

A new world

Virtual Reality is a new world. If you're a developer it is a world of opportunities and new discoveries in this field. Facebook and other companies are working hard on VR these days.

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

What does all of this mean? We can create web apps with VR using <Text>, <View> tags, for example, and create our components using React!

Let's see what it looks like!

Starting

So, we are going to create a React web application.

Let's do a create-react-app and the name of our app. Creating the application... And, is it done?

Actually, not! We don't use create-react-app. Facebook has created a CLI to help us kick start our app.

Let's install that.

npm install -g react-vr-cli

Installing... and now we will create our app. It has an init function.

react-vr init WelcomeToVR

Ok. App created. Let's start it.

yarn start

Now, it has a server running, and we can check the browser. Boom! This is our first VR web app! We can move inside the app! If we check this using a phone, we can move the phone and see that, or you can just use the mouse and see everything as well. There are some ways we could use a phone.

We could use a Google cardboard, that is a platform for viewing VR apps. You can buy one or build yours. Also, there are VR glasses that you can just adjust your phone, similar to a cardboard. Google also has DayDream, that is another tool for visualizing. Facebook has the oculus, that is another viewer for VR. You can find some interesting links in the resources sections.

What does the code look like?

Let's see how our project is structured. Here we have a React component, and we are importing similar things to what we import in a typical react app, Text and View. In our render method we are returning a View with a Pano component, that will see in a moment and a Text, and that is all.

import React from "react";
import { AppRegistry, asset, Pano, Text, View } from "react-vr";

export default class WelcomeToVR extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset("chess-world.jpg")} />
        <Text
          style={{
            backgroundColor: "#777879",
            fontSize: 0.8,
            fontWeight: "400",
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: "center",
            textAlignVertical: "center",
            transform: [{ translate: [0, 0, -3] }]
          }}
        >
          hello react-vr
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent("WelcomeToVR", () => WelcomeToVR);

Let's change this text and see what happens. Ok. It changes!

Our project is similar to any react project. We use node_modules and our filenames end in .vr.js.

➜  WelcomeToVR ls
__tests__        package.json     vr
index.vr.js      rn-cli.config.js yarn.lock
node_modules     static_assets

In the folder static_assets, we have the files, in our case the chess image. Let's open this image and see how it is. This is 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 in your app. So, here are a lot of pictures we could use rather than the chess board. Let's use the Eiffel tower picture, seen from Trocadero.

We can change the <Pano> source, and put the jpg of our picture. Panos are images projected in our Application. Now, if we reload, we can see we are in Paris!

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

The Tag hello react-vris right in front of us. We could use a marginleft, but this is not enough. In this case, it's better if we use a transformation, the transformation would be a translation.

The translate transformation is in x,y, z axis. So, we can play with these values and see what happens. The unit here are in meters. This is super interesting! If you know the distance between the objects in your picture, you can play with the distances. In my tests this is not 100% accurate, but in general it has a good accuracy.

Putting the Y equals to 10, we can't see this because it's too high. Let's put Y equals 1, and now let's play with the z axis.

Starting with -30, we can see now our tag is a bit distant.

transform: [{ translate: [0, 1, -30] }]

Now, let's try -40 in the z axis. A bit more distant. Now, -200, and it has increased.-700. Ok,-700` seems a good distance.

transform: [{ translate: [0, 1, -700] }]

Let's put the tag a bit more to the right. Let's increase 30. Ok, now it is a bit right, but we want this almost the same height as the Eiffel tower.

transform: [{ translate: [30, 1, -700] }]

I will increase the font size, making this text bigger, and let's put the tag 30m more to the right. The Eiffel tower has 300m. Let's put the Y axis exactly 300.

transform: [{ translate: [60, 300, -700] }]

Now we can see the tag is almost at the top of the Eiffel tower. This is really good, because we choose 300, because we knew the correct height.

  transform: [{ translate: [60, 300, -700] }]

With this in mind, let's check the distance between Trocadero and the Eiffel tower. It is about 900m. So, let's try to put the z axis -900.

  transform: [{ translate: [60, 300, -900] }]

Now we can see this looks like side by side the tower. This is great! It worked!

Adding 3D objects

Let's now add a 3D object. We can use Poly from Google to get a 3D object. Here there are a lot of objects, let's see which one we will choose. Let's try the astronaut.

Downloading. When we download the object, it contains some files: the .obj file, the .mtl file and the texture. Let's add the texture just later.

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. Let's start by putting the astronaut near our tag.

  <Model
    source={{
      obj: asset("astronaut.obj")
    }}
    style={{
      transform: [
        {
          translate: [40, 300, -700]
        }
      ]
    }}
  />

We can't really see it. It seems too small. Let's apply a scale transformation. Let's scale all the sizes by 20. Ok, now we can see it, it's all blank, with no texture. Let's keep it like this and try to play with the transformations.

We could now apply a color for the entire object. Let's add this gray.

  <Model
    source={{
      obj: asset("astronaut.obj")
    }}
    style={{
      color: "gray",
      transform: [
        {
          translate: [40, 300, -700]
        }
      ]
    }}
  />

Let's play a bit more with the transformations and bring the astronaut closer to us. Ok, He is here. Now, let's add the other two attributes for the object, the mtl and the texture.

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

Now we can just put the astronaut in a place we want. Ok, now he is in a place, but I would like to rotate it. To give the impression that he is looking at me.

In this case, I will use a rotateY transformation to do that.

  <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 }
      ]
    }}
  />

Rotation is in degrees. So, I will rotate 30 degrees to the left. Now, I will just tweak the astronaut position a bit. And now everything is how I wanted.

Summary

Today we introduced react-vr, we saw how to use panorama images, and we saw how to add a 3D object and add some transformations on it. In the next episodes we will see everything in more detail.

Resources