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) ;)
@hasj
Жыл бұрын
Thanks
@losrobbosful
Жыл бұрын
Clean, clear and straight-forward. Perfectly instructed, well done!
@eugenem529
Жыл бұрын
Big thanks for clear and straightforward tutorial. Other ones on KZitem either older than my grandma or unnecessary complicated. Kudos!
@damithrathnayaka9324
Жыл бұрын
🤣🤣🤣🤣🤣🤣🤣
@antoinecontrerassalazar
Жыл бұрын
To optimise the code , you don't need to put the mixer condition each animate call function, just put renderer.setAnimationLoop(animate); 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 !!
@WaelYasmina
Жыл бұрын
Thank you Antoine The problem with that is that the loading time of the entire app will be dependent on the loading process of that model. Furthermore, if the loading process of the asset fails the app won't work at all.
@apexcoder6975
6 ай бұрын
Really good stuff, best three js tutorial i've come across after a long search.
@plankalkulcompiler9468
2 жыл бұрын
Very well explained. Exactly what I was trying to find. Thanks!
@WaelYasmina
2 жыл бұрын
No problem!
@adrianobarbet3282
Жыл бұрын
Man I love you bro holy shit you literally have a video on everything i needed
@martingreler6236
8 ай бұрын
Exactly what I need!!! Thanks!
@jerrygreenest
7 ай бұрын
It is cool, great tutorial, but how to smoothly switch between animations? Say from walking to running, and vice-versa.
@donnyjoe7653
5 ай бұрын
Awesome! Thank you so much!
@tinabremer9544
9 ай бұрын
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?
@hadzikmochammadsofyan2603
Жыл бұрын
bro is rapping 💀
@JuanGabrielOyolaCardona
Жыл бұрын
Thanks for sharing very useful 🤩😃
@mehmetbaran3447
Жыл бұрын
when i put mixer.update() in animate function, mine is : tick() . it results undefined. and it says. mixer.update() is not a function.
@shredpuppy
6 ай бұрын
if ( mixer ) mixer.update( clock.getDelta() );
@houssemtej
Жыл бұрын
well done smooth explanation 🙂🙂🙂
@WaelYasmina
Жыл бұрын
Thank you Houssem, welcome to the channel 😚
@tubazo23
Жыл бұрын
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!!!
@-MrHow-
2 жыл бұрын
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? سلام عليكم
@WaelYasmina
2 жыл бұрын
Happy to hear that! Thank you! بالطبع, وعليكم السلام ورحمة الله وبركاته ورمضان مبارك
@filipe994
Жыл бұрын
Thank you!
@Alex-hk5qo
2 жыл бұрын
Very clear!
@WaelYasmina
2 жыл бұрын
Glad you think so!
@brunoriyuoficial
2 жыл бұрын
Nice.
@WaelYasmina
2 жыл бұрын
Thank you!
@SHUBHAMGUPTA-bc7qs
Жыл бұрын
Really Helpful, Thanks Just a small doubt, how do I make it so the animation happens only once. Thanks
@andredantasilvapb
2 жыл бұрын
Great material, congratz! Question: how do I load and see the materials of my imported object?
@WaelYasmina
2 жыл бұрын
Thank you André The answer to question is in this video: kzitem.info/news/bejne/qWOCwG1mqYxkpY4
@andredantasilvapb
2 жыл бұрын
@@WaelYasmina I added the light (it was missing in the code) and it did the trick: const light = new THREE.AmbientLight(0x999999); scene.add(light);
@dipankarsahoo7119
Жыл бұрын
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
@captainofthewhitetower
7 ай бұрын
Can you interact with the asset and also add widgets pop up?
@ximenagonzalez5956
2 жыл бұрын
I'm doing a Three.js App in codepen and I get the following error: "mixer is undefined" inside the animate function.
@WaelYasmina
2 жыл бұрын
That's because you probably defined the mixer variable in the load callback function. What you need to do instead is define mixer before calling load. Then assign the mixer instance to it inside load.
@ximenagonzalez5956
2 жыл бұрын
@@WaelYasmina I did the same way as you did in the video: const assetLoader = new GLTFLoader(); var mixer; assetLoader.load(monkeyUrl.href, function(gltf) { const model = gltf.scene; scene.add(model); mixer = new THREE.AnimationMixer(model); const clips = gltf.animations; const clip = THREE.AnimationClip.findByName(clips, 'HeadAction'); // Play a certain animation // const clip = THREE.AnimationClip.findByName(clips, 'HeadAction'); const action = mixer.clipAction(clip); action.play(); // Play all animations at the same time // clips.forEach(function(clip) { // const action = mixer.clipAction(clip); // action.play(); // }); }, undefined, function(error) { console.error(error); }); const clock = new THREE.Clock(); function animate() { mixer.update(clock.getDelta()); renderer.render(scene, camera); } renderer.setAnimationLoop(animate); I'm still getting the same error.
@WaelYasmina
2 жыл бұрын
Are you using the same model I used in the video?
@damithrathnayaka9324
Жыл бұрын
@acnimatorstudio7487
2 жыл бұрын
good
@WaelYasmina
2 жыл бұрын
Thank you!
@henrylazaga
2 жыл бұрын
thanks for sharing. very helpful. how about if there's a subdivision modifier applied below the armature modifier? will it still work?
@WaelYasmina
2 жыл бұрын
Yes of course
@henrylazaga
2 жыл бұрын
@@WaelYasmina Wow! Cool. Looking forward to test it myself. Good day, bro.
@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
@ahammedmishal1622
Жыл бұрын
Hii but how to give the skin color hair textures and all please reply ?
@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?
@dizzybeepot9856
Жыл бұрын
What about textures? Thanks!
@hediabed6109
2 жыл бұрын
Great!
@WaelYasmina
2 жыл бұрын
Thank you Hedi, and welcome to the channel! :D
@MRWOLF-rd6tm
8 ай бұрын
why light is low in my three js even if it's pointlight, spotlight i'm always having problem
@WaelYasmina
8 ай бұрын
Set the intensity to a high value like 10000 or more.
@lius-mb7gb
Жыл бұрын
How to export crawler animation to threejs
@mahmudhussinmohamed6455
2 жыл бұрын
Wael hope you doing fine , im facing an issue about expert blender camera to three.js along with the model and the keyframes can you guide me here or do tutorial about that? many thanks
@WaelYasmina
2 жыл бұрын
Hello Mahmud. I haven't actually experimented with camera animation from Blender. And I would love to make a tutorial on that interesting subject but I can't right now, unfortunately. Having said that, I suggest you check these out: blender.stackexchange.com/questions/234796/how-to-export-camera-animation-in-blender-to-three-js blender.stackexchange.com/questions/191285/gltf-export-get-scene-camera discourse.threejs.org/t/how-do-i-load-the-camera-from-blender/26464/3
@eastrasmann
2 жыл бұрын
very cool👍 IDK if you take fan suggestions for SFM or blender. But I'm wondering if you are possibly down to create an animation using the season 2 model of Kenny and the season 2 Jane model from TWD (Telltales the walking dead) videogame series. Or if The idea could be where Kenny and Lilly or instead Jane go on a hiking on foot adventure walking around across a map exploring an outside OR INSIDE map or whatever and at the end of their adventure kill a group of zombies together melee style or with fists.make it as long or as short as you want. use the Kenny player model and npc. Then search up Jane player model and NPC. 😁.
@WaelYasmina
2 жыл бұрын
I wish I could but I'm still a newbie to Blender lol. I love the walking dead, it's a fantastic game! I played only 2 seasons though since my old graphics card is dead and I don't think my current one could run it or I'd finish the rest of the seasons.
@tinabremer9544
10 ай бұрын
I want to visualize a 3D cad model with react js. The model is a machine that is supposed to perform movements. It must perform rotations around a shaft or at joints. My question now is, can I have these movements executed in Blender and can I then access these movements via Blender in react.js? If I insert the model normally with reacts.js I cannot access the individual parts. Do I have to render the model in Blender first so that the movements can then be executed with React.js?
@WaelYasmina
10 ай бұрын
You can extract the rotations as animations the exact same way I did in this video. Unless you want to make the amount of rotations controlable by key events. If that's the case I have a tutorial on that on my to-do list but unfortunately it won't be before a couple weeks.
@tinabremer9544
10 ай бұрын
Yes, I would like to be able to set the rotations manually. For example, set the angle of the rotation as required. Thank you very much, it would be very helpful @@WaelYasmina
@ahmedfarooq7253
2 жыл бұрын
You are amazing
@WaelYasmina
2 жыл бұрын
Thank you Ahmed!
@ahmedfarooq7253
2 жыл бұрын
@@WaelYasmina I want to talk to you
@manoterasfloweskultor
Жыл бұрын
I have an error and I don't know why the animations work well for me but then in the Google console TypeError: Cannot read properties of undefined (reading 'update') at animate
@WaelYasmina
Жыл бұрын
You're probably using a different variable name for the camera controls. Make sure the one in the animate function and the one that assigned the orbit controls to are the same.
@shredpuppy
6 ай бұрын
if ( mixer ) mixer.update( clock.getDelta() );
@voyonkim
2 жыл бұрын
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?
@WaelYasmina
2 жыл бұрын
No problem! You're going to repeat the same steps for each model. Which means that you need to call load for every model and create a new mixer for each one of them.
@voyonkim
2 жыл бұрын
@@WaelYasmina I did it but it's still move one model. I don't know why... ToT
@WaelYasmina
2 жыл бұрын
Do you get any error messages in the console? If not, show me a snippet of your code.
@voyonkim
2 жыл бұрын
@@WaelYasmina There is no error in the console. I'll attach the snippet of my code. I really appreciate your help. function init() { //models ------------------- const loader = new GLTFLoader() var cha; loader.load("assets/models/Cha.glb", function (gltf) { cha = gltf.scene; cha.position.set(1, 3, -2); cha.rotation.set(-0.3, -0.6, 0.3); cha.name = "cha"; group.add(cha); // //console.log( gltf); //////////this code also working well, but it moves only one model as like the sentece below. // mixer = new THREE.AnimationMixer( gltf.scene ); // const action = mixer.clipAction( gltf.animations[0] ); // action.play(); mixer = new THREE.AnimationMixer( gltf.scene ); const clips = gltf.animations; clips.forEach(function(clip) { const action = mixer.clipAction(clip); action.play(); }); }); var bre; loader.load("assets/models/Bre.glb", function (gltf) { bre = gltf.scene; bre.position.set(2.8, 4, 5); bre.rotation.set(-0.3,-0.2,0.4); bre.name = "bre"; group.add(bre); mixer = new THREE.AnimationMixer( gltf.scene ); const clips = gltf.animations; clips.forEach(function(clip) { const action = mixer.clipAction(clip); action.play(); }); });
@WaelYasmina
2 жыл бұрын
As I said you're using the same mixer for both models. function init() { //models ------------------- const loader = new GLTFLoader() var cha; var chaMixer; loader.load("assets/models/Cha.glb", function (gltf) { cha = gltf.scene; cha.position.set(1, 3, -2); cha.rotation.set(-0.3, -0.6, 0.3); cha.name = "cha"; group.add(cha); // //console.log( gltf); //////////this code also working well, but it moves only one model as like the sentece below. // mixer = new THREE.AnimationMixer( gltf.scene ); // const action = mixer.clipAction( gltf.animations[0] ); // action.play(); chaMixer = new THREE.AnimationMixer( gltf.scene ); const clips = gltf.animations; clips.forEach(function(clip) { const action = chaMixer.clipAction(clip); action.play(); }); }); var bre; var breMixer; loader.load("assets/models/Bre.glb", function (gltf) { bre = gltf.scene; bre.position.set(2.8, 4, 5); bre.rotation.set(-0.3,-0.2,0.4); bre.name = "bre"; group.add(bre); breMixer = new THREE.AnimationMixer( gltf.scene ); const clips = gltf.animations; clips.forEach(function(clip) { const action = breMixer.clipAction(clip); action.play(); }); }); var clock = new THREE.Clock(); function animate() { var delta = clock.getDelta() if(chaMixer) chaMixer.update(delta); if(breMixer) breMixer.update(delta); //render and bla bla }
@GansShir
2 жыл бұрын
How do you define "idle" state of the dog, and then go from "idle" to "barking" and back to "idle" ? Another question, if I want to make the dog lay on the ground (let's call this state idle2) and "bark" at the same time. Is this possible?
@WaelYasmina
2 жыл бұрын
•if I want to make the dog lay on the ground (let's call this state idle2) and "bark" at the same time. Is this possible? -> It is possible. //This block plays the idle animation const clip = THREE.AnimationClip.findByName(clips, 'idle'); const action = mixer.clipAction(clip); action.play(); //This plays the bark animation const clip2 = THREE.AnimationClip.findByName(clips, 'bark'); const action2 = mixer.clipAction(clip2); action2.play(); • How do you define "idle" state of the dog, and then go from "idle" to "barking" and back to "idle" ? -> Just use this block of code: //You choose which animation you want to play const clip = THREE.AnimationClip.findByName(clips, 'idle'); //This adds the clip to the mixer const action = mixer.clipAction(clip); //This plays the animation action.play(); Then call the stop method to stop the idle animation that you created and started prior to this animation. threejs.org/docs/#api/en/animation/AnimationAction.stop
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'play')
@WaelYasmina
2 жыл бұрын
Double check if your gltf contains animations
@xColtHD
2 жыл бұрын
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')
@WaelYasmina
2 жыл бұрын
Hi Matthijs! If you have the same code as I do, the model variable should have a *children* array containing a list of objects. Each one should have a *material* property (if it has a material) in which you can find the opacity. Example: model.children[0].material.opacity
@xColtHD
2 жыл бұрын
@@WaelYasmina Thank you so much for help. This should indeed be the way. If I load the model in the online Three.js Editor, it works. Animation + Texture. Also if I dont try to acces the property of the material of this model, it works within my project as well. I think it has to do with Three.js being unable to read my image texture, or apply transparency to it.. Can I maybe send you an email with prtscreens?
@fibredeneige
2 жыл бұрын
Hi, what if you check the compression checkbox ? I just can't make it work with draco loaders
@mehmetbaran3447
Жыл бұрын
did you solved the problem with draco loader ? i am also cant make it work no matter what I do
@WaelYasmina
Жыл бұрын
My upcoming tutorial is going to be about this. It's gonna be ready in a couple days.
@mehmetbaran3447
Жыл бұрын
@@WaelYasmina Thank you. I am waiting for it then
@KristianTheDesigner
Жыл бұрын
Not sure if it is the best idea for you, the tutor to point out how bad you did the modelling and rigging .
@WaelYasmina
Жыл бұрын
I had to do it before people start pointing it out lol
@shanelucian5735
2 жыл бұрын
hey, real quick question. is there a way to do this when the model has textures included?
@WaelYasmina
2 жыл бұрын
It's the same way. The model having textures or not should not have any impact on the process.
@andredantasilvapb
2 жыл бұрын
@@WaelYasmina It wasn't correctly loading for me. Took me to add the lightning: const light = new THREE.AmbientLight(0x999999); scene.add(light);
@rdawo6408
2 жыл бұрын
عفية عليك 👍👍👍👍👍👍
@WaelYasmina
2 жыл бұрын
!شكرا I think I need to watch some of your tutorials to get better at modeling though :D
@rdawo6408
2 жыл бұрын
@@WaelYasmina 🤣🤣🤣 صدقني انها مو للتعليم Just Timelapses of what happened
@dimitrynevermind7804
2 жыл бұрын
9:35 why not just to call animation function after model is loaded?
@WaelYasmina
2 жыл бұрын
Do you mean calling animate within the load callback function?
@dimitrynevermind7804
2 жыл бұрын
@@WaelYasmina yes, exactly. I made it in this way and it works well
@WaelYasmina
2 жыл бұрын
The problem with that is that if the loading process of your model fails, the entire animation of your scene's components will fail. On the other if you keep the animate function outside the scope of the load callback function, the failure of the model loading won't affect the rest of the scene.
@dimitrynevermind7804
2 жыл бұрын
@@WaelYasmina I got it, thank you for explanation. In my case, I have just one object in the scene :)
@ManojChauhan-kl3dh
2 жыл бұрын
how to add GUI for each animation take , like one button to play dog barking and the other button for tail shaking ?
@WaelYasmina
2 жыл бұрын
You would need to create an action for every clip/animation. Then create a button and use it to call play() for each specific clip.
@ManojChauhan-kl3dh
2 жыл бұрын
@@WaelYasmina would you please make that tutorial sir?
@ManojChauhan-kl3dh
2 жыл бұрын
@@WaelYasmina coz I have no background for coding
@WaelYasmina
2 жыл бұрын
I have a plan for making an animation related tutorial after the upcoming one. So I'll see if I can make a section for this in it. I'll let you know.
@WaelYasmina
2 жыл бұрын
@@ManojChauhan-kl3dh Did you manage to get the project work? I mean without what you wanted to achieve.
@datneanimation2336
2 жыл бұрын
Hi. How to fix "Cannot read properties of undefined (reading 'update')" at line mixer.update(clock.getDelta()); .....Thanks so much :3
@WaelYasmina
2 жыл бұрын
Hi. Did you add an if statement right before that line? if(mixer)
@datneanimation2336
2 жыл бұрын
@@WaelYasmina Thanks sir. I added if statement. it seems to work. But my program show "Cannot read properties of null (reading 'play')"... What can I do ? Thanks
@datneanimation2336
2 жыл бұрын
@@WaelYasmina Thanks sir, I successfully ran .
@OscarD3v
2 жыл бұрын
@@datneanimation2336 Im having the same problem
@datneanimation2336
2 жыл бұрын
@@OscarD3v Oh. This is my code // Create an AnimationMixer, and get the list of AnimationClip instances mixer = new THREE.AnimationMixer( model2 ); const clips = gltf.animations; // Play a specific animation const clip = THREE.AnimationClip.findByName( clips, 'RigAction' ); const action = mixer.clipAction(clip); // action.play(); // Play all animations clips.forEach( function ( clip ) { mixer.clipAction( clip ).play(); } );
Пікірлер: 128