Animate rotation of mesh around local axis (demo of options including Quaternions)

Questions
1

I’ve spent a few days wrestling with the best way to animate the process of unscrewing bolts along their local axes. I want to call a function which animates the removal of a bolt - something like this:

removeFixing(numberOfTurns:number, axis:("x"|"y"|"z"))

I’ve been unable to do this using the BABYLON.Animation functions. I can’t keyframerotation, rotation.x or rotationQuaternion. So I’ve fallen back to using a beforeRender observable but I’m not sure that this is the optimum solution.

  • rotation and rotation.y - they are dependent on the order of Euler axis and so the fixing animates from its initial to final rotations but not along the correct axis.
  • rotationQuaternion - I can’t animate a quaternion to rotate multiple times (more than 360 degrees). I made a hacky attempt to loop the animation in order to achieve multiple revolutions, but this too met with defeat.

I’d welcome your critique of my code - it might help someone else who gets stuck on animating local rotations around an axis.

2

Hello, welcome to the Babylon forum, and thanks for posting a playground! It is helpful.

You can get all those methods to work by inserting a transform node as the angled bolt’s parent, that way the animation behaves as expected in the local space of the parent node.

I modified the playground to show how this can be done with the given model: https://playground.babylonjs.com/#8LFTCH#2108.

…or you can add the parent node directly in the model, so you don’t have to insert it with code after it’s loaded.

1 Like
3

Ah that’s brilliant. Thank you!

When I export/import the gLTF model it splits the primitives into separate Meshes and then parents them to a TransformNode. This works fine so I think I’ll need to add another TransformNode to act as the parent. So in the end the structure will have to be:

TransformNode (created in code) 
    -> TransformNode (created by gLTF import) 
       -> [ Meshes ] (Primitives)
1 Like