Loading Models to AR

[00:00:00]
>> It is great that we have some shapes that we are running, but more interesting things to do is when you can import a model that is built, maybe even with animation. On our slides, if you go to the project section how to load 3D model, you can copy and paste the code instead of typing it, that might be a better way since we have been having issues with typing.

[00:00:36]
I already have the file here with AR.model, pretty much everything that's related to AR is exactly the same. In the case that on select when instead of creating a shape when we see the reticle, we are loading the model. So first thing that we do is import GLTF loader, and the model that we have should be under your disks and assets and models.

[00:01:14]
And one last thing to check in this case is your Ts config file should have the path for assets. Here in our own select function, again we are checking if the reticle is visible, but also we are checking if the model is loaded. So we set it to false at the beginning, and then once we load it, we are going to set it to true so that we don't load it twice.

[00:01:46]
This is kind of answering the question we had earlier about having multiple models in the same spot, if you are loading it just once, then you get rid of that issue. And for the models to be loaded we have the model loader, and we initiate a loading manager, this is going to control the way our loading is going to happen.

[00:02:16]
In our case, we have a GLTF loader, and we pass in the manager and we set the path to the assets. So in this case, I have the church Ayasofia from my hometown and we are going to add that model to our scene, once we add the model, then we will set model loader to true.

[00:02:48]
So as on select function, we have the loader that loads, the name of the model itself. And then the path where it is going to be added to it, the path that we gave to our GLTF loader. We've had a little fun, we have a callback function, when we have the GLTF, we set the position of the GLTF, the model itself from the matrix position from the reticle matrix.

[00:03:23]
So, if you remember we were looking for the reticle and anytime if we have both reticle and moral then we place it in the exact location of the reticle, and set the model loader to true. And we have a error function that you can add, you can also add different on start, on load, on progress functionality.

[00:03:52]
So if you want to for example display a waiting wheel, then you can use these on progress and how much progress it is, you can display it here. Okay, and let's try to run this one, now I'm going to change in my HTML file under this index HTML, instead of the ar.js I'm going to run the aAR model.js, Okay, and let's see, it should work, I'm just going to restart my server just in case because whenever you change, I forgot to say, whenever you change HTML, it doesn't necessarily pick up, NPM, run dev.

[00:04:49]
Okay, now we have the server running on port 3000, we should be able to inspect it, so I'm going to reload it here, and let me open up my view, I'm looking for a surface, once I find it, click on it, and voila, my model is loaded. But it's frozen.

[00:05:38]
All right, this is a very pretty big model, this is from google.poly.org, maybe that is why, maybe because we are doing a lot of stuff, I'll try it again. Please walk around, in my house I was able to go from room to room and the model was still workable inside it, which was really nice to see.

[00:06:11]
And the scale of it, you can change it, you can even put some controls so that people can have a smaller version of it or a bigger version of it and see the difference between the outside and the inside.