Render Custom 3D Objects Using the Model Component in 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.
[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.