Model Loading

Three.js and WebGL 3D Programming Crash Course Three.js & WebGL 3D Programming
6 minutes
Share the link to this page
Copied
  Completed
In this video we learn how to load external models to make your world more vibrant. GitHub Source Code Link - https://github.com/SonarSystems/three.js-Crash-Course

Transcript

Hello, in this video we are going to cover model loading, model loading aka an object file, it could be a wavefront object could be a JSON object, it doesn't really matter, we are going to be loading in a JSON file. But the process is very similar for the files or the models. And as usual, if you are looking for a different method on doing something, go to the free j s.or. website, go to documentation class examples example is great as well filter what you're looking for. So it is a loader. That is what is used to load something in to three js.

And we are going to be using the object loader But imagine if you want it to load a colada file, you scroll down, it gives you some example code of how to use it, which is fantastic. Then it also shows you the methods that you can use with the collider loadout and what they do and the parameters That they take and the properties of the colada loader. So let's get to it. First of all, we need to include the object loader file. That is with the free j s master file, which you will have downloaded in the first video. If you haven't got it anymore, just redownload it.

One thing to note is make sure when you redownload a master file, or if you get, let's say a file from the source folder or from the examples to use in your project. Make sure you're always getting from the free JS version that you downloaded I let it be downloaded version 60 don't get it from the same version take the free the latest of in terms of the time you want to actually get a new file don't use the from 63 because there can be an old time all compatibility issues. Get it from the exact version that you downloaded You can get those back versions as most of us no problem. The only source loaders copy the object loader.js file. So what I'm going to do is showing finder, go to jail, paste that there object load up. I've already added some models.

I just got these off a model website. You can create it yourself exported converted wherever you want. So let's say this JSON file First of all, we need to include the script file that we just added her JS for four slash object loader saved up scroll down. We're going to do is do var loader equals new free dot object loader takes no parameters. And now we have to do loader dot load. And we are now loading our particular model.

So there are put some brackets semi colon, and then in here, we need to specify the model we want to load as a string. So this is models for slash, we're going to do head dot JSON first, comma, function. And in here, we're going to put object. And then finally we're going to see the ADD. object. So we're specifying what model we want to load.

This method gets called once the model is loaded, and then in here, we can do whatever we want. We may want to do extra tasks as well depending on our game before we add our object to the scenes on the save that go to our page. Refresh, my thinking can't see anything. If you just wait a moment, it loads. It's as simple as that. There we go, we have our crazy ass looking model.

Sophie zoom in a bit. We have a head of a particular individual car member who loves to go to a model website, which is really cool. But there's a bunch of and if you just type in 3d model websites online, you can get a bunch of websites that allow you to download it for free. Usually you have to sign up, it's free most of the time. So this is a bit dark. If you want to make a law lighter, you just add Lloyd chain already got some lighting right here.

So let's uncomment that refresh. And you can see we can see this dude's head a lot better now. It's a lot lighter. So that's important to load in models. This particular model, let me just open up The model folder is the head JSON, which also uses these texture files. You don't need to concern yourself with these.

But I want to show you the school dot JSON, which doesn't use any texture files, it just use this color. So if I go to my text data, changes to go dot JSON. Oh, sorry, it was a locator. Save that refresh. As you can see, we have our school loaded. This particular model was a lot bigger, hence why we was inside the model.

So let's go back and turn lighten up actually, this is a pretty bright object. Anyway, refresh. Go out. We have our crazy looking school right here, which didn't use any textures whatsoever. But it looks really really rare lipstick. And we can do to this whatever we want to we can move if we want to, we can do essentially whatever we want.

So that's it for model audit. If you have any questions, feel free to post them on our education platform. So not learning Dakota, UK for slash question dot php, or feel free to contact us in any way. There'll be a link in the description to the GitHub page with the source code from this video and the source code from every other video and it will include the models if you want to use the models that we use in this video to try out model Odin. Thank you for watching, and I hope you have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.