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

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.