Gltf Animation loops when i click, how to stop the loop

Questions
, ,
1

Hallo everyone,
i made a Gltf Model with a Animation. What I want is: the animation doesn’t play at first. The animation starts playing once when I click on the model. Then I click on the model again and the animation plays backwards once. Click again to play the animation normally once. and so on. I made it BUT, when the animation is not finished, I click on the model and the animation loops automatically. I dont want it to loop. How to fix it?

I created a test model. This is my code:

var createScene = function() {
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

camera.setTarget(BABYLON.Vector3.Zero());

camera.attachControl(canvas, true);
BABYLON.SceneLoader.ImportMesh(
    "",
    "https://raw.githubusercontent.com/CieOriKing/TestCube/d85a6e2505c76954d8f3e338aefc04ec033cf53e/TestCube.gltf",
    "",
    scene,
    function (newMeshes) {          
        scene.createDefaultCameraOrLight(true, true, true);
        scene.createDefaultEnvironment();
        
        var animation = scene.animationGroups[0];
        animation.speedRatio = 0;
        animation.loopAnimation = false;
        var isForward = true; // 
        var isPlaying = false; // 
        var isEnd = false; // 
        var actionManager = new BABYLON.ActionManager(scene);
        newMeshes.forEach(function(mesh) {
            if (mesh.getTotalVertices() > 0) {
                mesh.actionManager = actionManager;
                mesh.actionManager.registerAction(
                    new BABYLON.ExecuteCodeAction(
                        BABYLON.ActionManager.OnPickTrigger,
                        function() {
                            // play animation
                            if (!isPlaying) {
                                isPlaying = true;
                                isEnd = true;
                                console.log("isPlaying: "+isPlaying);
                                animation.speedRatio = 1; // set the speed
                                animation.play(true);
                            } else {
                                // reverse
                                if (isEnd) {
                                    isForward = !isForward;
                                    animation.speedRatio = isForward ? 1 : -1; // switch
                                    animation.play(false);
                                } else {
                                    // stop
                                    isPlaying = false;
                                    isEnd = false;
                                    animation.pause();
                                }
                            }
                        }
                    )
                );
            }
        });
});
return scene;

};

2

Looks like a bug to me, let me fix it ASAP.

2 Likes
4

It looks like we are not supporting dynamically changing the speedratio from positive to negative. You can only do it if stopping the animation.

@Evgeni_Popov can you confirm ?

1 Like
5

Thanks for your answers. Is it possible to disable mouse clicks while the animation is running?

6

I found a way to make it work:

Just stopping the animation and setting the speed ratio was not working (at least for me), the animation was restarting from frame 0 and not from the current frame. I needed to get the current frame and play the animation from this frame to the from or to frame value, depending on the direction of the animation.

@Cie You can check animation.isStarted to know if the animation is still playing or not to disable mouse clicks.

4 Likes
8

Thank you very much!

9

This PR will make your first PG work, without the start/stop workaround:

2 Likes