In this video, Emmanuel Henri adds a few models to the scene so you can get a basic scene going on.
- [Instructor] Now that we've got a background, let's add some models to the scene. Let's get to it. Before we actually enter a single line of code, let's make sure we have our assets into our static_assets. So let's go ahead and click on the exercise files, and then make sure you have your directory close by. And this is where we're going to put the 3D models. In the resources here, you have three folders that contain an object and a material file. So make sure when you copy those folders, that you keep everything as is.
And the reason being is that the material file is actually calling to these particular images to map them out to the object. So you want to keep them in the same folder, and just to keep things structured, keep them inside the folder, as well. If you have any issues, you can always go back to a folder and then figure out what's wrong with it. So let's go ahead and copy the EMU, Loral and the Nasa_aqua, like so. Copy that, and then paste them into the static assets.
So now we can go back to our code, in VS code, and the first thing you want to make sure that you have Model imported, otherwise it's not going to work if you haven't done it when we actually did, please make sure you do it now. And then you can scroll with us, and start entering the code for the model. So the model is an actual component that comes from the React VR library. And it basically allows us to write a few props inside of it. So let's go ahead and use some of them. The first one is source.
So basically, this is where you load the object and the materials file, so that takes an object. And that object takes the obj, so first the object that we're going to load from our static assets, like so. And the first one that we want to load is, and let's go and enter the asset function. So this asset function allows us to load directly from the static assets. And what we want to do next is enter the actual folder.
So we want to load from the folder, and then load this file. So what I'm going to do is enter this first one manually, and then we'll use a shortcut inside VS code to do the others. So let's go ahead and first load nasa-aqua-satellite-obj. So that's a new folder here. And then we want to load the actual object here. Forward slash and then nasa-aqua-satellite.obj.
So nasa-aqua-satellite.obj. So we're loading the actual object. Just make sure there's no syntax or typo here. We're all good. All right, so comma at the end. And then we want to do the mtl file. So the same thing for the mtl. So let's copy asset here. So from asset to the last parentheses, copy that, and then paste it below, and then all you have to do is change the object to mtl, like so.
So you've basically loaded the material file for that object. The next prop that the model takes is style. So basically style allows us to map our object in 3D space. So it allows us to translate or to rotate or scale or translate any specific axis, so you can do that. That takes an object. And then the first property inside of style is called transform. And transform is an array, or takes an array.
And then the first is translate. And translate takes an array, as well. So translate will basically allow us to position our object in the 3D space. So I want to position slightly to the left, with minus one on the x axis, level out on the y axis, so keep it at level. And then a little bit further in the back, by doing minus 0.75. So by the way, these coordinates are all stuff that I've actually done prior to make sure that I have them positioned where I wanted, but feel free to play with these as you see fit to make sure that it is to your own liking.
This is one area of this course that you can actually play around and do whatever you want. And the next one, I want to scale it. So I want to scale that particular object, to 0.075. Then I want to rotate the x axis, so rotateX to 180. And then I want to do a rotate on the x axis, as well, to minus 360, like so.
All right. So these are for the styles. So before we actually pursue with the other models, let's save this and make sure our model appears on screen properly. So this is the nasa-aqua-satellite first. And it should be on the left. So let's go to our scene, refresh. And our satellite is on the left, as planned. All right, so let's add two more. So what I'm going to do to save time here, we're going to copy the first model, like so. And paste it twice.
So paste it one time. Let me just fix my indentation here. Paste it a second time, and also fix my indentation here, like so. All right, so the second model we need to load is the Loral. So let's go. And I'm going to give you a quick shortcut to start saving time on this. Click on the Loral folder in static_assets. And then right click on the object, like so. And then copy path. Please keep in mind that this is going to copy the full path of your system, but all we want is from the static assets down.
So by copying here, you're going to get the full path to that. So let's go ahead and do it. You want to basically delete static_assets all the way up to here. So all you should have is the Loral blah, blah, blah, and the forward slash and the object. And then just to save time, let's copy and paste this guy here, and paste it on the second line. And then change object to mtl for the material. So for this particular guy here, we want to basically position him in the far back on a slightly to the right of the sun so we can have this one satellite that gives us some perspective into our scene.
So again, feel free to change it as you see fit. So this guy will be slightly to the right on the x axis, still level at the y, and then all the way to the back on the z axis, and then from the scale, I want it to be at one, so 0.01, like so. The rotateX I'm going to do a 30, again. You know, try different things here if you want to see different results, and how that will impact your own scene.
It's always fun to, you know, start changing these numbers and see how the models are going to look. The third one is the astronaut. So let's go ahead and do the same copy and paste here. So go to the object, right click, copy path. Paste this guy here. That one actually may have been faster just to type it because it's so really short, I guess, folder name, but again, feel free to do whatever you feel is right for you. Mtl, and for the coordinates for this guy, so this guy we want right smack in the middle of our scene.
So what we want to do is translate slightly to the left, slightly lower, because we still want to see some part of the sun, very slightly. And then slightly to the back, so it's not smack in the middle, because if you put everything as zero, zero, zero, it's going to be right where your view is in the scene. So if you've taken my learning React VR course, you'll see that if you put it at zero, it's basically where the viewer is.
So the object would be right in front of you. So what we want to do is basically put him slightly off from where the viewer is. The scale we'll put at 0.5, because this guy's already a little bit smaller than the other satellites. And I only want to rotate on the y axis at 180. So you can remove the rotate x. All right, save this. Let's go back to our scene. Refresh, and now you should see one after another appearing.
So again, the rendering of these models can differ from one system to another, and especially on the first render, because if you've never rendered this before, React VR needs to go ahead and just load the images with the material file, render the actual final model with all these images. So if it has never done it before, it can actually be slower for you than what you've seen here. And once this is done, then you can move into your 3D space so our astronaut is exactly where it should be. Our satellite, this is the biggest satellite of the three objects, so if this one would be here, and then at full scale it would fill the scene, literally, and then this satellite is the smaller one.
So good, now that we've got a scene with some characters we'll need to add a bit more to make it better. So let's move on.
- Designing an immersive multimedia experience
- Adding background, 3D, and text elements to your scene
- Adding animation
- Using state
- Optimizing and publishing the project