MSLX

Animation not playing

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.