[Applause] You are working on your dream project, the next Animal Crossing or Fortnite for web browsers using React 3 Fiber. You have your environment, props, and character ready, but now starts the funny part: how do we add controls to bring these immersive worlds to life? Hi, welcome to 3D Snippets, where we explore 3D web development into easy-to-digest chunks. Today, we will create a third-person controller that lets your character walk, run, and turn smoothly, handle collisions, and even climb small obstacles like stairs or slopes. This is a versatile, reusable solution that you can effortlessly integrate into your projects. We will cover keyboard, mouse, and touch events to provide the same great experience across desktops, mobile, and tablets. Sounds complicated? Don't worry, I will guide you through each step, and spoiler alert: the final character controller file is less than 200 lines of code. I prepared the starter pack that you can clone; the link is in the description. Then run yarn to install the dependencies and then yarn Dev to start the development server. Follow the local

link here the starter pack. It includes different maps. So, the default one is Castle on Hills. This is the one we will be using. And then we will try the controller on this animal crossing map, cities in Tokyo DS 2. This one is from Counter Strike and medieval fantasy book. The character model comes from my full go tutorial and contains some animation. Currently, it's in idle mode. To create our controller, we will need to enable physics. The library we'll use is named Rapier and the package react 3 Rapier. Let's install it. yarn add @react-three/rapier. Then yarn dev. And let's open in Source component, the Experience component. To enable physics, what we will do is wrap all the objects that need to be impacted by the physics inside a physics component. So, we will wrap our map and the character with physics. Perfect. By adding the debug prop, we are able to visually see what will be happening. Currently, we can't see any difference because we need to add rigid body to objects we want to be affected by physics. Let's start with

the map. We open it, and then inside we will wrap the Primitive with our rigid body, the rigid body. And if we reload, we can see that the whole map is falling, but we don't want our map to be affected by the gravity, so we change the type to fixed. Now our map doesn't move, but we can see that automatically it generated colliders for each mesh of the map, but it's not precise enough for our Collision. We want to enable so we can change the colliders. Currently, it's made by default to cuboid. We will change it to Hull. And Hull, what it does, is like a gift wrap around each mesh, but it's not precise enough. For example, here below the arc, you can see it won't be able to pass. Instead, we will use the most complicated one, tree mesh. Now if we reload, we can see that the collider is perfectly wrapped around our meshes. Here it will cost more resources, but it's more accurate as we implement physics. If you are interested in getting a deep understanding of all the concepts, my

Project-based course React 3 Fiber. The Ultimate Guide to 3D web development covers it in detail. Link in the description. Now we have done it for the map. We want to add a rigid body for our character, but we don't want to impact the character component. We will create a new one named character controller. Let's create it components new file character controller.jsx. We will export character control, and for now, what we will do is to return our character. So return character. Don't forget to do the import, and inside the experience, we can replace it with our character controller that we just created. Okay, now the foundation is ready. We can add our rigid body. So what we will do is we will return a rigid body that drops our character by default. It's generating cubes around the meshes. It's not what we want. We have our character, and by default, the collider is a cube. So what issue will we have by doing this? Let's say we want to run across small objects, maybe stairs. When we will try to walk here because it's a

flat face against a flat face. It will be blocked, and we won't be able to climb the stairs. So instead, what we will want to do is to use a capsule collider, like a medical capsule. And this way, if again we have stairs, because when we will go in that direction, we'll have the angle of the capsule pushing to be able to climb the different stairs. But if the stair is too high, it will face that face and it will be blocked. Let's change the collider on our rigid body, but by default, you don't have the one we want to use, so we need to set false. So by default, it won't add one, and we will create it manually. We will add a capsule collider with the ARs of the width and the height. You can adjust it to the size of your character. If we reload, we can see we have a capsule around our character now. Before trying to make our character move, what we want to do is to position the camera behind our character. To avoid a conflict with our existing camera, we can disable or B

