Start a Virtual Reality Project Using the React VR CLI

Build 3D Panorama Scenes Using the Pano Component in React VR

Write Text Using the Text Component in React VR

Structure 2D Content like Images and Text Using the View Component in React VR

Add Shapes Using 3D Primitives in React VR

Add Lighting Using Light Components in React VR

Render Custom 3D Objects Using the Model Component in React VR

Compose Multiple 3D Objects into one Component in React VR

Capture User Interaction with React VR

Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

Build Virtual Reality Experiences Using React VR

React VR isn't limited to simple 3D primitives. By using the `<Model/>` Component we can place complex 3D models into our scene. 

In this lesson we'll import a custom polygon mesh of an astronaut by loading in a Wavefront `.obj` file. We'll play with our astronaut and learn about various options that will define the surface area of the model.

https://app.egghead.io/api/v1/lessons/react-render-custom-3d-objects-using-the-model-component-in-react-vr/subtitles

[00:00] First, we have to import the model component and add it to our scene. Now we need the model itself. You need to know there are various file formats out there, and how to represent 3D models. React VR supported one out of the box from the beginning, which was OBG. Keep in mind, it only describes the geometry of an object.

[00:21] In our case, I prepared an astronaut model which is in our static assets directory. We add a source property to our model, and it accepts an OBG key which will provide with a file path to the geometry file, and then we add a style attribute. In addition, we move it two meters away from us.

[00:44] Next, we add the property wireframe, and with this change, the model already becomes visible in our scene. Let's take a closer look how to change the appearance of the model surface. Therefore, we remove the wireframe property and apply color, in our case, orange.

[01:00] As you can see, the color applies to the whole model. Let's set the model's property lit to true so it is affected by the current lightning setup. As an alternative to this full covering, we can use a material file that can be referenced.

[01:15] The benefit of a material file is that it contains quite complex definitions of how the surface of the model looks like, for example, various textures or colors that apply to different parts of the surface.

[01:27] Therefore, we add an MTL key to the source object and reference the path of the MTL file in our static assets. Last but not least, another alternative is to provide a texture. In our case, I use the chess world that already ships with the React VR boilerplate. You can get to pretty interesting results, as you can see.

[01:48] Keep in mind, the MTL definition overrides the texture's property, which again overrides the style's color attribute.

Render Custom 3D Objects Using the Model Component in React VR

Share this video with your friends

Course

Build Virtual Reality Experiences Using React VR