Rotation of a Mesh by clicking with a ease

I have a question about start a animation by clicking. But i want that de mesh rotate one time by clicking with a ease.

see below what already works well only he has to stop to 1 round

            function startAnimation() {
            var alpha = 0;
                scene.registerBeforeRender(function () {
                    robot.rotation.y = Math.sin(alpha) * 3
                    alpha += 0.01;
                })
            };

I haven’t dealt with easing functions, but hope this is helpful: Animations - Babylon.js Documentation

Thank you for your comment how can I measure that he has made exactly 1 rotate. Everything works perfectly, just not sure how I can measure that he has made 1 circle and that he is back in his position
is:
// load model
BABYLON.SceneLoader.ImportMesh(null, “./”, “logo-happy-animatie.glb”, scene, function (newMeshes) {

            var robot = newMeshes[0];

            robot.rotationQuaternion = undefined;
            robot.position = new BABYLON.Vector3(0, 0, -80);
            robot.rotation.y = 0.80;

            function startAnimation() 

            var alpha = 0;
                scene.registerBeforeRender(function () {
                    robot.rotation.y = Math.sin(alpha) * 3
                    alpha += 0.01;
                })
            };

            document.querySelector('.animate-button').addEventListener("click", startAnimation)

Turned a full circle when alpha = 2 * Math.PI;

so to turn just one full circle you need something like

var alpha = 0;
var circleFinished = false;
scene.registerBeforeRender(function () {
    robot.rotation.y = alpha;
    if (!circleFinished) {
         alpha += 0.01;
         if (alpha >= 2 * Math.PI) { // one further rotation to complete circle
            alpha = 2 * Math.PI;
            circleFinished = true;
        }
     }
})

However the rotation of your robot is 3 * Math.sin(alpha) the maximum value of which is 3 < PI so the robot never completes half a circle. If you want your robot to turn back and forth in complete circles you need the maximum value to be 2 * Math.PI

For example Babylon.js Playground

If you want just one cycle, ie rotate a full circle and the rotate full circle back then alpha goes from 0 to PI https://www.babylonjs-playground.com/#EYQN9C#1

For oscillations of same length use positive values of sine https://www.babylonjs-playground.com/#EYQN9C#2

1 Like