controls or just comment it. We will create a new structure to contain our camera within our rigid body. We will have a parent group named container. It will wrap our character but also a group named camera Target. It's where we look at and Camera position where our camera will be. And to be able to have control over our character later, we can add a reference to our character with a parent group. And don't forget to create the reference references from the top view. What we have is we have our character looking in front of it. We have our camera a bit on top and looking at our character and Camera Target. It's where we are looking instead of looking directly at the character. We are looking a bit in front of the character so our character won't be centered but a bit on the bottom of the screen. To be able to move our camera to the camera position here and to look at the camera Target, we will need some variables. We will need a vector three named camera word position to get the word position of our camera.

because if we get the position of the group, it is relative to our rigid body, but the camera belongs to the world, so we need to position it in the world. And because it's not optimized to create a vector three at every frame, we create a reference to it. Then we create exactly the same, but for the look-at world position to get the world position of the camera target. And we will also create another one, camera lookout, to be able to smoothly lerp into that position. Now we have the variables we need. We will create our loop in a use frame. We need to have access to the camera, and we can code our logic in the callback function. First, we want to get the world position of our camera position group, so we store it inside camera world position. Current, it's the vector we created here. Then our camera that we get the global camera here. We lerp its position toward the world position and you can add a constant to do it smoothly. Then if we have a camera target, if this group reference exists, we do exactly the

same logic so we get the word position of the camera. Target group and store it in the look at word position. current then we Lear the look at Vector here toward that word position with a constant and then because camera dolat is a function and not a vector 3 we pass the value of our Vector 3 that we just lured when we reload you can see the camera is going behind our character but our capsule is falling to avoid it we can set lock rotations because we don't want to rotate our rigid body on any direction and it's not happening anymore now we can can add the movement of our rigid body we will start with the keyboard controls so let's go to app and we will add keyboard Handler with react 3 fiber we can create a global variable keyboard map that is an area of key we want to handle so for forward it's the name of the event we will have it will handle the arrow up key or the key W on other keyboards like mine it will be

the Z key. It's doing it automatically, and you do it for all directions. And we will also add the shift key to be able to run. Then you can wrap everything within a keyboard controls component with the map parameter keyboard map. Don't forget to do the import to have it from dry. Now let's prepare it. So inside character controller, we will need some variables. The first one is to have access to the rigid body, so we can add a reference named RB for rigid body. It's faster. Const RB is equal to use ref. Then we will clear to consent walk speed and run speed with use controls from Lever, so we'll be able to adjust them within our experience. So we'll have the work speed. I found that 0.8 is good. It depends on what you like and the map that you are using. And run speed to the double of it, 1.6. And to know if our key is pressed, we'll have access to the get function from use keyboard controls hook. Now let's implement the logic. First, we check that we have a rigid body current value.

then we want to get the current velocity of our object because we will impact it, but we don't want, for example, we have gravity applied, we don't want to interfere with it. Then we create an object that we will name movement. It's the movement we want to apply. So by default, it will be xal 0 and Z equal Z. We only move on the x and z axis as we don't jump, we don't impact the y- AIS. Now let's handle our keys. So if get forward, so we are pressing a forward key, then movement do Z is equal to one. If we have backward, then movement of Z is equal to minus one. It can be the opposite based on where you choose to position your camera and rotate your character. Then we want to know which speed we are applying. So our speed, we will check if we have the Run key enabled. If it is the case, we'll be using the Run speed. If it's not, we'll be using the work speed. And then we handle the sides. So if we push the left key, then

movement do X is equal to 1, and for the right minus one. Now let's apply the movement. So if we have any movement on X or Z, then for the moment we will change the velocity on the z-axis by the speed multiplied by our movement do Z. Now we can apply the velocity to our rigid body with the new value. Let's try it. We can go forward and backwards. We didn't handle the left and right, but we can change the work speed and the Run speed. If I hold shift now, let's handle the rotation of our character and Camera. Let's add a rotation speed control. I choose 0.5°. We won't handle the rotations using physics, so we will rotate our container and our character, but by things separated from the physics and rigid body. To do this, we create a new variable rotation Target, and by default, we are at zero. Now let's go in our use frame Loop where we handle the left and right key pressed, and so if our movement do X is not zero, then our rotation Target we

