How to make character walk on custom terrain made in Blender?

SimonDev makes his character walk on custom terrain (which is really bumpy) as shown at the timestamp in this YouTube video:

What’s the logic behind this behavior? I tried looking into Cannon.js to create a body, but it seems like it’s not possible to create a Cannon Physics Body from a custom Blender Model. I know how to do the walk animation, but not how to walk on a surface that isn’t a plane.

Anything helps, a resource, pseduo-code, general description, thanks in advance!

Generally the walk cycle is created in Blender (or your favourite tool), stored in the model itself and simply played using three.js animation system. The model is placed on top of the terrain.

You can configure three.js timeScale to match the character speed. And that’s it. There’s nothing special about the walk animation.

You can attempt procedural walk cycle, if your terrain is really bumpy, however I strongly discourage it. Feel free to use google to get some details and examples. The skeleton is a bunch of transformations you should be able to compute them yourself.

Even here I don’t see much use for physics engine like cannon.js, you want some more “physical” animation for it. Dying from an impact would be a good example. Search for “rag-doll physics” .

However I strongly advice to load animations from your GLTF file, see the first paragraph.

I think I found something simpler, I raycast straight down and depending on the distance between my character point I’m raycasting from (raycast origin) and the ground I adjust the position.y of the character. Thoughts on the performance of this though?

Premature optimization is the root of all evil

– Donald Knuth

When talking about performance measure first.

With that being said, if your terrain is general model loaded from a file, raycasting is probably your best option.

Depending on your terrain you might be able to exploit some features to your advantage. Like simple bilinear interpolation for a regular quad mesh.

However I wouldn’t worry about it too much as long as it’s not your bottleneck. Measure in developer tools first!

1 Like

random every time. Well, a little bit random.
Follow Cam - Three.js Tutorials (

1 Like