Name: Add 3D objects to a React 360 application
Uploaded: 2019-05-10T11:45:41-05:00
Description: React 360 applications are not restricted to 2D panels in space – you can also bring in 3D elements. In this lesson we are going to learn how to import 3D objects using Entity component and how to use Locations to display them in a React 360 application.

Start a Virtual Reality project with React 360

Write text using the React 360 Text component

Use flexbox to create layouts in React 360

Assign multiple styles to a component in React 360

Display images using the Image component in React 360

Create a Cylinder Surface and attach a component to it in React 360

Create a Flat Surface and attach a component to it in React 360

Add 3D objects to a React 360 application

Capture user interaction in React 360 with VrButton component 

Change 360 panorama background in React 360 app

Use Prefetch component to fetch images before they are needed in React 360

Add animations to React 360 components

Create Native Modules to extend React 360 app functionality

Build a React 360 app for production

VR Applications using React 360

React 360 applications are not restricted to 2D panels in space – you can also bring in 3D elements. In this lesson we are going to learn how to import 3D objects using Entity component and how to use Locations to display them in a React 360 application.

https://app.egghead.io/api/v1/lessons/react-add-3d-objects-to-a-react-360-application/subtitles

Instructor: [00:00] To import our 3D model in React 360 application, go to components and create a new file that we're going to call arrow.js. Here, import React from React, and we're going to also import asset and view from React 360.

[00:12] In order to display 3D models inside of React 360 application, we need to import entity from entity. entity is also part of React 360, but you have to import it in this way. We're going to create a new component. We're going to call it arrow.

[00:25] It's going to extend React component, and we're going to render a view and the entity inside of it. entity allows us to display external 3D models. We can either design something, or we can go to a website, such as Google Poly, and download a free model for our application.

[00:40] We can download this model in a couple of different formats. React 360 supports both object file and GLTF file. GLTF basically like a JPEG for 3D, and we're going to use this one. I'm going to download it and put it inside of our static assets directory.

[00:55] Here, we can see it inside of the static assets directory. To assign this model to the entity component, we need to specify a source. It's going to take an object, GLTF-2. We're going to set it equal to asset arrow.gltf.

[01:09] Let me save that, and right now, what we need to do is to register this arrow component. In order to do that, go to index.js, import the arrow component, like we do it with the flag component, and register it over here like this.

[01:24] Right now, we need to jump into client.js and render this component somehow. We cannot use a surface, because surfaces are for displaying React components onto flat planes, either on a cylinder or on a flat surface.

[01:36] With 3D models, we have to use something different. We have to use a location. First up, we need to import location from React 360 web, and we're going to create a new location. I'm going to call it myNewLocation, and it's going to be a new location.

[01:51] Here, we have to set in an area specifying the position of the location within the x, y, and z-axis. I'm going to put it as three meters to the right, zero meters in the y-axis, and minus one meter in the z-axis. This model is going to be displayed three meters to the right and one meter in front of me.

[02:08] We're going to render the arrow component to this new location. We're going to do React 360, render to location. Then we're going to create a new route, with the arrow component. I'm not going to set any props, and I'm going to use my new location, like this.

[02:24] I'm going to comment out this flag comment, because we are not going to need that. After we save and refresh that, we are not going to be able to see the arrow. We need to shed some light on this situation. There are a couple of different types of lighting we can use in React 360 applications.

[02:38] In this case, I'm going to use an ambient light. We're going to import it from ambient light, and I'm going to set the intensity of the light to 1.0We're going to set the color of the light to white. After I save and refresh that, we can see our problem.

[02:50] We were displaying the arrow, but it's absolutely massive. We need to scale it down a bit. To change that, we need to use this transform property. I'm going to specify a style. Inside of the style, we're going to have a transform.

[03:00] Transform property takes an array. We're going to have scale of 003, because our arrow is really huge. We're going to rotate it in the y direction by 120 degrees, and we're going to rotate it in the x direction by minus 30 degrees.

[03:15] After I save and refresh that, we have the desired effect. We have this 3D model of the arrow displayed a couple of meters to our right. The thing is, is that this model is flat right now. The reason it happens is that right now, we are using this ambient light.

[03:28] This ambient light has the same intensity in all kinds of direction. In order to have shadows displayed on this arrow model, we need to use some figures. First, import point light from point light. I'm going to copy this ambient light, because point light is similar to ambient light.

[03:43] It also has an intensity, also has a color, but I'm going to transform it. I'm going to use style, and I'm going to supply a transform property. It's going to translate, as in move, our light source to 0020. It's going to appear 20 meters behind our back.

[03:59] After I save and refresh that, we're going to see that our model looks much better, much more alive, because we are using the point size, so we can see the shadows on this model.

Add 3D objects to a React 360 application

Share this video with your friends

Course

VR Applications using React 360