Loading Models (using Three.js) - Both Static and Animated!

Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/sim...
In this project we're going to be using Three.js and loading models from blender and various websites like Mixamo and Sketchfab. We'll step beyond the basics of a simple scene to add premade assets, loading models via different formats like gltf & fbx. The point here is to give you a simple example to serve as a starting point for working with 3D in Javascript.
What we'll cover:
* Three.js loaders, how to import and instantiate loaders in Three.js for loading models and other assets.
* Some great free resources for existing models.
* Using the loaders to load animation assets and applying them to loaded models.
Just treat this as a jumping off point for your own 3d projects, there's lots of ways you can go with this but it often helps to have a basic project you can build from.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.

[@simondev758]

If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch Or support me on patreon!: www.patreon.com/simondevyt

[@khao9377]

Thank you for providing me with all the knowledge and moral support

[@navjotsinghDhanoa]

Its 'cause of tutorials like these that make playing around with 3.js really fun. Thanks mate, keep up the good work :D

[@郭朋振]

Thank you, I am familiar with auto control program with c++. As a beginner of js and threes.js , I learned a lot from this series of videos.

[@nightfury8848]

You forgot to point out a very important detail for the animation to actually work, for whoever is painfully trying to figure it out like i was doing you need to update the mixer inside the RAF

[@autonate_ai]

This is dopeeee! Exactly what I've been looking for!

[@jerome-neareo]

Haha I like your tone man!

[@sukantagarwal6824]

I have been trying to implement this for the past 2 days. Thanks man!

[@ilnev3738]

Thanks for this lesson

[@simondev758]

No problem

[@valencefootball9740]

0:16 Those moves tho

[@simondev758]

heh

[@jesuskraisnik]

Nice tutorial, I just don't understand why did you initiate two FBXLoaders when you could reuse a first one?

[@traviswoolston8108]

Would have been handy for you to move the model without animations first but awesome video.

[@michaelkane1072]

Is there anybody who can explain about the character movement part?

[@scottonanski4173]

Man, I wish this was for absolute beginners.

[@fideltadeo]

Thanks for the tutorial. Can you please make a tutorial just for gltf from blender to Threejs.

[@simondev758]

Np! I'll add it to my ideas list.

[@codeMyster7]

Great Tutorial Loved It. Just one problem though. When I tried to import the GLTF loader from the URL, it gives me the error "Cannot use import statement outside a module" i don't know what I am doing wrong. Can you help me?

[@simondev758]

Just look at my index.html file and how I import main.js, your js needs to be running in a module.

[@codeMyster7]

@@simondev758 Thanks! This helped me. It started working now. But the problems don't stop there, I now get a CORS error. I hate CORS so much but I did not realize it applied to 3d models. Do you know how to fix this. And will this apply to all model types like FBX? Will the CORS still apply if I use the built-in object loader in three.js? I wanted to use GLTF because more models support it but, if the standard object loader will stop the CORS or just ignore it, do you know a good website that has free JSON models? Just watched your new Minecraft vid and I loved it. Thanks for the tutorials.

[@simondev758]

@@codeMyster7 CORS applies to all assets. If you're trying to load from another domain, you may have issues. None of this is in scope for that tutorial, or really any of the tutorials I've done. I'd recommend you just download the one you're trying to work with and using it locally. Nope, don't know where to get JSON models. Sorry!

[@codeMyster7]

@@simondev758 I downloaded the model from SketchFab and used it in my project in Brackets. I opened the HTML document as a file on google chrome. I don't see what could have gone wrong. I ran into a similar problem when I was trying to add image textures to some shapes, but I just used THREE.ImageUtils.crossOrigin = ''; this solved that problem. Thank you anyway for the help though!

[@quekZo95]

Really nice tutorial thanks. I have some questions regarding OOP programming and THREE.js. havent programmed in OOP for a while. Im doing everything functional in three.js but are there any benefits or is it just preference? I wanted to make some templates for me in OOP but im not that experienced in that paradigm.

