Rotate mesh while animating its position

Questions
1

I have a mesh and animate its position, using the method from the docs. I would like the mesh to face the same direction of the path. Here is the current behavior:

How can I rotate the mesh to face the next point?
Note that the points are all 1 unit apart.

2

Here are some docs - Making a Simple Car | Babylon.js Documentation
Example - https://playground.babylonjs.com/#1YD970#14

3

Thanks for the docs, except this does not use Animation.

4

Same way you animate the position, you could animate the rotation from the current one to one computed with lookAt for instance ?

5

Possibly, I’m looking at that and the getDirection code now, hopefully it will work.

1 Like
6

Here is a very messy playground where I’m testing it: Babylon.js Playground

7

@sebavan

I’m struggling with the 3D geometry a little bit - could you take a look at the pg?

It seems to rotate but just not in the right axes (maybe a normalization issue?)

Note: click to start the animation

8

Got it!

After reading this and looking at some code I wrote (this random coordinate function), I did some trig, and got this amazing function:

function getRotation(origin, target){
    let diff = target.subtract(origin),
    distance = Math.sqrt(diff.x**2 + diff.y**2 + diff.z**2),
    phi = Math.acos(diff.z / distance) || 0,
    theta = Math.asin(diff.y / (Math.sin(phi) * distance)) || 0;
    return new BABYLON.Vector3(theta, phi, 0);
}

PG: https://playground.babylonjs.com/#2I8Y3S#8

I am having an issue since acos/asin should be +/-, so I need to determine the sign of the angles.

1 Like
9

Sorry for all of the replies - the solution to get the correct sign is multiplying the y output by the sign of diff.x:

function getRotation(origin, target){
    let diff = target.subtract(origin),
    distance = Math.sqrt(diff.x**2 + diff.y**2 + diff.z**2),
    phi = Math.acos(diff.z / distance) || 0,
    theta = Math.asin(diff.y / (Math.sin(phi) * distance)) || 0;
    return new BABYLON.Vector3(theta, Math.sign(diff.x) * phi, 0);
}

Thanks for the support! I actually think toPolar/fromPolar functions could be useful for the engine, so I plan on working on a PR for this.

1 Like
10

Just coming back to the post, thanks a lot for sharing the solution :slight_smile:

1 Like
11

Hopefully this should make it even easier in the future.

12

First of all well done for finding your own solution to your problem. I am a little concerned that it took you down a wrong path and that understanding a little more about the answers given would have led you to a quicker solution without polar coordinates.

The difference between scene rendering animation and ‘Animation’ is the first calculates during each rendering frame and the second needs to pre fill the animation key frames before doing the animation. The maths for each is the same and so you can convert from one to the other.

PG 1 scene rendering animation https://playground.babylonjs.com/#1PX9G0#59

converted to

PG 2 Animation https://playground.babylonjs.com/#1PX9G0#60

Please do not let this dampen your enthusiasm for working out your own coding problems. We all have gone off at a sidetrack many times.

2 Likes
13

Thanks for the feedback.

Since I already have a position Animation, It was easier to use Animation for both instead of changing the entire (working) position animation to use registerBeforeRender.

I had also considered using registerBeforeRender like the first answer but decided against it because the animation used set 400+ points manually while using Animation is much more readable and significantly easier to edit.

14

Hi Vortex,

I don’t think this solution works. Here is your playground with better visibility: https://playground.babylonjs.com/#2I8Y3S#15

I added some points that form a square to see how it behaves in each. It turns correctly on most but I still havent figured out why it does the long form of the turn in some certain ones. Any help? Thanks!

1 Like