Series
A First-Person Controller in Babylon.js
Build a first-person controller in TypeScript with Babylon.js, Havok and Vite that walks, runs, jumps, crouches and climbs ladders, ledges and walls, with a camera that feels right.
Intermediate
Eleven parts, from an empty Vite project to a first-person controller you would put in a game. You start with mouse look and walking on Babylon.js’s Havok character controller, handle slopes and stairs, add running, jumping and crouching, and then four kinds of climbing: ladders, ledges you climb onto, ledges you hang from and walls you climb all over. The last part gives the camera the small movements that make it feel alive. Every part ends with a demo you can play right on the page, built from exactly the code it shows.
Quest line
- Part 1: Babylon.js, Havok and ViteSet up a Vite project with TypeScript, Babylon.js 9 and the Havok physics engine, and build the test course the player walks, jumps and climbs through in this series.20 min
- Part 2: Mouse Look With Pointer LockCapture the mouse with the Pointer Lock API, turn its movement into the angles of the view and put them on a camera of your own, without lag and without the view flipping over.15 min
- Part 3: Walking With a Character ControllerGive the camera a body: a capsule on Babylon.js's Havok character controller that walks where you look, speeds up and slows down smoothly, falls and lands.25 min
- Part 4: Slopes, Stairs and StepsWalk along slopes instead of taking off from them, decide what is too steep, walk up stairs on an invisible ramp like most games do, and stay on the ground over the top of a slope.25 min
- Part 5: Running and JumpingRun with Shift, jump to an exact height, keep your momentum in the air, and make jumps feel fair with coyote time and a jump buffer.20 min
- Part 6: CrouchingSwap the capsule for a shorter one without moving the feet, check for a ceiling with a shape cast before standing up again, and lower the view smoothly.15 min
- Part 7: Ladders and a State MachineGrow walk and air into a state machine, put ladders into the level as zones, and climb them: up, down, over the top and off again with a jump.20 min
- Part 8: Climbing Onto LedgesFind a ledge in front of the player with two rays, check with shape casts that the capsule fits on the way up, and climb over the edge on a scripted path, from the ground and from a jump.25 min
- Part 9: Hanging From LedgesGrab ledges that are too high to climb onto at once, hang just under the edge, move along it as far as it goes, and pull yourself up or let go.20 min
- Part 10: Climbing WallsMark walls as climbable with a collision layer, start climbing with a jump, move up, down and sideways along the wall, stop at its edges, climb over the top and jump off.20 min
- Part 11: Camera FeelGive the camera the small movements that make a body out of a floating eye: a head bob that follows the steps, a dip on landing, a lean into sideways moves and a wider view when running.15 min