[@simondev758]

I'm not aware of any benefits one way or the other. I happen to bias towards oop, mostly because of an entire career working with codebases using that.

[@quekZo95]

@@simondev758 ok thanks for the reply!

[@mayukhchanda5805]

Do you have any suggestions on how to improve performance when loading multiple models along with textures in mobile devices specifically Android ones?

[@suneel1875]

Hey mate thank you for this. I wanted to ask, so link the animated file separately? Where did you put it please let me know. And do you have code that has stops or resume the whole animation? Please link me that. Thank you!

[@eittorres]

This was hilarious 😂. Thank you

[@seymourbenjamin8591]

I've been trying to add My model but nothing works I've checked out your tutorial and a bunch of others I really confused about what I'm doing wrong. Are there any basic things I might have missed that might be causing this?

[@simondev758]

Super hard to say without seeing your code and files, do you have them hosted somewhere?

[@seymourbenjamin8591]

I figured It's out but thank you for being so quick to help great tutorial

[@anficyon]

awesome tuts

[@simondev758]

Glad you like them!

[@Cardnim]

this line caused me a lot of issues. Its not shown at all in your video, but the animations didnt play for me until I added it. Is that normal? this._mixers.map(m => m.update(timeElapsedS));

[@RmzPame]

where you add it?

[@antoniofuller2331]

Yes

[@prashantgarg3013]

Can we import whole 3d map as environment in which another 3d character model can move around?

[@simondev758]

Yep

[@jpek6198]

@SimonDev I have a problem - material.onBeforeRender is not a function How to fix it?

[@codybradley5652]

No errors but I can't seem to get my model to show up.. hmm

[@TusharNarkhede-WebGeek]

Really helpful tuts!!! can you share code as well ?

[@simondev758]

Oops sorry, here it is: github.com/simondevyoutube/ThreeJS_Tutorial_LoadingModels

[@khao9377]

@@simondev758 Best teacher ever

[@randikanonis9606]

Its working...Thank you

[@simondev758]

Welcome

[@navidgolforoushan3088]

awesome! ;)

[@simondev758]

thx!

[@Liamos_Prod]

Hey there I have a question, I'm new to Three.Js and coding in general, I downloaded the file you provided; and the zombie is walking, when I try to put './resources/rocket/Rocket_Ship_01.gltf' in : _LoadModel() { const loader = new GLTFLoader(); loader.load( Nothing happens, I can only zee the zombie, so I tryed taking off the lines related to the Animated model, and then I had no errors, but only a black screen, did smbdy already had this issue ? I can share my .js file if necessary... Thx a lot !

[@Liamos_Prod]

My bad I wen inside other stuff to take a look !

[@dlctrial7807]

Hey , my friend recommended my your channel and your beginner series is a good one to get started with the concepts. About character control , do you have any tutorial that combines pose estimation to character rigging ? Media pipe from google has an api for 3d pose . Any thoughts ?

[@mohammadshafiullah4006]

Nice! incase the model has lipsync functionality with audio, will that also be exported to Three.js ? Do we need to program anything additional in Three.js for Lipsync to work ?

[@simondev758]

Yeah, that's a totally different subject, you'll need to do a lot more work than what this tutorial covers.

[@sprites]

I would like to know how you made multiple instances of the same animated model in the background. Also why didn't you use a gltf animated instead of fbx?

[@simondev758]

I just instantiated multiple instances, see the code here: github.com/simondevyoutube/ThreeJS_Tutorial_LoadingModels/blob/master/main.js#L211 As for the format, think it was just whatever format it came in.

[@sprites]

@@simondev758 I browsed your source code. Is there no other way than to call THREE.GLTFLoader(); for every instance? Assuming you have many instances it would have to load the model every time. It seems like a waste of resources.

