Build a 3D Portfolio with React Three Fiber - Avatar animations

how to build a professional looking portfolio with the reactory fiber part 1. hi welcome to this new tutorial the final goal of the entire tutorial series is to create a great looking portfolio in the style of David heck of one but with the Wawa touch and also yours the course is made of small actionable independent chapters and in the final episode we will play Lego to assemble our portfolio today we will prepare your own avatar looking like you using Ready Player me the great news is that it requires no blender skill and we will be able to animate it and follow our mouth cursor let's start by cloning the starter pack repository so click here to copy it then in the terminal git clone paste and the path I want to put it in so portfolio animation once it's done I open it to check that it's working run yarn and yarn Dev we have this Cube we can rotate around so it means it works but we want code for now let's go to readyplayer.me enter herb or create your account if you don't have one I deleted my avatar to be at the same stage then you choose your body type I select masculine then you can take a photo or pick a file I will use my profile picture accept and it's loading an avatar with my face hmm I think it looks like me okay but you can customize it to whatever you want because it's your portfolio it's best that it looks like you or what you want to look like I won't spend too much time editing it but really huff and do whatever you want let's select a cool haircuts the clothes because we won't be able to change it by ourselves so select them in here but still you can change them later whenever you want okay so I took something simple but do whatever you want and hit enter Hub so now your avatar is created you can use it in different metaverse this is what already player me does but the good thing it provides is this button here it's written for developers it's what we are so it's perfect and download Avatar as a glb file so from that we will load it into our 3js scene once you've downloaded it go to public create a new folder name it models and drag and drop inside it the model okay so now let's run npx gltf jsx on the model it did is it took the 3D model file and generated a react component with it that we can play with let's copy everything from this file go to components create a new file name it avatar.jsx paste it and we'll do some correction to it so the function name we want it to be Avatar the path because we put it in models we need to add models and also on the preload now go to the experience and let's try to add our Avatar component okay so we can see it it's full black and with a bad position or our camera is wrongly placed but who will fix it so for now we can remove this mesh we will add an ambient light with an intensity of 1 so it shouldn't be black anymore and we can go to the app and let's change the position to zero two and five it's better but let's decrease in the position let's go to experience rub the Avatar in a group we'll wrap our scene later position on the y-axis -1 and okay and that should be fine for now let's have a look at how to animate it to animate it we will use the free animation Library mixamo so either sign up or log in you can see there is my previous character but let's upload a new one and here it only takes fbx OBG or zip so we can't upload our glby but we have blender it's very easy to convert it to fbx so open blender hit a to select everything and hit delete then import and glb then look for your model and import it you can see it there you can see material preview to be able to see it with the clothes we really only load it to export it to fvx so go export and fbx Export it wherever you want name it a like you want the settings I show you mine but I didn't have to do anything and I think it will work out of the box so export fbx now let's get back to mixamo and import it models character okay it's uploading you can see it automatically rigored and is able to play an animation the reason the texture but don't worry we will keep our existing model we just use it to be able to download mixamo animation and that it will be escape the good way for our model so now I know you I know people using mixable for the first time I'm not the only one you will want to play with all the animation and have a lot of fun at watching it but once you're done with it we will start by typing animation because on David hey call the website it's what the Avatar is doing so I will select on the first one here we can see that the character is typing there are some parameters so if you want it to be faster or um or slower you can adjust it I will keep it at 50. I was good with it you can change the arm space so if you have a modeled a desk maybe it's better to put it at the correct position and trim is for long animations maybe you don't want the whole one but just a small portion of it so you can play with it but we won't change it and hit download here we can select the format fbx we will keep it and here it's skin we don't want the skin because it's the mesh and all the information but we already have it we only want the animation to animate our existing model so download without skin and keep the other with the default value and hit download Once you have downloaded the animation create a new folder in public name it animations and drag and drop your file inside now we will be able to play with it so let's go to our Avatar here and below we will have our animation we can name it typing animation is equal to use fbx because we have a fbx format and we write the path of our animation so it's in animations and it's named typing.fbx let's log it just to see if it's loading correctly but I need to log typing animation because I renamed it and write that log so in the console we see an array so it's animations and that's why it's in the prior form with the first clip named mixamo.com but we don't want to have all our animations name like this so we will rename it so typing animation the first one dot name and you name it the way you want it's just your convention for you once we have our animation we need to create actions to be able to play it so actions is equal to use animations what it takes is an array of Animation clip so we will use typing animation for now and the second parameter is the group on which it will perform the animation so we don't have it yet let's create a ref for it ref equal to group and let's create it cons group is equal to user-f and group now let's play our action with use effects we won't put any parameter just by default so what we will do is we will take our actions we'll take the one named typing we will reset it and then we will play it okay so it seems it works but we have a rotation issue I didn't have this issue when I did my test so maybe you can export it in blender and fix the rotation but what I will do is wrap everything into a group and rotate it so it will be a quick fix so maybe it will be on this one and rotation x equal minus mat.pi onto and here we have our character typing [Music] if you look at David portfolio sometimes it rotates just the head on the left screen so we'll try to achieve the same let's have a look at the blender a bit at our skeleton so here we have it we can open the pause mode go to Armature viewport display hit in front so you always see the skeleton here you can look at what button you want to rotate so it can be this one maybe on the z-axis if you want to rotate only the head or maybe you want to rotate the neck with it so once you know which one you want to rotate go here to the Bone and you have the name of the bone so here it's neck if you look at this one it's spine two so this way you can know what bone is which one let's make it follow for now our camera so we use frame will do group dot current dot get object by name and we want it to rotate the next so the bone is neck Dot will try to look at the state.camera dot position so it's always look at us and use frame need to also have the state if you look at it you can see there's a small gap between the camera position and us so let's try to rotate only the head for demonstration purpose and now you have that scary version of me always looking at you whatever you do let's make it conditional to do so we will use the level Library once it's installed you can run it again hide it and let's create control so let's name it head follow equal use controls from level head follow will be a Boolean and it will be false by default so now we have head follow and we will only do it if head follow is true so now we have this pop-up box of Oliver on the top right so Wawa is working and you enter in the room it's looking at you scary you know let's do another option because now we know how to rotate the head but maybe let's try to rotate toward the cursor position so instead of head follow let's declare cursor follow s by default cursor follow and if cursor follow okay so we'll create a vector let's name it Target is equal to a new three dot vector 3. and the position will be state.mouse dot X so the mouse position you can get it from use frame state date dot mouse dot y and the Z position so I want it to be in front of our character it's looking at us so it's one and now we just look at our Target let's say we don't want to rotate the head but the whole spine because we want the arm to move with it so now the head still can follow you or you can say follow the cursor position so just reload and do it again so it's based on the X and Y position so it it follows nicely in my cursor position time to add other animation let's look at standing idle select the one that you want but try to not take too long animation because the weight of the animation will be heavy this one is 180 frames so it's kind of nice I don't know it and I will also look at the falling animation so here same principle do whatever you want I like this one so I will download this one and it's only 21 frames download keep without skin and download why do we take the falling animation look when I scroll we can see it fall and then it go into an ideal stance so we'll try to replicate it in the future of the tutorial now go to your animations and drag and drop it once it's good we will just load the other animations so we have here typing animation we will load the two others we'll have a standing animation and falling animation let's have a look at the name we have falling idle and tending idle it's the opposites so let's fix it here we need also to rename it because I know it's mixamo so for standing animation I can put whatever I want I would just name it standing and for falling animation I will just name it fully now let's add some control to decide the animation we play maybe we will add the control to the experience so here we'll see animation is equal to use controls as we want a drop down we need a value so the first one will be typing and the different options we have it's an array of string we have typing we have a falling and standing okay and now to our Avatar we will path and now to our Avatar we will pass the animation so animation equal animation now in our Avatar we'll get the animation from the props so let's name It Animation the structurated from props and instead of playing typing manually we will play the animation but we have an issue because it doesn't know the undefined animation so why is it so experience okay so here it should be animation an object containing a value and options now our Avatar is typing we and when we change it it doesn't work let's have a look at why what we want is to call use effect when animation change so set animation here and also return a function to cancel the previous animation so here what we will do is to stop the previous animation what happens now when I change it it Crush I guess it's because in the actions when I created it I only used typing animation so what I will need is to create a new array containing my typing animation I know it's an array and the first item so typing animation standing animation and falling animation now it will contain all our animations now let's have a look typing falling but the change is quite a burped and standing so let's fade our animation to make smooth transitions for this it's quite simple we just need to make fade in you select the duration you want you can make it based on what animation you have and Fade Out if you use Fade Out you don't need to stop it so it's typing falling and then standing so it's smoother maybe we can fine tune the parameter later when we will do the final assembling part as we are still on our Avatar chapter you might be wondering how to create this wireframe effect it's quite simple we will use one solution there are other Solutions available but let's look at an easy one we can add another control let's name it wireframe by default it will be false and another use effect if wireframe change we will apply the wireframe effect on our materials on the materials dot forage will have each material but materials is not an array it's an object so we would need to do object dot values to be able to iterate over it and arterial oil set wireframe is equal to wireframe because it's our Boolean and if you have a look at the documentation from 3.js you can go on mesh tender material which is the most used one on this model look for wireframe and you see it render geometry as a wireframe so it's exactly what we are looking for now on our model at any time we can switch wireframe or not so when it's falling it will be like this when it's standing so let's say you want to create that same effect you can apply wireframe and it will look like the same you can see it keeps the colors if you don't want that effect you will need to use another solution you can Google for it it's kinda easy even if it's just a chapter I want it to look decent so I will polish a bit the scene under Orbit Control in the experience we can add Sky to have a nice background out of the box we can change the light to use environments we'll use the sunset preset so we won't require the ambient light anymore so here is what it looks like so far let's add the floor and the chair so it doesn't stand on nothing for the ground let's use a mesh with a plain geometry let's make it white so mesh tender material color equal to White let's receive the shadow let's scale it to five and rotate on the x-axis to minus Mod Dot pi Pi multiply by half for the chair we will create another mesh by the way we don't need a receive Shadow we'll use another component we need a box geometry and also a mesh tender and material of a white color let's see how to scale it 0.8 0.5 and 0.8 okay so far we have it so we need to adjust the positions first we need it to be in the group and the chair should be upper so I guess it's 0.25 and now it's way better let's look at falling it's in the chair so we disable the the chair when we change the animation so let's wrap it inside animation equal um typing and we render that chair of course we call that animation but it's not today's topic so now it's on the chair but if it's falling we don't have a chair anymore okay looks better yes we're on the floor let's add some Shadows to have more depth if you know me you know my favorite component for Shadows so go to Joy repository look for contact Shadows copy this one so you have all the parameters out of the box and you just have to fine tune it add it uh here should be nice okay so there is a conflict with the plane we'll fix it okay looks too harsh too so let's fit those two problems in the first one it's too harsh we can reduce the opacity and the position of the plane we can just set it just a little little bit below the position y to minus 0.001 just to avoid conflict and now we have that smooth shadow when it's falling it's more visible we can see it's moving but it's it's smooth and it's nice let's check when it's standing now we really have that feeling that it is on the floor so it looks pretty nice [Music] thank you for watching I hope you enjoyed this video if it's the case please hit the like button as it really helped this channel be more visible to other fellow developers don't forget to subscribe if you want to be notified when new videos are released and to continue learning react pre-fiber you can jump to the next video available here

Channel: Wawa Sensei

Views: 55,409

Keywords: threejs, three js tutorial, threejs tutorial, react three fiber, react three fiber tutorial, three js journey, three js react, r3f tutorial, three js, three.js, pmndrs drei, threejs animations, pmndrs, threejs portfolio, three js portfolio tutorial, react three fiber portfolio tutorial, mixamo three js, react three fiber mixamo, ready player me threejs, blender ready player me mixamo, mixamo animations threejs, David Heckhoff portfolio, webgl tutorial, react, threejs avatar

Id: pGMKIyALcK0

Length: 23min 52sec (1432 seconds)

Published: Fri May 26 2023