0-6 Rotation direction problem

Hello, I am changing the rotation of the circle in the example with animation on the y-axis. While the old value of rotation.y is 6, the new value is 0. Everything happens successfully, but instead of moving to the left, the circle moves to the right and makes a full circle around it. What I want is for the newcomer to go to the new rotation.y value from the direction closest to him instead of going full circle. I hope I was able to explain. Sorry for the English translation :). Thank you in advance for your help.

Sphere Rotation Animation with problem | Babylon.js Playground (babylonjs-playground.com)


what do you mean by full circle around and turning closest ???

The playground is expected, you are doing almost a full rotation 6 is close-ish to 2 * PI and you animate the euler Y so a rotation around the sphere local vertical axis. I am not sure to understand what the issue is.

1 Like

I am not sure what you mean with “instead of turning closest.” I asked GPT and tried to recreate his answer. In my defence :slight_smile:
a) all functions are present and b) there is no error message. But the question is if the answer is also what you are looking for.

The issue with your code is that you are animating the rotation of the sphere along the y-axis, but you are using a constant interpolation mode BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT. This means that the animation will not interpolate between the starting and ending keyframe values, but rather, it will jump directly to the end value.

To make the sphere rotate smoothly from 0 to 6, you should change the interpolation mode to BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE. This will cause the animation to loop continuously and interpolate smoothly between the starting and ending keyframe values.

Here’s the updated code:

phpCopy code

function sphereAnimation() {
    sphere.animations = [];

    let keys = []; 
    let yRotationAnim = new BABYLON.Animation('yRotation', 'rotation.y', 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    // Animation keys
            frame: 0,
            value: 0

            frame: 60,
            value: 6

    // Set keys and push animation

    // Start animation
    return scene.beginAnimation(sphere, 0, 60, true);

Changes made:

  • BABYLON.Animation.ANIMATIONTYPE_FLOAT is used instead of BABYLON.Animation.ANIMATIONTYPE_VECTOR3 because we are only animating the y-rotation.
  • rotation.y is used instead of rotation to specify that we are only animating the y-rotation.
  • BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE is used as the interpolation mode.
  • The ending keyframe value is changed to 6.
  • The starting keyframe value is changed to 0.
1 Like

Can you show us what is the behavior you want to have? With some diagrams or something. It would make it easier to help.

1 Like

I think I understand your problem. I hope so. :sweat_smile: :wink:
Point is if you want to make a full revolution, 6 is an incorrect value. The correct value is Math.PI*2 (~3.141593 * 2).
Something like this (may be):

1 Like

Sorry for the English translation and grateful for your answers. I have explained the problem in more detail in a neater way. I hope I was able to explain this time :).

Yes, that’s a lot clearer. So the simple answer is, add a minus in front of the value to rotate the other way round. Something like this:

Edit: And if you want to reach the closest of the two points from the actual rotation, the rest is a matter of maths. Calculate the offset for the two points, pick the smallest one and use positive or negative value depending on whether it is clockwise or counter-clockwise.

Your answer makes sense but unfortunately it’s not the solution for me. Values ​​should not change. 0 and 6 should remain. The reason for this is related to the values ​​that came to me in my project :slight_smile:

Interpolating between quaternions will do what you want because it always takes the shorter path:


Sphere Rotation Animation with problem | Babylon.js Playground (babylonjs-playground.com)

Thanks for the answer. Your answer does not solve my problem, but you have achieved the desired result :). The current problem is that the rotation.y value does not change. The rotation.y value of the sphere needs to be changed. I don’t need to do this in EndAnim because the animation will run continuously. Any idea of ​​this solution with a modified rotation.y value? I hope I was able to explain with my English :).

I don’t think it’s your english. Your english is good enough for me :smiley:
I believe it’s the logic I (personally) do not quite understand here. I didn’t propose an animation interpolation because (correct me if I’m wrong) I was assuming that the reason why the sphere would eventually stop in between two ‘steps’ (let’s call them 'steps, from 0 to 6)… the reason would be because the user can somehow interact with it and next (on end of whatever interaction) the sphere would ‘lock’ again to the closest ‘step’ in rotation. That’s the way I understand it so far.

In any case, there’s one thing you cannot change and that’s the value of the rotation. You can have it expressed and handled in different ways, but the value will always be the one of the current rotation.
The only way I see to actually translate this value into 0 to 6 (steps) is, as I said, by using a variable and use this variable (and not the value of rotation) in your function. For whatever function it is and does? May be you could enhance the PG with more parts of your logic so we would get a better understanding of it?

You can do the same thing with the Y rotation if you subtract 2*PI to 6, which is still the same angle than 6 but closer to 0 (the initial Y value):