In this project we’re building out a simple character controller in three.js and JavaScript, using a finite state machine. The goal here is to build a little controller for characters in game that can conceivably be drop-in ready and used for third person movement in projects. We’ll support a variety of movements and show how to seamlessly transition between them.

This is part of a series of Three.js tutorials aimed at beginners, teaching you the basics from the ground up. We’ve covered quite a bit in this beginners course, beginning with simple worlds and moving on to adding characters and objects. This project should get you start on adding simple player driven, or AI driven, characters using this basic character controller.

The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.

In the video, we cover:

• Three.js’s Animation System, including examples using AnimationClip, AnimationAction, and AnimationMixer.
• Architecture considerations when building out the controller class, how to decouple things in a clean way for future reuse.
• Finite State Machines, what they are, and how they can be applied effectively in this situation.

Github: https://github.com/simondevyoutube/​

Subscribe: https://www.youtube.com/channel/UCEwhtpXrg5MmwlH04ANpL8A

#javascript