This has been one of the most popular videos so I'm working on a new character animation video that includes multiple animations controlled by input, and blending between animations. Leave a comment if there's anything specific you'd like to know more about and I'll try to include it.
Love the video, I personally would love to see how to control animations and blend between them but also how to keep the character's new position/state after playing an animation, instead of looping endlessly. Looking forward to the next one!
Hey this video is amazing and when I use your gbl and component everything works, but when I follow the video and use my own, it doesn't load in. Any thoughts as to why? I used the same character and followed steps exactly just using a different animation
Is it possible to display the current position during the animation? For example, if I want to manually set the angle by which the arm should be rotated. For example to manually change the rotation angle of the bon (arm) which i created in blender.
Great Content, I'm a React Developer and I do blender for fun sometimes, this is really great project. I wonder if you could guide on exporting multiple different animation to the model
I am working on some new updated content using the latest version of react-three-fiber that will include covering this topic. I'll leave a follow up comment here when that video comes out.
@@CodeWorkshops Hey great videos, thanks! I also need to know how to attach multiple animations to the same model. Did you finish this video? Thanks! :)
Great content. Would appreciate it if you could zoom in on anything with text like code editor, file explorer etc. while recording since even for me on a 24" 1080p monitor I struggled to read it.
I am not able to export the model correctly , after export it only show black or white circle, tried to join them together but nothing works. its been 2 days please help, i have to submit project
Indeed it is. In fact, if you look in the Code Sandbox for the finished project there is another file called Sphere.js. If you replace the Kick component with the Sphere component you will see an example of an animation with two actions on it. You can even click on the Sphere to switch actions. In Blender, you will need to use the action editor to attach all of the actions you want to be exported.
@@CodeWorkshops Sorry, blender newbie... when I go in action editor and switch to kick action, it removes tpose animation. When finishing process, I see only one action in the log. How can I add the new animation, instead of replacing? Do I need to add new action? or push down into nla stack? That would be super nice to embed multiple animations , but I did not understand how to add multiple :-)
Such a great video ! Question, I've imported a 3D model and in blender, the animation is inside a NLA/task 001 and this can't be rename, so in the object from fiber, the animation is called "task 001" but with a space, how am I suppose to call it nowing I can't use space when I call the play method ? actions.task 001.play() is impossible
The gltf will have renamed the action for you to avoid spaces. You can find the name by console logging the value of actions at any point in your component after calling the useAnimations hook. That will log the shape of the actions object to your console and show you the name of the action you should use. Thanks for the great question, I hope that helps.
@@CodeWorkshops ok, so I tried to console logging the value and it's still Task 001 in the actions. Is there anyway I could send you the model I'm trying to use ?
@@sam974fe In javascript, you can also address object properties with square brackets like this. action['Task 001'] You could try that. Happy to chat on Discord too if you want to follow up, the link to join can be found on the channel page.
Since this video was released Drei released an update that changed the import paths. That could be the issue. You might want to try changing any import statements to import from "@react-three/drei" and not include any paths like "@react-three/drei/useAnimations" If you still are having issues after that there are people who can help out in the Channel Discord.
Thanks for calling this out. The drei package has been updated and changed import paths since this tutorial was recorded. You should be able to fix it by removing /OrbitControls and importing directly from "@react-three/drei/OrbitControls" This applies to any other imports from drei. Here's a code sandbox updated with all latest version packages and fixed imports. codesandbox.io/s/react-three-fiber-importing-scenes-with-actions-from-blender-updated-npfcs?file=/src/App.js
Hi Fritz, you can see an example of switching animations in this code sandbox. codesandbox.io/s/react-three-fiber-animation-mixer-gm4fx I also have a video about this code sandbox which shows how to switch between multiple animations. Hope it's helpful.
Hi. I'm following your tutorial but got stuck on the animation part. I downloaded a model from the internetz so I'm not sure what's the animation called even using console.log: {} 05_Colibri_Bird.001Action: (...) 05_Colibri_Bird.001Action.001: (...) 05_Colibri_Bird.001Action.003: (...) ArmatureAction: (...) ArmatureAction.002: (...) get 05_Colibri_Bird.001Action: ƒ get() get 05_Colibri_Bird.001Action.001: ƒ get() get 05_Colibri_Bird.001Action.003: ƒ get() get ArmatureAction: ƒ get() get ArmatureAction.002: ƒ get() [[Prototype]]: Object
This has been one of the most popular videos so I'm working on a new character animation video that includes multiple animations controlled by input, and blending between animations. Leave a comment if there's anything specific you'd like to know more about and I'll try to include it.
Love the video, I personally would love to see how to control animations and blend between them but also how to keep the character's new position/state after playing an animation, instead of looping endlessly. Looking forward to the next one!
waiting for this!
Hey this video is amazing and when I use your gbl and component everything works, but when I follow the video and use my own, it doesn't load in. Any thoughts as to why? I used the same character and followed steps exactly just using a different animation
third person camera following a animating model would be amazing if possible!!
thank you so much! I'd love to see more react three fiber. ur like the only channel that does stuff with react three fiber
There will be more coming soon! Working on a new tutorial now.
great, simple straight to the point just what I needed!
Thank you very much, I had issue with animations on r3f
Thank you soo much for this! I was looking like crazy a way to find out the name of the animation!!!! Thank you!
Hey, i really love this video and i would like to see more of the react three fiber, love the content
I’m glad it was helpful! Got a new R3F video coming soon on adding a physics system to a scene.
cool brother i really love it❣
Is it possible to display the current position during the animation?
For example, if I want to manually set the angle by which the arm should be rotated. For example to manually change the rotation angle of the bon (arm) which i created in blender.
Great Vedio
awesome tutorial thank you so much 🤟
Beautiful
Thanks, you saved my life!
So glad it was helpful!
Great Content, I'm a React Developer and I do blender for fun sometimes, this is really great project.
I wonder if you could guide on exporting multiple different animation to the model
I am working on some new updated content using the latest version of react-three-fiber that will include covering this topic. I'll leave a follow up comment here when that video comes out.
@@CodeWorkshops looking forward))
@@CodeWorkshops Hey great videos, thanks! I also need to know how to attach multiple animations to the same model. Did you finish this video? Thanks! :)
Great content. Would appreciate it if you could zoom in on anything with text like code editor, file explorer etc. while recording since even for me on a 24" 1080p monitor I struggled to read it.
Thank you for the feedback, I'll keep that in mind for the next video.
Hi. It says: SyntaxError: Unexpected token K in JSON at position
love your content
Thank you! 😃
I am not able to export the model correctly , after export it only show black or white circle, tried to join them together but nothing works. its been 2 days please help, i have to submit project
Thank you of France ;) ;)
Great tutorial !
Great content. One question though, How to add velocity to this character?
can you please teach about how to import OBJ in React? Thank you so much
cool, but how do we play multiple actions at once? I can't seem to user traverse or foreach with it.
how to add multiple animation in blender, and play it with condition in react three
i can't play the animation..it throws an error "Cannot read properties of undefined (reading 'play')"..any help?
tks u very much love u
Thank you!
Hi, nice job, very instructive... Is it possible to load multiple animations in the same model? Happy 2021
Indeed it is. In fact, if you look in the Code Sandbox for the finished project there is another file called Sphere.js. If you replace the Kick component with the Sphere component you will see an example of an animation with two actions on it. You can even click on the Sphere to switch actions. In Blender, you will need to use the action editor to attach all of the actions you want to be exported.
They should all come through as named keys on the actions object returned by useAnimations hook.
@@CodeWorkshops Sorry, blender newbie... when I go in action editor and switch to kick action, it removes tpose animation. When finishing process, I see only one action in the log. How can I add the new animation, instead of replacing? Do I need to add new action? or push down into nla stack? That would be super nice to embed multiple animations , but I did not understand how to add multiple :-)
Its too good
How do i stop the animation once its played once
Such a great video ! Question, I've imported a 3D model and in blender, the animation is inside a NLA/task 001 and this can't be rename, so in the object from fiber, the animation is called "task 001" but with a space, how am I suppose to call it nowing I can't use space when I call the play method ? actions.task 001.play() is impossible
The gltf will have renamed the action for you to avoid spaces. You can find the name by console logging the value of actions at any point in your component after calling the useAnimations hook. That will log the shape of the actions object to your console and show you the name of the action you should use. Thanks for the great question, I hope that helps.
@@CodeWorkshops ok, so I tried to console logging the value and it's still Task 001 in the actions. Is there anyway I could send you the model I'm trying to use ?
@@sam974fe In javascript, you can also address object properties with square brackets like this. action['Task 001'] You could try that. Happy to chat on Discord too if you want to follow up, the link to join can be found on the channel page.
@@CodeWorkshops it works yes, thank you !
can we make this animation play on a Click Event ?
Indeed. You could remove the useEffect hook that calls actions.Armada.play(); and instead call that in any onClick handler.
Running into a bunch of trouble trying to get this to run in VS Code? It has to do with the @react-three/drei dependency, can't figure it out
Since this video was released Drei released an update that changed the import paths. That could be the issue. You might want to try changing any import statements to import from "@react-three/drei" and not include any paths like "@react-three/drei/useAnimations" If you still are having issues after that there are people who can help out in the Channel Discord.
@@CodeWorkshops thanks for the reply, I’ll let you know how it goes!!
you were correct, now I can just type "import { OrbitControls } from "@react-three/drei";
does this code still work? as i cant get it to find the
import { OrbitControls } from "@react-three/drei/OrbitControls"
Thanks for calling this out. The drei package has been updated and changed import paths since this tutorial was recorded. You should be able to fix it by removing /OrbitControls and importing directly from "@react-three/drei/OrbitControls" This applies to any other imports from drei. Here's a code sandbox updated with all latest version packages and fixed imports. codesandbox.io/s/react-three-fiber-importing-scenes-with-actions-from-blender-updated-npfcs?file=/src/App.js
hello, do you see it possible to change the animation by calling a function?
Hi Fritz, you can see an example of switching animations in this code sandbox. codesandbox.io/s/react-three-fiber-animation-mixer-gm4fx I also have a video about this code sandbox which shows how to switch between multiple animations. Hope it's helpful.
@@CodeWorkshops Thank you so much!
Source code pls
Hey bro i saw an advertisement before this tutorial. How it's possible when yu have less than 1k subs? I think google is cheating now 😅
Yeah UA-cam started putting ads on every channel even if they’re not monetized. Sorry about that, pretty lame.
@@CodeWorkshops Damn that's so unfair. Is there a way to control it from the creator's end?
joli fuckig chit te amo
Very helpful content. I appreciate your efforts @CodeWorkshop
Hi. I'm following your tutorial but got stuck on the animation part. I downloaded a model from the internetz so I'm not sure what's the animation called even using console.log:
{}
05_Colibri_Bird.001Action: (...)
05_Colibri_Bird.001Action.001: (...)
05_Colibri_Bird.001Action.003: (...)
ArmatureAction: (...)
ArmatureAction.002: (...)
get 05_Colibri_Bird.001Action: ƒ get()
get 05_Colibri_Bird.001Action.001: ƒ get()
get 05_Colibri_Bird.001Action.003: ƒ get()
get ArmatureAction: ƒ get()
get ArmatureAction.002: ƒ get()
[[Prototype]]: Object
I guess, the model doesn't include an animation.