[@simondev758]

The ideal is yes, you'd have some sort of shared mesh geometry and only instance specific data like the skeleton state would need to be allocated. Believe there's a helper that let's you clone a skinned mesh in SkeletonHelpers, if you're interested. But I didn't include this since that's a more advanced topic and out of scope for a tutorial aimed at showing someone just how to load a model. Someone coming here is likely just trying to get off the ground with three.js and adding layers of additional complexity like optimal memory allocation strategies isn't helpful, in my opinion.

[@idofivethings6222]

I jst started coding, I have no clue what I'm doing, I do not understand the rocket.gltf part (most likely cause I'm dumb and 11 years old)

[@DesignrDude]

great tutorial!!! my character is getting getting super stretched though, any ideas? im trying to use the loading models tutorials folder

[@nabeeluppel5417]

Great tutorial man, but I ran into some issues with the animation, I keep getting the error "THREE.FBXLoader: Vertex has more than 4 skinning weights assigned to vertex. Deleting additional weights." and the animation doesn't run at all. Any advice?

[@archyt88]

google that error and you find a lot of information about how to solve any programming problem or use stackoverfllow or whatever

Hey, mate. Could you solve that issue with the Vertex?

[@nabeeluppel5417]

@ it doesn't effect anything, I just left it as is and everything worked fine

@@nabeeluppel5417 Thanks for answering. :) Ok, I will recheck my code. My model renders but there is not animation at all.

[@diffuusio4852]

@ You need to update the animation in your render function (_RAF). I'm just saying this so that the next guy doesn't have similar trouble.

[@mohanadbahaa7826]

hi, i was wondering how to load a 3d model that is animated but make the animation on command? so It stays static until the user clicks .

[@simondev758]

Shouldn't be hard to modify the source to do what you're asking. There's an example of user input in the "BasicCharacterControls" class, and if you look on line 241, you'll see where I play the animation.

[@christophervaca7116]

I am no longer best friends with python. New best friend is JavaScript.

[@simondev758]

lol

[@aliimranramzan9926]

hi can you tell me please how to make custom skeleton with doted points

[@claybowser]

this video makes three js look deceptively easy and i think it will be many years before we see three js in production because the documentation is probably some of the worst i've ever consumed

[@kidbrave_7673]

Thank you so much for providing us with content on where to look and where your functionality works, but could you possible build a feature from scratch on how you got your models to load and move?

[@simondev758]

Isn't that what this tutorial is?

[@kidbrave_7673]

@@simondev758 I understand it's a tutorial, but I have no idea how to build a model from scratch to finished. Most tutorials I watch starts from a blank boiler plate and an empty script page and builds the functionality from the the beginning. I loved the content you put up but I'm currently thinking of building a video game and would love to see your three.js code created from scratch and how it all connects with your html and css as well as how each step of functionality works throughout the video versus talking about it and show a section in your code.

[@simondev758]

@@kidbrave_7673 Ohhhh to build the models themselves, yeah man I actually don't know how to do the art really well. I kinda know the steps but way better off finding an artist on youtube who can step you through the process of modelling.

[@kidbrave_7673]

@@simondev758 Ok thank you brotha, I'll look into that. 😏🤙

[@michelleokolie6470]

Hey Simon, it's me again! I'm having another issue with the code. When I run it all, my model loads as if it should be animating, as in it gets in the stance but it does not animate. Any solutions?

[@simondev758]

Sounds like you're just not playing the animation?

[@michelleokolie6470]

@@simondev758 Figured it out, I was missing the mixer update

[@mustacheraptor2016]

I already made a model in blender with animations how would I go about exporting the model and the animation.

[@simondev758]

You should be able to just select either an FBX or GLTF export, and the options will have animation.

[@jeremyccc]

How would I make the model jump?

[@abdallahhosny8168]

why when i but my fbx model doesnt work

[@ARYANSINGH-mg3vu]

