Stop starting animations from cheetah3D

Hi guys,

I have managed to export from cheetah3D glb models with 2 animations.
These are named Take1 Take2.
In cheetah3D I have Take1 selected and therefore the animation plays and loops in Babylon.

I now need stop any animation and create a couple of buttons to start and stop these animations.

Within the GBL file I see the following :slight_smile:

"animations":[{"name":"Take1","channels":[{"sampler":0,"target":{"path":"translation","node":62}},{"sampler":1,"target":{"path":"scale","node":62}},{"sampler":2,"target":{"path":"rotation","node":62}}],"samplers":[{"input":248,"interpolation":"LINEAR","output":249},{"input":248,"interpolation":"LINEAR","output":250},{"input":248,"interpolation":"LINEAR","output":251}]},{"name":"Take2","channels":[{"sampler":0,"target":{"path":"translation","node":61}},{"sampler":1,"target":{"path":"scale","node":61}},{"sampler":2,"target":{"path":"rotation","node":61}}]

I tried this Play Animation Button [SOLVED] - Questions & Answers - HTML5 Game Devs Forum

How do I access these via code please.

Cheers

Steve Warby

I have simplified the project.
In Cheetah3D I have created a box that has a simple animation and exported to GLB.

here is the GLB fils.
simpleAnim.glb.zip (3.4 KB)

The animation I am trying to stop & start is ‘Take’

Cheers

Steve Warby

Hello you can stop all animations with scene.stopAllAnimations()
And then you can get the animatrion group you want from scene.animationGroups and then simply start it with .play()

When I use that code I get error

TypeError: undefined is not an object (evaluating ‘scene.stopAllAnimations’)

same with scene.animationsEnabled = false;

The animation is already in the 3D model I export from Cheetah3D.
It automatically starts so I am not doing any code to start the animation.

Is this the issue.

If I drag any of my test models into the sandbox I see the left hand side the animations ( eg Take1 - Take2 )

In the sandbox I can stop the animations and select each on and start them.

sample 3Dmodel here

www.toolfolks.com/babylon3/kidHouse1.glb

Code:

var scene;
var engine;
var meshesForAnimation;
      
doSomeInitWork=function(){
        // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            engine = new BABYLON.Engine(canvas, true);

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                //var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
                // var box = BABYLON.Mesh.CreateBox('Box',1,0,scene);
                // glb or gltf exports the animation. Can we trigger this
                var box = BABYLON.SceneLoader.Append("", "models/kidHouse1.glb", scene, function (scene) {
    // do something with the scene
});
                // var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, box.position), scene);
                 var camera = new BABYLON.ArcRotateCamera('arcCamera1', BABYLON.Tools.ToRadians(45),BABYLON.Tools.ToRadians(45),10.0,box.position, scene);
                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());
                //camera.lowerRadiusLimit =2;  // how close to zoom in
                //camera.upperRadiusLimit = 50;  // how far away we can zoom out
                camera.wheelPrecision = 100;
                //camera.collisionRadius = new BABYLON.Vector3(0.5, 0.5, 0.5)
                //scene.collisionsEnabled = true;
               // camera.checkCollisions = true;
               // box.checkCollisions = true;
                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
               // var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                //sphere.position.y = 1;

                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

            // call the createScene function
            var scene = createScene();

            // run the render loop
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
}

Traced the issue this line

// call the createScene function
var scene = createScene();

removed the var

I cannot work out the correct syntax to play ‘Take1’

What is the code please.

console.log(scene.animationGroups);

Array (2)
0 e {name: "Take2", _targetedAnimations: Array, _animatables: Array, _from: 0, _to: 10, …}
1 e {name: "Take1", _targetedAnimations: Array, _animatables: [], _from: 0, _to: 10, …}

Tried various methods.

btnPlayAnim.onclick=function(){
  //animationGroup.play(true);
  //scene.play('Take1');
 // scene.beginAnimation(box, 0, 100, true); 
  //var newAnimation = scene.beginAnimation('Take1', 0, 100, true);
 // newAnimation.restart();
  //scene.animationGroups.play('Take1');
  //Take1.pause();
  var animationGroup = scene.animationGroups;
  //animationGroup.play(true);
  //scene.animationGroups['Take1'].play();
  console.log(scene.animationGroups);
  scene.beginAnimation(animationGroup[1], 0, 100, true, 1);
  //scene.beginAnimation(skeletons[0], 46, 60, true, 1.0);
}

Found it … Eventually

  var Take1 = scene.animationGroups[0];
  Take1.play(true);
  var Take2 = scene.animationGroups[1];
  Take2.play(true);

Yep animationGroups is an array so indexed by numbers. Sounds like you found your answer :slight_smile:
Congrats!

As a reminder you will get quicker answers by providing a reproduction case in the Playground so we can check your code directly