Walking Avatar from A to B

New to BabylonJS I’m looking for a simple way to move an Avatar

  • from Position/Oriantation A
  • to Position/Orientation B

For instance, the avatar face you, and decide to move to right then again face you

That means for a 100 frames animation

  • Start walking animation
  • Rotate A to directon of B (lookAt) for 10 first frame
  • Move from A to B for 100 frame
  • Then rotate back to B Orientation

My implementation use an Animation Group with 2 Animations (position, rotation) with keyframe. And an Observable to start/stop walking + some blenbding speed.

I see some topic about quaternion, other about following a path… But I think I going into the wrong direction because I use so many code for “just” moving a toon from A to B. I assume there should be some top level helper for that kind of so basic thing ?

If someone can point me to the right direction ?
Thanks !

Something like that is interesting but I’m lost

@carolhmj is the best with this :slight_smile:


Your AnimationGroup approach is perfectly reasonable :slight_smile: if you think about the sequence of movements needed, it’s not that much code after all. It would certainly be a lot more if using pure WebGL :rofl: The Sequencing Animations article on the docs should be of help too: Sequencing Animations | Babylon.js Documentation (babylonjs.com)

The approach you linked on the second playground is a bit of a different one, in that it uses the animation by render loop: Animation Using the Render Loop | Babylon.js Documentation (babylonjs.com). You could certainly apply the same approach on your character animation, but this usually gives out a lot less control.

@carolhmj I agree it’s not a lot of code but I don’t understand there is no high level code to walk an avatar from A to B with so many “Metaverse” buzz word.

My approach is really straight forward (like 1980’s Tortoise), a better one would be to have a curvy path from A to B like a realy human.

Anyway, how can I compute the the Euler rotation from A to look at B ? I’m a little bit lost. I think it would do the job.

PS: I’m also surpise there is no “starndard” to play with a 3D model. A “Walk” animation can be declared and handle many ways even with Mixamo, what a mess ! :slight_smile:

You may try to have a look at GitHub - ssatguru/BabylonJS-CharacterController: A CharacterController for BabylonJS
It supports everything what you need.

Thanks @labris I’ll look into it. It seems there is no Move to A, then B then C. It’s more like it’s name a Character Controler (FPS or Iso) that move according to key press. You should add some feature to Move NPC to a given location

As for a helper function - here it is: CreateAndStartAnimation
Docs: Advanced Animation Methods | Babylon.js Documentation

There is callback at onAnimationEnd which you may use to start any other animation.

I believe one reason there is not such a thing is that apps such a Blender and Mixamo already exist and are very usable for setting up such animations which can then be exported to Babylon.js for use on the web.

It is also true that Babylon.js features are added as they are seen as being useful by the community and someone is prepared to put in the work to add it. A good idea would be to add your walk a path concept to the ‘feature requests’ section of the forum.

You may also find the following of interest.