solved Animation not playing

[MSLX]

Hi All,

I am facing an issue where Door animation is not playing in a particular situation. If I am loading only one babylon file then the animation plays without any issues. But If I have multiple babylon files then the animation is not played.

This is part of my js code:

=====================================================================================================

if (BABYLON.Engine.isSupported()) {
        
        canvas = document.getElementById("renderCanvas");
        engine = new BABYLON.Engine(canvas, true);
        scene = new BABYLON.Scene(engine);    

        BABYLON.SceneLoader.Append("./", "Walls.babylon", scene);

        scene.executeWhenReady(function () {
            
            scene.gravity = new BABYLON.Vector3(0, -0.9,0);
            scene.activeCamera.ellipsoid = new BABYLON.Vector3(1000,1000,1000);
            scene.collisionsEnabled = true;
            scene.activeCamera.checkCollisions = true;
            //scene.activeCamera.applyGravity = true;    
            scene.activeCamera.maxZ = 80000;    
            
            // Attach camera to canvas inputs
            scene.activeCamera.attachControl(canvas);
            
            BABYLON.SceneLoader.ImportMesh(null, "./", "Ceiling.babylon", scene);

            var door1 = scene.getMeshByName("Door1");;
            var frameRate = 20;

            // Trigger Boxes
            var openTriggerBox = BABYLON.Mesh.CreateBox("openTriggerBox", 3000, scene);
            openTriggerBox.position.x = 746.9932;
            openTriggerBox.position.y = 1500;
            openTriggerBox.position.z = -4287.0;
            openTriggerBox.checkCollisions = true;
            openTriggerBox.isVisible = false;

            scene.activeCamera.onCollide = function (colMesh) {
                if (colMesh.uniqueId === openTriggerBox.uniqueId) {
                    openTriggerBox.collisionsEnabled = false;
                    openTriggerBox.checkCollisions = false;
                    scene.beginDirectAnimation(hingeDoor1, [openDoor1], 0, 25 * frameRate, false);
                    scene.beginDirectAnimation(hingeDoor2, [openDoor2], 0, 25 * frameRate, false);
                }
            }

            var hingeDoor1 = BABYLON.MeshBuilder.CreateBox("hinge1", {}, scene)
            hingeDoor1.isVisible = false;
            door1.parent = hingeDoor1;
            hingeDoor1.position.y = 2;

            //for door 1 to open and close
            var openDoor1 = new BABYLON.Animation("openDoor1", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

            var open1_keys = []; 

            open1_keys.push({
                frame: 0,
                value: 0
            });

            open1_keys.push({
                frame: 3 * frameRate,
                value: -1000
            });

            openDoor1.setKeys(open1_keys);

            engine.runRenderLoop(function() {
                scene.render();
            });

=====================================================================================================

If I remove 

BABYLON.SceneLoader.ImportMesh(null, "./", "Ceiling.babylon", scene);

line from above code then the animation works without any issues. Can anyone please point me to the mistake I am doing in this code or the solution to the problem.

[JCPalmer]

I would put the 2nd importMesh before the executeWhenReady.

[mr_pinc]

Create a playground that illustrates the problem and we'll be able to help you sort it out. 

[MSLX]

15 hours ago, JCPalmer said:

I would put the 2nd importMesh before the executeWhenReady.

If I put ImportMesh before executeWhenReady, the files never load. It will keep showing babylonjs default loading screen.

15 hours ago, mr_pinc said:

Create a playground that illustrates the problem and we'll be able to help you sort it out. 

I am not aware of how to use SceneLoader in playground. However, I have attached a simple scene with a box and sphere to replicate the issue. 

b.babylon has a plane, box and sphere. t.babylon has a teapot. A simple animation is attached to Sphere. Whenever camera collides with the Box, sphere moves 5000 units in x direction.

If I load only b.babylon the animation plays. But If I load t.babylon also using ImportMesh then the animation doesn't work.

anim.zip

[GameMonetize]

let me try to fix your code in blind mode

if (BABYLON.Engine.isSupported()) {
        
        canvas = document.getElementById("renderCanvas");
        engine = new BABYLON.Engine(canvas, true);
        scene = new BABYLON.Scene(engine);    

        BABYLON.SceneLoader.Append("./", "Walls.babylon", scene);

        scene.executeWhenReady(function () {
            
            scene.gravity = new BABYLON.Vector3(0, -0.9,0);
            scene.activeCamera.ellipsoid = new BABYLON.Vector3(1000,1000,1000);
            scene.collisionsEnabled = true;
            scene.activeCamera.checkCollisions = true;
            //scene.activeCamera.applyGravity = true;    
            scene.activeCamera.maxZ = 80000;    
            
            // Attach camera to canvas inputs
            scene.activeCamera.attachControl(canvas);
            
            BABYLON.SceneLoader.ImportMesh(null, "./", "Ceiling.babylon", scene, function() {
 var door1 = scene.getMeshByName("Door1");;
            var frameRate = 20;

            // Trigger Boxes
            var openTriggerBox = BABYLON.Mesh.CreateBox("openTriggerBox", 3000, scene);
            openTriggerBox.position.x = 746.9932;
            openTriggerBox.position.y = 1500;
            openTriggerBox.position.z = -4287.0;
            openTriggerBox.checkCollisions = true;
            openTriggerBox.isVisible = false;

            scene.activeCamera.onCollide = function (colMesh) {
                if (colMesh.uniqueId === openTriggerBox.uniqueId) {
                    openTriggerBox.collisionsEnabled = false;
                    openTriggerBox.checkCollisions = false;
                    scene.beginDirectAnimation(hingeDoor1, [openDoor1], 0, 25 * frameRate, false);
                    scene.beginDirectAnimation(hingeDoor2, [openDoor2], 0, 25 * frameRate, false);
                }
            }

            var hingeDoor1 = BABYLON.MeshBuilder.CreateBox("hinge1", {}, scene)
            hingeDoor1.isVisible = false;
            door1.parent = hingeDoor1;
            hingeDoor1.position.y = 2;

            //for door 1 to open and close
            var openDoor1 = new BABYLON.Animation("openDoor1", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

            var open1_keys = []; 

            open1_keys.push({
                frame: 0,
                value: 0
            });

            open1_keys.push({
                frame: 3 * frameRate,
                value: -1000
            });

            openDoor1.setKeys(open1_keys);

            engine.runRenderLoop(function() {
                scene.render();
            });
});

           

The trick is that Append or ImportMesh are asynchronous due to the need of loading data from Internet. So you have to use the callback to continue your code when everything is loaded

[MSLX]

10 hours ago, Deltakosh said:

let me try to fix your code in blind mode

if (BABYLON.Engine.isSupported()) {
        
        canvas = document.getElementById("renderCanvas");
        engine = new BABYLON.Engine(canvas, true);
        scene = new BABYLON.Scene(engine);    

        BABYLON.SceneLoader.Append("./", "Walls.babylon", scene);

        scene.executeWhenReady(function () {
            
            scene.gravity = new BABYLON.Vector3(0, -0.9,0);
            scene.activeCamera.ellipsoid = new BABYLON.Vector3(1000,1000,1000);
            scene.collisionsEnabled = true;
            scene.activeCamera.checkCollisions = true;
            //scene.activeCamera.applyGravity = true;    
            scene.activeCamera.maxZ = 80000;    
            
            // Attach camera to canvas inputs
            scene.activeCamera.attachControl(canvas);
            
            BABYLON.SceneLoader.ImportMesh(null, "./", "Ceiling.babylon", scene, function() {
 var door1 = scene.getMeshByName("Door1");;
            var frameRate = 20;

            // Trigger Boxes
            var openTriggerBox = BABYLON.Mesh.CreateBox("openTriggerBox", 3000, scene);
            openTriggerBox.position.x = 746.9932;
            openTriggerBox.position.y = 1500;
            openTriggerBox.position.z = -4287.0;
            openTriggerBox.checkCollisions = true;
            openTriggerBox.isVisible = false;

            scene.activeCamera.onCollide = function (colMesh) {
                if (colMesh.uniqueId === openTriggerBox.uniqueId) {
                    openTriggerBox.collisionsEnabled = false;
                    openTriggerBox.checkCollisions = false;
                    scene.beginDirectAnimation(hingeDoor1, [openDoor1], 0, 25 * frameRate, false);
                    scene.beginDirectAnimation(hingeDoor2, [openDoor2], 0, 25 * frameRate, false);
                }
            }

            var hingeDoor1 = BABYLON.MeshBuilder.CreateBox("hinge1", {}, scene)
            hingeDoor1.isVisible = false;
            door1.parent = hingeDoor1;
            hingeDoor1.position.y = 2;

            //for door 1 to open and close
            var openDoor1 = new BABYLON.Animation("openDoor1", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

            var open1_keys = []; 

            open1_keys.push({
                frame: 0,
                value: 0
            });

            open1_keys.push({
                frame: 3 * frameRate,
                value: -1000
            });

            openDoor1.setKeys(open1_keys);

            engine.runRenderLoop(function() {
                scene.render();
            });
});

           

The trick is that Append or ImportMesh are asynchronous due to the need of loading data from Internet. So you have to use the callback to continue your code when everything is loaded

your blind mode hit a bulls-eye.

[GameMonetize]

Hahaha. I'm proud then

[MSLX]

Hi @Deltakosh,

Have one more query. What is the procedure for running keyframe animation(no bones or skeltons) done in 3ds max?

Animation runs when only one babylon file is loaded. But if I load multiple files animation doesn't run. Typically same as above problem, can you throw some light on how to handle this in callback.

I have tried following in the callback function:

for (i=0; i<meshes.length;i++)

{

scene.beginAnimation(meshes, 0,100, true,1.0);

}

Thanks and Regards

[Arte]

Hi @MSLX

Try 

scene.beginAnimation(meshes[i], 0,100, true,1.0);

[MSLX]

3 hours ago, Arte said:

Hi @MSLX

Try 

scene.beginAnimation(meshes[i], 0,100, true,1.0);

Oh sorry, my mistake in last reply. The code inside for loop i tried was 

scene.beginAnimation(meshes, 0,100, true,1.0)

Apparently that didn't work. 

[MSLX]

2 minutes ago, MSLX said:

Oh sorry, some problem with forum post. I am typing squre bracket with i but when i submit reply it is not showing

 

[Arte]

Can you create playground or show all animation code?

Looks like missing:

scene.beginDirectAnimation(meshes[i], [openDoor1], 0, 1, true);

[MSLX]

Ok. Finally I was able to get the animation playing. At the same time I made few observations regarding callbacks in SceneLoader.ImportMesh. I don't know whether it is the intended behavior or some issue.

1 - If there is only one babylon file and mesh is loaded using ImportMesh then callback is required otherwise animation will not play.

2 - If there are multiple babylon files imported using ImportMesh then, all ImportMesh needs to have a callback; not only the file which has animated meshes. Even if one ImportMesh doesn't have a callback then animation will not play.

3 - It doesn't matter whether callback function has any code to execute or not. Even an empty callback will make sure the animation works.

4 - In my case, I am seeing an improved loading time when a callback is present.

Note: I have done keyframe animation in 3DS Max and exported with Auto Animation and Loop checked under Babylon properties for meshes. I haven't checked this with Bone or Skeletal animation