How To Export 3D Models With Their Animation From Blender And Import Them Into Your Three.js App

---
Article
---
---
The boilerplate that I'm using in my tutorials
---
Support the channel
---
Project files

[psy]

coming from a 3D backgound, three.js impresses me more and more 🤩🤩🤩
three tipps:

1. you would have only needed 20 frames for this animation, the frames from 20 to 40 are duplicates, remove them and then...
2. end the loop at 19 frames and not at 20, but leave the last keyframe at frame 20. This way you do not have duplicated frames (frame 1 and frame 20 are the same) which makes the animation stutter on looping-point.
3. In the timeline you can select all keyframes > right click > set interpolation mode > linear. This way the animation keeps playing at the same speed from start to end of the loop. Otherwise it will always slow down toward the loops looping-point (end-start) ;)

[losrobbosful]

Clean, clear and straight-forward. Perfectly instructed, well done!

[eugenem]

Big thanks for clear and straightforward tutorial. Other ones on Youtube either older than my grandma or unnecessary complicated. Kudos!

[apexcoder]

Really good stuff, best three js tutorial i've come across after a long search.

[plankalkulcompiler]

Very well explained. Exactly what I was trying to find. Thanks!

[adrianobarbet]

Man I love you bro holy shit you literally have a video on everything i needed

[antoinecontrerassalazar]

To optimise the code, you don't need to put the mixer condition each animate call function, just put in the last of the assetLoader.load(antaroUrl.href, function(gltf).

i will call only one time the animate function and not check each frame if the mixer is here

big thank for you tutorial, really that we needed !!

[tubazo]

Hello Wael: I learned quite a lot from your video! thank you for posting! I wonder if you can tell me how do I check the animation names contained in the gltf file. I know that you said it is the same name we enter in blender but my models don't work when I try "Find by Name". They only work with "forEach"... Can you show me how to check the "animations" array? or something like that...Thank you!!!

[SHUBHAMGUPTA-bcqs]

Really Helpful, Thanks

Just a small doubt, how do I make it so the animation happens only once. Thanks

[tinabremer]

Is it now possible to interact with your animated model on the web?
For example, change the rotation angle of a bone like in Blender?
What possibilities are there to control such movements with three js?

[jerrygreenest]

It is cool, great tutorial, but how to smoothly switch between animations? Say from walking to running, and vice-versa.

[bafsr]

so i made all animations work at once, which is what i want, but how could i add the feature so when clicking on an specific object from the scene, allows animation to go, and stop when clicking again ? any suggestions on that?

[andredantasilvapb]

Great material, congratz! Question: how do I load and see the materials of my imported object?

[dipankarsahoo]

This really helped brother, can you help me I have used ready player me's character imported it to mixam to auto rig it then downloaded one skin and other without skin just animations like sit to type, type to sit, sit to stand can you help me with how i can use blender to add these multiple animations to the character then export it and use it in three js can you please guide me through the step

[henrylazaga]

thanks for sharing. very helpful. how about if there's a subdivision modifier applied below the armature modifier? will it still work?

[ProfoundKnowledge]

What file can I download the 3D model with its animation in quaternius, 'casue when I click on one of the models in it, there's tons of files

[-MrHow-]

Hi man
You the best speaker in youtube
So clear
Simple
And a lot of useful information
You so amazing❤️❤️❤️
Just want ask
You can speak arabic?
سلام عليكم

[xColtHD]

Hey I have a question! I have a textured model, which is an armature, with underlying animation, pose, armature and mesh. However when I try to export this from Blender to Three.js I cant seem to acces the material properties like opacity. Do you know how I can solve this? TypeError: Cannot set properties of undefined (setting 'transparent')

[captainofthewhitetower]

Can you interact with the asset and also add widgets pop up?

[voyonkim]

It really helps a lot!! Thank you so much! I have another question. In my case there is multiple GLTF models, but it moves only one model . Could you let me know how to make move every models?