Virtual Reality with React

I'm Eugene Ghaoui, mobile and web VR developer and founder of IO. As you know, I'm going to talk about virtual reality with React and how can we create new VR experiences using React 360 framework and run it into our web browser and all the VR devices.

To get started, what is React 360? React 360 is JavaScript framework created by Facebook for the creation of 3D and VR user interfaces built on the top of React. This library is designed to simplify the creation of complex UI. And as you know, React 360 allows us to use the familiar concepts and tools of React and React Native.

To get started, all what you have to do is install the React 360 CLI via npm, then init a new project and do an npm start to make sure that everything is going fine and you will have your default project into your web browser.

For the folder structure, we have the static assets folder, which contains our 3d objects files and the material files, sounds, images, videos, all the media files should be here, We have the client.js file and here we create our locations and surfaces, and we have the index file, which is our main file.

For the components, we have four main components, first the views which is kinda like divs, and text component, and the image component and the vr button, which is a normal button but on VR. The most important thing on VR is surfaces. We use surfaces to render the 2D UI components, and we have two types of surfaces, a cylinder surface and a flat surface, we have two angles, the yellow angle and the pitch angle, and every surface should have a width and height that should be given by the developer. For the location, locations are used to render 3D UI components, and we use the Cartesian coordinate x, y and z, and at the end we create a new route which will help the developer to connect our surface to the upper registry on the index file.

As you see here, we have the z axis and here if z is negative the object will be on the front, if z is positive the object will be on the back and we have the x for the pitch and y for the yaw.

Here is an example, so here we like to add 3D object into our VR application. All what we have to do is importing the entity from entity. Entity is used to render the 3D objects on React 360. We use here the, if you like, you will use the ambient light for the light intensity and we use the source to give the link to our object. Here our object have two extensions, the object and the material. We want to use it for rendering and we can style it as you see here. We have transforms and too many options to style our 3D object.

If you like to run this application on your web browser, just scan the following QR code and you will have this application on your phone or your web browser on computer, on any VR device.

Now we will move to the code. Let's see what we have. Here is what this looks like. It's similar to React Native and React as you see here. We use the Flexbox for the styling and we have the client file. As you see here, we have a new surface and we give it a root, which is a slide root and if you go to the index file, you will see here we have the app registry with the slide root and the class name which is Slides. And for the 3D objects, we have a Model, a Model class and as you see here, we have the entity object with an asset which is a Porsche car and we give it texture, which is a default image that we have here.

So let's run it into our web browser, just do local host and run it and wait until it's fresh and here we are in our React 360 application. As you see here we have the slides and we can change between them. We have the video layer and we can change our background image.

I think it's all what you have to know about React 360 to get started. For further questions or help, just contact me on twitter, github, facebook, email and thank you for watching. I hope that you enjoyed the talk and thank you for everything.