React Three Fiber tutorial - How to animate 3D models

how to animate a model with 3js and reactor fiber [Music] [Applause] [Music] [Music] hi welcome to this new react re fiber tutorial in today's video we are going to see how to animate a model I will explain to you where you can find models where you can find animations I will also describe the process I follow to make this model available to you but this is not a blender tutorial don't worry I will provide advice to you so you can practice and go further project setup let's start by creating our project as in the previous tutorial I will be using vid so we used yarn create fit we name our project air 3F animations tutorial we use react and JavaScript once it's done I will open the folder let's add the default libraries we'll be using during this project the first one we want is 3js so we need three react number three fiber and react 3 dry if you don't know what dry is maybe watch my previous video where I explain what it is and how you can get the best of it but to make it short it's useful helpers to create your reactory fiber scenes okay so now 3js is set up let's start our project we have the sample from vid and react but we don't want this so let's clean it a little bit before starting inside the main it's okay but we won't need the index.css so we can't just delete our main we want import it our app we won't need the app CSS the logo or the use date we clean just everything and we'll delete app.css we'll import a canvas to make reactory fiber work so if the import should be visible here and we will create a component where we can put our logic inside so a new folder components or maybe I mean too small sorry I will Zoom a little bit okay and experience const experience will do a sample scene so we just display a mesh with a box buffer geometry for a cube and mesh normal material we'll export it perfect now we should be able to use it experience and let's see we have an error because I made a typing mistake I guess yes should be better and we have here our queue but it's uh the wrong sizing but I don't want to write CSS today we will be using Mantine Library so let's see what is mankind a fully featured react components Library let's go to get started and we will just add the bare minimum so let's stop it install it while it's installing we won't waste time we'll add the maintain provider inside um the main it's installed so it should have the Auto Imports it doesn't so let's reopen our file what let's just copy it because I made it too soon it should be fine let's restart let's see if we have error or if it's okay okay it's working so let's add default Style by the way I will explain later what is meantime and why we use it I can't style using Global styles so I just need to add a theme Global style is a function and I can Define the style here okay okay so we have a theme and inside we have an object which is called Global styles which take a function with the the theme but we won't use it let's make it optional and it returns an object and inside I can put the style we want so for all the body okay just add the parenthesis you put a width of 100 viewport width and height viewport hates okay and why isn't it taking the whole hate it's not because of the body but of the main div which is called root so what we can do is add a root and we'll make it 100 percent because we want it to be relative to our body even if it's not so important we won't touch it okay and now we have our Cube but we can't see it's a cube because there is no camera there's nothing so let's add orbit controls from dry and now we have a cube loaded 3.js is setup let's display our model display our model so let me explain to you how I find a model I could build it using blender but it will take me a lot of time and the result because I'm still a beginner of blender wouldn't be so good so I remember that I had purchased a lot of packs on Unity asset store so I decided to download a pack and get the fbx model to be able to import it into blender you can also find models on sketchfab which is uh the go-to place to buy 3D models I needed to do some rework to position it correctly and also to replace the texture with materials and once it was done I could find animations to get some animations I went to mixamo which is a free library that provide useful animations for games or whatever experience you have I could import my model into it have a lot of fun because it's always funny to animate a model then I download the file I merge them into blender so I could export a final file which is the one you will be using and this file contains all the animations in one single file let's add the model to our folder so in public a folder named models and I copy paste my gltf file now because we want control over the model we will use gltf jsx to convert it into a JS file so it's public models woman.gltf once it's done we have woman.js I will change a few things to make it more conventional to the way I work but it's optional so cones woman because I want to name it equals to props okay and export default woman okay now let's move it into our component Zone and the path will be wrong because it's models slash woman and here it's the preload so it's loading before we try to display it but we try to display it directly so it's not a big importance here but in general it can be and here is the same okay and you can see I also have used animations which is where we would have our animations later perfect now let's try to display it we'll replace our mesh with our woman component so what do what do we have we have our model but it's totally black and it's normal because we didn't put any single light as I am not an artist I will go to the examples and I know this one to find a go to lighting I usually use examples from reactory fiber so what do they have in ambient light a directional light their model and a plane below which showed their Shadows so let's copy it they have the lights they have the model okay we already have it we have the the floor and it should be way better okay but you can see that we are very far so maybe we can copy their um canvas settings for the camera position and fill up view so it's in our app if we reload it's way better but we are wrongly positioned so let's try to do like them put our woman into a group with a minus one y-axis and it's perfect but we still can't see shadows and it's normal what we need to do is to enable Shadows on the canvas and we need to Define who casts Shadows so it's our skinned mesh it's a long process because we have a lot of skin mesh which is the separation for every material because I made one material per per color what we can do is to trick it and use kin mesh and replace it with cast shadow so let's go to the next and do it okay so now we reload and we can have the shadow of our model now it's time to animate animations so how do we animate our model you can see here we have actions from use animations we have another thing we can get which is called names if we console log it let's see what is the result in our console you can see we have all our animation it was a surprise but now you know what we have we have guitar playing idle running salsa dancing and typos typos is the current one so how do we play an animation it's very very easy using react 3 fiber so let's do a use effect to trigger our animation when the component is loaded we won't Define anything yet but later yes actions it takes the name of the animation so names at the first index which is zero dot reset but fade in and we Define the duration let's make it a half a second dot play okay so now we have our woman playing guitar which looks very cool okay so now let's create our UI to be able to switch animations like the last time we can create contexts and we will create a hook named character animations.jsx const character animations context equals to create contexts most character animations provider equals to we'll need some props later we will return a character animation context dot provider with some value inside let's put an empty object for the moment and the children which come from the props so we wrap our content our children perfect um yes we need to export it and we will create a hook to use easily our context exports const use characters character animations equals to return use context from our contexts which is this one perfect so this is just the template for a context you can refer to react documentation if you need more info about it we will need a state to store the animation we are currently playing we will use the index so animation index and set animation index and by default we will start with the first index which is zero and to be able to display our animations on our UI we will need to store all the animations named that come from the gltf file so let's have an animation which will be the array of name set animation equal to use state and an empty array for at the moment let's export edit everything animations um set animations perfect now our Hook is completely ready normally so we can put it on the side let's go to our woman let's have access to our set animations from use character animation and when we have our animations let's set animations to names because it's our animations perfect it avoid to be triggered at every render now let's prepare our UI so let's create a component named interface const interface equals to a component hello will create a basic one for the moment and let's add it next to the canvas because we can't put it inside which is only for 3js components okay so now we have a mistake is because I didn't use the Auto Import that reload and we have an error in woman set animations is not a function so character animations set animations from oh I forgot to wrap our application inside our providers so it's character animations provider and now we have it and somewhere well somewhere we have our hello arcades here but it's not a big issue we will fix it okay so I promise to you to explain why we are using Mantine instead of pure CSS it's to go faster and have ready to use components so let's have a look of what they provide if we go to maintain hooks no not hooks to maintain core you can have all the components so here it's called up shell you can have container well it's a library of components you have button Etc what we will be using is called affix I guess it's it's in overlay affix a fix I don't know how to pronounce it and what it does it's it puts an element in a fixed position so here it is and there's call to top button so let's use it let's go to our interface and wrap everything here inside our affix I think the position is cool maybe 50 instead of 20. and now let's have a look whoa I never want to Auto Import thing okay I have an issue with um mentine and autocompletion I will reload my window okay okay and now it works let's save you can see we have hello here on the bottom right what we want to display here are the different animations where do we get them from it's from use character animations why there is no Auto completion we have set animations um we have animations directly we will Loop through our animations with map for every animation we will render a button which comes from maintain 2. and we have the animation name directly because it's an array of string we'll also need a key for react optimization and we can just use the name as well let's see what we have so far we have all the name of the animations but they are close one to another with maintain we can use what is called attack here and it will put the element one to another let's wrap our button into a stack comp components perfect and now we have our different animations let's display which one is currently playing so we will also require the index and to customize the look of our button there's something called variant if index equals to current or what is the name in our hook it's animation index so if it equals animation index let's get it from here then we will show the variant field and if it's not the case we will show the light version of the button and you can see we are in guitar playing mode and the color is correct now let's add the on click once we click set animation index to index and we also need to have it here so now we can change animation but you can see nothing is happening because we didn't call it in our woman model let's go to our component let's get the animation index and it's not as easy as it looks here we can say we play the animation index and to be triggered again we need to hook it on animation index but let's look what we have if we say guitar playing an idol she's doing both at the same time and if we add another one she's trying to do everything at the same time which is not what we are looking for so what we will do is we will return when our animation index change it will call this function so we'll return a function that will stop the current animation before switching to the new one so actions name from animation index and we just do Fade Out and the same duration let's reload because where we were in a bad State and now we can switch between different animation and it works smoothly of course you can go further um if you combine the previous tutorial to this one you can decide to change the color the the color of your hair of um for a shirt bent exterior I recommend you to use mentine for this because they have color input components or even there's something else color swatch instead of using my bad color maybe use this Swatch and it's ready to use you just have to bind the on click event and have beautiful colors thank you for watching I hope you enjoyed this reactive fiber tutorial please hit the like button if this video will help you it could help other people if it's not already the case don't forget to subscribe to this channel to be notified when there are new tutorials thank you for watching bye bye [Music] foreign [Music]

Channel: Wawa Sensei

Views: 28,375

Keywords: webgl, threejs, three js tutorial, threejs tutorial, three js tutorial for beginners, react three fiber, react three fiber tutorial, three js journey, threejs journey review, 3d website, developer portfolio, react tutorial, vite react, three js react, threejs react portfolio, r3f tutorial, three js animation tutorial, three js animation, r3f animation tutorial, react three fiber animations, react-three-fiber, webgl 3d, webgl tutorial, webgl javascript, three js, gltf threejs

Id: mdj7Z3PCxRg

Length: 25min 58sec (1558 seconds)

Published: Fri Nov 25 2022