Different Animations from .glb without Looping

Questions
1

Hi Guys,

first of all, I’m pretty new to babylon.js and also not really a programmer. But I already figured out how to load .glb and how to start animations on Buttons ‘klick’.

Oh and sorry for my english, I’m german, so not native to english. :slight_smile:

My problem is the following:
I want to start animations implemented in an .glb on klick. But they always play in loop mode.
Can you lead me a way, how to play them only once.

As i was not able to load my .glb to the playground, I use that Playground example for my tests: https://playground.babylonjs.com/#6I67BL#51

I just cloned the example, because I totally messed up my former test file. So it is not changed comparing to the original.

I would really apprechiate help on that problem.

EDIT--------------------------

I think I found a solution. It now plays the animations without loop.

Still not able to load my .glb in the Playground, I post the Code:

    var canvas = document.getElementById("renderCanvas");
    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
    var delayCreateScene = function () {
    	engine.enableOfflineSupport = false;
    	engine.displayLoadingUI();
    	var scene = new BABYLON.Scene(engine);
    
    	// Camera
    	var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 1.3, Math.PI / 3, 2, new BABYLON.Vector3(0, 1, 50), scene);
		camera.lockedTarget = new BABYLON.Vector3(-20, 20, 0);
    	camera.attachControl(canvas, true);
    	camera.lowerRadiusLimit = 0.1;
    	camera.upperRadiusLimit = 50;
    	//camera.wheelDeltaPercentage = 10;
    
    	// Lights
    	var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    	light.intensity = 0.6;
    	light.specular = BABYLON.Color3.Black();
    
    	var light2 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
    	light2.position = new BABYLON.Vector3(0, 5, 5);
    
    	// Shadows
    	var shadowGenerator = new BABYLON.ShadowGenerator(1024, light2);
    	shadowGenerator.useBlurExponentialShadowMap = true;
    	shadowGenerator.blurKernel = 32;
    
	//keine Startanimation
	BABYLON.SceneLoader.OnPluginActivatedObservable.add(function (plugin) {
    plugin.animationStartMode = BABYLON.GLTFLoaderAnimationStartMode.NONE;
}, undefined, undefined, undefined, true);

    	// Object and Shadow
    	BABYLON.SceneLoader.ImportMesh("", "assets/rollon01/", "raum01_CAD01_v02.glb", scene, function (newMeshes) {
    		shadowGenerator.addShadowCaster(scene.meshes[0], true);
    		for (var index = 0; index < newMeshes.length; index++) {
    			newMeshes[index].receiveShadows = false;;
    		}
    
    		var helper = scene.createDefaultEnvironment({
    			enableGroundShadow: true
    		});
    		helper.setMainColor(BABYLON.Color3.Gray());
    		helper.ground.position.y += 0.01;
			
			var idleAnim = scene.animationGroups.find(a => a.name === 'CINEMA_4D_Main');
			var roll1Anim = scene.animationGroups.find(a => a.name === 'Explosion_01');
			var roll2Anim = scene.animationGroups.find(a => a.name === 'Schiene_01');
    
	//UI
	var ui = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui");
    var panel = new BABYLON.GUI.StackPanel();
    panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
    ui.addControl(panel);

    var playButton = BABYLON.GUI.Button.CreateSimpleButton("play", "Play");
    playButton.onPointerClickObservable.add(function () {
        roll1Anim.play(false, -1,5, 0);
    });
    playButton.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
    playButton.width = 0.1;
    playButton.height = "40px";
    playButton.color = "white";
    panel.addControl(playButton);
	
	var playButton = BABYLON.GUI.Button.CreateSimpleButton("play", "Schließen");
    playButton.onPointerClickObservable.add(function () {
        idleAnim.play(false, -1,5, 0);
    });
    playButton.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
    playButton.width = 0.1;
    playButton.height = "40px";
    playButton.color = "white";
    panel.addControl(playButton);
	
	var playButton = BABYLON.GUI.Button.CreateSimpleButton("play", "Play1");
    playButton.onPointerClickObservable.add(function () {
        roll2Anim.play(false, -1,5, 0);
    });
    playButton.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
    playButton.width = 0.1;
    playButton.height = "40px";
    playButton.color = "white";
    panel.addControl(playButton);

    engine.hideLoadingUI();
    	}, function () {
    	});        
    	return scene; }  var engine; try {
engine = createDefaultEngine(); } catch(e) {
console.log("the available createEngine function failed. Creating the default engine instead");
engine = createDefaultEngine(); }
    if (!engine) throw 'engine should not be null.';
    scene = delayCreateScene();;
    sceneToRender = scene

    engine.runRenderLoop(function () {
        if (sceneToRender) {
            sceneToRender.render();
        }
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });

Now I have the next Questions: Is it possible to reverse one Animation? Means by adding a fourth button and by klicking that the “var roll1Anim = scene.animationGroups.find(a => a.name === ‘Explosion_01’);” runs backwards? Also is there a way to make var roll2Anim = scene.animationGroups.find(a => a.name === ‘Schiene_01’); run as loop?

2

Hello and welcome!

To not start animation automatically run this code:

    BABYLON.SceneLoader.OnPluginActivatedObservable.add(function (plugin) {
        plugin.animationStartMode = BABYLON.GLTFLoaderAnimationStartMode.NONE;
    }, undefined, undefined, undefined, true);

example: https://www.babylonjs-playground.com/#3D23K4#4

To your next question, you can play an animation backward by switching the to and from parameters :slight_smile:

1 Like
3

Thanks for the fast answer. the first Question i figured out. Found the same playground example you suggested. :slight_smile:
For the second Question (reversing animation)
You mean change: roll1Anim.play(false, -1,5, 0);
to: ‘roll1Anim.play(false, 5,-1, 0);’
?

EDIT:
Tested it. It works. Just had to change the .play to .start

2 Likes