will add our rotation speed multiplied by movement. X. Now we have changed our rotation target. We can rotate our whole container, so go where we handled the camera here. Let's name it camera, and we will rotate the container. We rotate it on the Y axis. We set its current value to rotation target. Current, and we use an interpolation factor. Let's try it so we can still go forward. We can rotate on the side. If we change the rotation speed, it rotates nicely, and the camera is following. But we will face a big issue if we go forward. It's not going in the right direction. So, once again, we have our character here. We are in top view, and we want to go forward here. It's the z-axis. We want to go forward. It was working because we were just going on the z-axis, but now we also have a rotation. Let's say we have 20°. So, our movement should be somewhere like this based on our current rotation around a whole circle. We should be able to calculate the new direction we want.

to go to by using trigonometry. Do not worry if you don't know the formula. I don't. Do I always either try until it works or ask chat GPT or look at the formula when I want to think a bit more. The only thing you need to know is by using the sinus and cinus. You are able to calculate that position around the circle by applying the right angle. So let's calculate properly v.x. It will be equal to math sin of rotation Target do current multiplied by the speed and v do Z will be equal to mat. cost of rotation Target current multip by speed. Let's try it. We can rotate and if we go in a direction it's working correctly but we can go backwards. It's because we need to handle the rotation of our character to based on the direction we are facing. To do this we have add a rotation Target. We also need a character rotation Target so we'll have a smooth transition when we will rotate the character so character rotation Target so again some

trigonometry. What we will get is where our character is facing based on the direction it's going to, which means our character rotation target is equal to atan2 of movement.x and movement.z. Now we have it, we can rotate our character. So on the y-axis, again, we will lerp our current y rotation toward the character rotation target we just calculated with our factor. Now you can see if we go to the right, it rotates to the right. If you go to the left, it rotates to the left. And if you go forward, it goes fine. But we will need to apply the rotation to our movement to be more accurate. To do this in the calculation of our velocity, we simply need to add it. So character rotation target to current and the same here. Now we can try to move and we have a nice rotation slowly going to the right position. But the experience is nice, but you can see if I go left, backward, and right, backward, it's doing a full spin. It's because it's luring the value from something like

minus 280 to 280, so it's not going to the shortest path. So what I did, I asked my best friend, Chat GPT, to create a function to lerp the angle by taking the shortest path, and here is the code it generated for me. I could fake you that I wrote it myself, but sometimes it's good that you also know the process, and the code is not so complicated that you can understand by reading line by line. Then you just need to change our mathutils lerp by the lerp angle. Here, let's try it again, and now the rotation is always perfect. Now, before testing to go everywhere, we need to have a nice animation when we are walking or running. We have the different animations inside our character model. Currently, we play Idle, but we have Run and Walk. So on our character, instead of hard writing Idle, we'll pass a variable named Animation. Let's create a state for it. Const Animation setAnimation. It will be equal to useState of Idle. Then we will simply base ourselves.

on the speed we are using here. So, only when we are moving, if speed is equal to run speed, then we are running. Else, it means we are walking. And if we are out of the movement, we go back to the idle state. I don't want to touch to the velocity, so if we have friction or gravity, it's not impacting. Let's try it. We can walk and we can run. It's working nicely. Let's try those stairs here because we are using a capsule. It's working perfectly. Let's go elsewhere. Let's try to climb those big stairs. So, here it is. And here we are. Block. Oh, it works, but we need to push hard or to run. So, you can adjust the work speed and run speed based on what you have and also the height of your capsule because the angle on the bottom is causing more or less blocked by the height of the object. Now, let's try to control it with our mouse. And believe it or not, based on our current implementation, it will be very, very easy and straightforward to do with our

