Three.js Importing Models Tutorial | How to Import GLTF Models in Three.js

3js makes it super easy to build complex 3d scenes on the web using just the base library i was able to make a 3d tic-tac-toe game a rubik's cube demo a 3d wordle clone and even an audio waveform visualizer but if you want to take your 3d coding skills to the next level you'll need to start working with external assets what's going on guys my name is suboptimal and in this coding tutorial we'll go over everything you need to know about importing 3d models in 3js let's jump right in so why would you want to import a 3d model now obviously if you're coding a complicated 3d game importing models is absolutely essential but importing a model can also be helpful when you're just getting started with 3js it can be an easy way to add much needed context to a 3d scene so for example last year i made this clone of the rosengan from naruto now i'm sure most of you already know what this is but for those that don't naruto is an anime and the rasengan is the main character's signature move looks something like this anyway i built what i thought looked like the rashengan but after further inspection i realized that it's pretty hard to understand what this blue sphere represents it could be a weird looking orb it could be a mono bottle it could be you know a gemstone from thanos it could be this thing from overwatch or it could just be a blue star from a galaxy far far away right it's hard to know exactly what a blue sphere represents so in order to fix this ambiguity i simply downloaded a 3d hand model from katarina zamay on sketchfab and added it to the scene all in under 10 lines of code and with this hand model you can clearly tell that this is supposed to represent the rashengan from naruto what i'm trying to say is that knowing how to import 3d models is essential whether you are a beginner or an advanced 3js developer so now that you guys understand the importance of importing models into your 3d scenes let's talk about this different type of files that are used to represent models so there is the gltf file which stands for graphics library transmission format there's the obg file there's fbx there's a voxel transmission file so basically there's a lot of different type of files that you can use to store these 3d objects the point of a 3d object is that it has a ton of these vertices so if you ever open one of these files up you're just going to see a ton of numbers so obviously they had to optimize the way that they stored this the one that is suggested at least for 3.s is the gltf format basically i just want you guys to know that there's multiple different types of formats that exist you can think of this to be like yaml or json if yamo and json files can have the same information they're just stored a little bit differently so just think of it that way i'm gonna go to sketchfab which is the place where i usually get my 3d models and here i just searched for dogs some of these you do have to pay for but a lot of them are freely downloadable as long as you give attribution we're going to be using this sheba model and here you can see the type of attribution that the author requires so just make sure that when you're downloading a model you're giving proper credit especially if you're going to put it in your project but anyway you can click download model we're going to be focusing on the gltf format and once you download the gltf format you're just going to get a zip file like this once you unzip it you're going to see something you know that looks sort of like this all you got to do is take this whole folder and put it into your project and so inside of 3.js here under the sixth lesson here we're going to create an assets folder and here i've imported the sheba folder so if you're sort of confused as to where i'm getting this code from just go to the 3ds repository on my github and i made separate folders for every single tutorial and the one that we're currently working on is the sixth import model tutorial the next step is to just get the sheba model loaded on the scene so we're gonna go to our test section and here i'm just commenting out the box geometry from the setup guide and i'm also going to import the gltf loader so i'm also importing some of the other loaders just so you guys can see what's available for example there's the obj loader there's the voxel loader but for this tutorial we're just going to be focusing on the gltf loader the other ones work pretty similar to this one so you know understanding how this one works you should be good to go with the other ones as well anyway we go to initialize it right over here and once we do we again just pass in wherever the gltf file exists and this is going to do all the heavy lifting for us it's going to read the file and this file contains like thousands of vertices so it's going to load all those in and create a scene for us after it loads all we gotta do is add it to our scene and then we get our shiba inu that looks like this and as you can see here it is very zoomed out so i do want to give a quick disclaimer that sometimes models that you get from sketchup don't load properly sometimes they're too big sometimes they're too small so just make sure that you zoom in or zoom out appropriately as you can see here our shiba model is super small so you know that when you initially load it you're going to want to make it a little bit bigger so how do we do that we can use the gltf scene that gets passed in as any other 2js scene so let me rotate it on the y-axis set the position a little bit above on the y-axis and also scale it so that when the model initially loads in we can see it more clearly so i'm going to save this and when i refresh the page you can see that you know the model is a lot closer and it is rotated a little bit on the y-axis this one is a pretty straightforward model so it's going to load pretty quickly and we don't really have to worry too much when we think about animating it but if you would load a really complex model it might take a couple seconds to initially load so what you can do if you want to say animate the model for example would be to create a variable like so just initialize it to empty and once the scene gets loaded you can sort of track the variable here and at the end you can animate it like so so here i'm going to animate the model once it's loaded because if you try to animate it before it's loaded it's just going to throw out a bunch of errors because again the scene won't exist because you know it might take a couple seconds for this function to run so let's reverse this and you can see here that our model is just going to be animated so that's going to be it for today hopefully now you guys have a better understanding of how to import 3d models into a 3js scene if you made it this far then i'd really appreciate it if you could just hit the like button and consider subscribing for more sub-health tool contents about 3js and 3d programming thanks for watching and i'll catch you guys next time you

Channel: Suboptimal Engineer

Views: 56,591

Keywords: suboptimal engineer, suboptimal software engineer, suboptimal, three js, three js tutorial, javascript, gamedex, three.js, coding for the metaverse, three js metaverse, metaverse three js, three.js metaverse, learn three js, three js gltf, three js gltf loader, three js gltf loader example, three js loading models, three js loading 3d models, three js 3d model format, three js 3d model example, three js load model, three js model loader, three js import model, three js model

Id: WBe3xrV4CPM

Length: 6min 58sec (418 seconds)

Published: Sat Apr 09 2022