try to use fbx loader instead of gltf loader

[@itsbro9527]

For me, there are no errors, and console logging the fbx shows a model. However I don't see it rendered on the screen. Any ideas whats going on?

[@itsbro9527]

nvm

[@codybradley5652]

@@itsbro9527 what was it?

[@itsbro9527]

@@codybradley5652 sorry i had made major changes to my code to make it cleaner since then, so i forgot how the code had suddenly worked before...

[@itsbro9527]

i think it was a scaling issue, the fbx was too big

[@codybradley5652]

Fair enough lol

[@kiestarifa519]

Sorry dude, but I can't find a code , can you be so kind and send a direct link to your project?? I'm Trying to place my animation to scene but I'm very new in JS and have a lot of questions, and looks like your tutorial can help me to get out

[@simondev758]

On my phone, pretty sure this is it github.com/simondevyoutube/ThreeJS_Tutorial_LoadingModels

[@kiestarifa519]

@@simondev758 thanks a lot

[@6B26asyGKDo]

Why don't your files work dude. I downloaded them the html file is blank. I checked the paths to files were right

[@simondev758]

How are you loading the project? These are developer tutorials, so you need to need a developer setup. Let me know if you need help getting that going.

[@baymaxred4632]

why are u using fbx for model ? why not gltf loader?

[@simondev758]

The site I got the models from, Mixamo, doesn't have a gltf option.

[@kamilkacperek91]

Shame they closed Poly half year after this video.

[@camillesylla3359]

Hi thanks for the tutorial, not working for me got an error message : "material.customProgramCacheKey is not a function"

[@simondev758]

Is this with a different model? Searching for that error on google gets a few hits, guessing it's either a broken export or a problem with Three.js's importer. If the model is fine, I'd suggest filing a bug with three.js.

[@camillesylla3359]

@@simondev758 yes it's another model from Mixamo. I'll try the one that you used to see if it work. Another Question does FBX Animations work with gltf model ?

[@simondev758]

@@camillesylla3359 I can't say I've ever tried to mix them. In theory, it seems like it would be fine, in practice, well you'll have to try and tell me.

[@camillesylla3359]

@@simondev758 No problem I will tell you. So I tried with another FBX model and it don't work the prblem is maybe from the CDN that I found on the web. Yup I'll try but I gotta find a working FBXLoader first :)

[@simondev758]

@@camillesylla3359 I also know that mixamo recently upgraded their version of FBX that gets exported. Could be an incompatibility between three.js's importer and the version mixamo exports.

[@samratgupta731]

My model is loaded, but there is no animation, it is still, in T-pose, anyone help?

[@paulrichard77]

I'm also facing the same issue. Did you solve it?

[@samratgupta731]

@@paulrichard77 Yes, import the model and the action separately, then link the animation after loading the model.

[@arnekaufmann2825]

Am I the only one who i missing the package.json files in the github, dunno which depedencies I need tbh

[@simondev758]

There's no package.json, just the files in github are required to run this.

[@arnekaufmann2825]

@@simondev758 Okay then sorry for the dumb question but how, cause I only get it running with my own package.json and node. I mean just opening the index doesn't work, so how you do it?

[@arnekaufmann2825]

@@simondev758 nevermind found out it was an error with the cors policy being blocked, works now

[@cmcdonough2]

Thanks is glft better than fbx?

[@simondev758]

The three.js docs say they recommend gltf as the preferred format, so I tend to choose it over FBX if I can.

[@sumanboi]

1:06 last project? where can i see that tut?

[@simondev758]

kzbin.info/www/bejne/hoHag2qearihhac

[@sumanboi]

@@simondev758 arigatou

[@valencefootball9740]

Ohhh

[@simondev758]

:)

[@anyentinh]

i did exactly like the video and still get a black screen

[@simondev758]

Usually when people have reported this, it's been how they host the files. How are you hosting the project?