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

Описание

We build some basic character movement controls, using W,A,S,D we can Idle, Walk and Run. Implement a character state machine, with smooth animation transitions using AnimationMixer. Build a 3rd person controller with three.js!

Check out the next video, character movement with physics: https://youtu.be/voGmsOuB3Rk

Stackblitz: https://stackblitz.com/github/tamani-coding/threejs-character-controls-example
Github: https://github.com/tamani-coding/threejs-character-controls-example

(00:00) - Intro
(00:36) - Scene Setup
(00:50) - Key Listener
(01:30) - GLTFLoader to Load the Model
(02:18) - Use AnimationMixer & AnimationActions
(02:50) - Character Controls State Class with Default State
(05:00) - State and Animation Transition (FadeIn/FadeOut)
(06:32) - Turn Character Model towards Run Direction
(07:50) - Move Character and Camera
(09:00) - Outro

(music from: https://en.pocket-se.info/)