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;
};