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) ;)
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 !!
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.
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?
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!!!
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? سلام عليكم
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
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.
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
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?
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.
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
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?
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.
@@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.
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?
•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
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
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
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?
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.
@@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(); }); });
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 }
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')
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
@@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?
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.
@@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
@@0scarDev 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(); } );
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. 😁.
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.
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) ;)
Thanks
Big thanks for clear and straightforward tutorial. Other ones on UA-cam either older than my grandma or unnecessary complicated. Kudos!
🤣🤣🤣🤣🤣🤣🤣
Clean, clear and straight-forward. Perfectly instructed, well done!
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 !!
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.
Really good stuff, best three js tutorial i've come across after a long search.
Very well explained. Exactly what I was trying to find. Thanks!
No problem!
Man I love you bro holy shit you literally have a video on everything i needed
Exactly what I need!!! Thanks!
Awesome! Thank you so much!
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?
when i put mixer.update() in animate function, mine is : tick() . it results undefined.
and it says. mixer.update() is not a function.
if ( mixer ) mixer.update( clock.getDelta() );
well done smooth explanation
🙂🙂🙂
Thank you Houssem, welcome to the channel 😚
Thanks for sharing very useful 🤩😃
It is cool, great tutorial, but how to smoothly switch between animations? Say from walking to running, and vice-versa.
bro is rapping 💀
Nice.
Thank you!
Thank you!
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!!!
Very clear!
Glad you think so!
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?
سلام عليكم
Happy to hear that! Thank you!
بالطبع, وعليكم السلام ورحمة الله وبركاته ورمضان مبارك
Really Helpful, Thanks
Just a small doubt, how do I make it so the animation happens only once. Thanks
why light is low in my three js even if it's pointlight, spotlight i'm always having problem
Set the intensity to a high value like 10000 or more.
good
Thank you!
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
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.
if ( mixer ) mixer.update( clock.getDelta() );
Can you interact with the asset and also add widgets pop up?
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
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
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?
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.
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
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?
Hii
but how to give the skin color hair textures and all please reply ?
I'm doing a Three.js App in codepen and I get the following error: "mixer is undefined" inside the animate function.
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.
@@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.
Are you using the same model I used in the video?
Great material, congratz! Question: how do I load and see the materials of my imported object?
Thank you André
The answer to question is in this video: ua-cam.com/video/H-LZ90pZ3rY/v-deo.html
@@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);
You are amazing
Thank you Ahmed!
@@WaelYasmina I want to talk to you
Great!
Thank you Hedi, and welcome to the channel! :D
thanks for sharing. very helpful. how about if there's a subdivision modifier applied below the armature modifier? will it still work?
Yes of course
@@WaelYasmina Wow! Cool. Looking forward to test it myself. Good day, bro.
How to export crawler animation to threejs
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?
•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
@@WaelYasmina Thank you!
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
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
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?
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.
@@WaelYasmina I did it but it's still move one model. I don't know why... ToT
Do you get any error messages in the console?
If not, show me a snippet of your code.
@@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();
});
});
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
}
عفية عليك 👍👍👍👍👍👍
!شكرا
I think I need to watch some of your tutorials to get better at modeling though :D
@@WaelYasmina 🤣🤣🤣 صدقني انها مو للتعليم
Just Timelapses of what happened
Hi, what if you check the compression checkbox ? I just can't make it work with draco loaders
did you solved the problem with draco loader ? i am also cant make it work no matter what I do
My upcoming tutorial is going to be about this. It's gonna be ready in a couple days.
@@WaelYasmina Thank you. I am waiting for it then
how to add GUI for each animation take , like one button to play dog barking and the other button for tail shaking ?
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.
@@WaelYasmina would you please make that tutorial sir?
@@WaelYasmina coz I have no background for coding
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.
@@ManojChauhan-kl3dh Did you manage to get the project work? I mean without what you wanted to achieve.
mixer.update(clock.getDelta);
error: Uncaught TypeError: can't access property "update", mixer is undefined
clock.getDelta(), you forgot the brackets
if ( mixer ) mixer.update( clock.getDelta() );
What about textures? Thanks!
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')
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
@@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?
9:35 why not just to call animation function after model is loaded?
Do you mean calling animate within the load callback function?
@@WaelYasmina yes, exactly. I made it in this way and it works well
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.
@@WaelYasmina I got it, thank you for explanation. In my case, I have just one object in the scene :)
hey, real quick question. is there a way to do this when the model has textures included?
It's the same way. The model having textures or not should not have any impact on the process.
@@WaelYasmina It wasn't correctly loading for me. Took me to add the lightning:
const light = new THREE.AmbientLight(0x999999);
scene.add(light);
Hi. How to fix "Cannot read properties of undefined (reading 'update')" at line mixer.update(clock.getDelta()); .....Thanks so much :3
Hi.
Did you add an if statement right before that line?
if(mixer)
@@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
@@WaelYasmina Thanks sir, I successfully ran .
@@datneanimation2336 Im having the same problem
@@0scarDev 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();
} );
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'play')
Double check if your gltf contains animations
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. 😁.
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.
Man!
Not sure if it is the best idea for you, the tutor to point out how bad you did the modelling and rigging .
I had to do it before people start pointing it out lol
ZOV
why is it all black?
Add some light to your scene.
Thank you !