variables. Let's create a reference named is clicking. It will be a reference; we don't want a state because it will be often changed. And to change it, we need to add an event listener on our window. So, what we do is, in a use effect, we create two functions: on Mouse down, it will set is clicking to true, and on Mouse up, it will set it to false. Then we add the event listener to Mouse down on Mouse down and Mouse up on Mouse up. Then don't forget in the cleanup function to remove the event listeners. Now let's impact our logic with those new info. So, we can access the coordinate of the pointer with the mouse inside the Callback function. So, where we get our speed, let's do if is clicking do current. We will console.log the mouse coordinate Mouse dox and mouse doy. Now let's try to click. You can see it's clicking, and when we move our mouse cursor, the coordinate change. So, top left is minus almost one, and top right is one. So, it's going from

minus one to one on the horizontal axis, and top is one and bottom is minus one. So, for the X Movement, we were also going from minus 1 to 1. We can do movement. dox is equal to mouse dox. Let's try it, and we are going in the wrong direction, so simply use minus Mouse X. Now try again, and it's going in the right direction, but we need to move forwards and backwards, so we can do movement. Z is equal to Mouse doy. Let's try it, and it's going well, but you can see that the direction change in the middle of the screen, but our character is a bit below, so we can adjust it. Let's look at the values when we are at our character. It's around Min - 0.4, so we can add Plus 0.4. Now, if we want to go forward until we reach our character, it's way better. Let's say when we click way further away, we want to run and not walk, so we can check if the movement X, the absolute

value is above 0.5, but you can use another value too, or the Z movement. Then we will use the Run speed. So now we are working, and if we go further away, we are running, and we can work again. That's very nice. I have an issue. If I want to go just forward myself, it's always rotating. So let's apply X movement only if the position of the mouse is above 0.1, where the absolute value. So now if I go a bit to the right, it's turning, but if I'm here, it's just going straight forward. I promised you it would work on mobile, but it doesn't right now. We need to do a few things. Currently, we are only listening to Mouse down, Mouse up, so it's not triggered when we are using touch event. So for touch event, we can just register the same function. So touch start is clicking, yes. Touch start will remove on the cleanup function. Now let's try it. If I click, it's going somewhere, but if I move, it's moving the whole

canvas. Instead, what we need is to add some style on our canvas. So, you can do it in CSS or in line with tile. Your action is equal to known, and now we can walk using the touch like we were using the mouse event. Let's try it on the other maps that we have. So, let's say Animal Crossing, but you can see the physics is broken. It's based on the previous one. The simplest way to reinstantiate everything with React is to go on the physics and to use key is equal to the map. So, when it is a different key, it will reinstantiate the whole tree. Let's try it. We can change to Animal Crossing, and it's working fine. Let's say I think we have a slope somewhere here. Oh, because I was still in here, so I need to click somewhere. Okay, now it won't happen again. Let's go, and the slope is working well. I can run. I can use shortcuts like this. It's really a natural feel for those who knows here. It's a Counter-Strike map, so

here it's a bit difficult. I need to run, so it's a good example for the Run speed. You can increase it a lot, so I will push enough to go on top of this, maybe here too. Awesome. Before finishing this video, I want to talk to you about this Library. I will put the link in the description. It's a very good and nice Library you can use, but it wasn't doing exactly what I wanted, and I couldn't find tune to do what we did. But if it's the kind of controller you are expecting for your project, you can use this one. Or if you are looking for something custom, you can iterate from this source code and also from the one we've made together and create your own custom one. Thank you for watching. I hope you learned a lot from this video. Please hit the like button to make it more visible to other 3js lovers. Don't forget to subscribe to miss the upcoming video tutorials if you want to learn more about creating immersive 3D web.

experiences. Check out my course, React3 Fiber: The Ultimate Guide to 3D Web Development. It covers everything from basics to advanced techniques through project-based lessons. The link is in the description below. You can also continue your learning journey with this video available here.

Third Person Controller (React Three Fiber Tutorial)

Third Person Controller (React Three Fiber Tutorial)

스크립트