three.js Basic Character Controls - GLTFLoader, AnimationMixer, 3rd Person Controller

[Music] in this video we will build some basic character controls in 3js there will be a character with walk run and idle animations and the third person camera always following the character i can use the wasd keys to run and shift key to switch between walking and running the gltf loader will be used to load a model with animations downloaded from the internet the animation mixer enables smooth transitions from one animation to another [Music] i start with a basic 3gs scene where i have a floor and lights the camera along with the orbit control will be used as the third person camera for the character i am creating event listeners for key down and key up keyboard events to implement the controls on every key down event i store the information which key has been pressed in an object on every key up event this information is removed the shift key is handled separately as a toggle between walk and run also i have implemented a utility to display which keys are pressed 3js has several examples on how to load gltf models and how to handle animations [Music] i downloaded this model which has idle walk and run animations [Music] now i can use the gltf loader to load my model after it has been loaded i tell the mesh to cast shadows and add the model to the scene [Music] i can get all animation clips from the gltf model and i use the animation mixer to transform all animation clips into animation actions the animation actions enable us to fade in or fade out animations for smooth animation transitions all animation clips which are not the t-pose are transformed into animation actions and stored in a key value map where the key is the name of the animation [Music] i am creating a character controls class which will implement a state machine for transition from one state to another and to move the character with the camera based on which keys are pressed this class has two public methods one to toggle between run and walk and one to update the state given the delta time and the keys pressed information the update method will be called every frame in the animation loop to calculate the next state the movement speed and directions and to update the animations with the animation mixer in order to move and to animate the character we must provide references to the model the animation mixer the animations map and also the camera and orbital controls through the constructor now we can instantiate an object of this class after the gldf model has been loaded in the keydown event for the shift key we call the switch run toggle method to switch between running and walking at last in the animation loop we call the update method of the character controls object given the delta time and the key pressed storage object note that the default state and animation of the character is idle in the constructor of the character control class i tell the default animation to start playing when i call the update method of the animation mixer in my character control update method i see that the character is indeed playing the idol animation finally we can focus on implementing the state transition and movement of the character i have added some 3d vector and quaternion variables for math calculations and constant values for fade duration as well as run and walk velocity of the character in the update method i can check if any directional keys has been pressed that is w a s or d taking the run toggle into account i know if the character is running walking or simply idling in the case no direction has been pressed [Music] then i can check if the current state is not the same which i have just determined if this expression is true i know i must do an animation transition i get the current and the next animation action from my animations map then i tell the current animation to fade out and the next animation to fade in [Music] and after that i store my new state now i can play around with the result when i press any directional key the character plays the run or walk animation with the shift key i can switch between run and walk animation the next step would be to turn the character based on which directional keys have been pressed when i am in the walk or run state i know that i must turn and move my character when pressing the w forward key i want to turn the character towards the camera viewing direction to implement typical third-person camera controls with linear algebra i calculate the angle between character and camera view direction so i know into which direction the character model must be rotated the w key must make the character run away from the camera the s key must make the character run towards the camera and diagonal directions must make it turn diagonal away or towards the camera so that means i must calculate an offset angle knowing which keys have been pressed and know the value of that offset so i implement a method to calculate the offset knowing this rotation angle and offset angle i can create a quaternion and make the model rotate towards that direction stepwise rotating it stepwise makes smooth turning into the desired direction [Music] finally we can start moving the character and the camera based on the previously calculated angles i calculate the vector which represents the direction into which the model must move i also determine the velocity of the character that is if it is running or walking then i use the x and z axis of the direction vector multiplied by the velocity and delta time and added to the x and z position of the model [Music] the final thing we must take care of is to update the camera position and look at the target position the camera itself is moved by the same x and z movement offset as the character model the look at the target of the orbit control must be set to the new model position [Music] now we finally have a third person camera following our character [Music] you

Channel: Genka

Views: 44,194

Keywords: threejs, 3rd person controller

Id: C3s0UHpwlf8

Length: 9min 14sec (554 seconds)

Published: Sun Sep 19 2021