Jump to content

create mesh before render in babylon.js


jangbi
 Share

Recommended Posts

I want to create new mesh before each render, here's my code:

let snake = [
    sphere1,
    sphere2,
    sphere3
];

(function(){
    let counter = 4;
    scene.registerBeforeRender(function(){
        let newOne = BABYLON.MeshBuilder.CreateSphere(
            "sphere" + counter,
            {

            },
            scene
        );
        let head = snake[0];
        newOne.position = head.position;
        newOne.position.x += 0.02;
        snake.unshift(newOne);
        ++counter;
    });
})();

My expecting behavior is to create a series of spheres, each position.x is slightly higher than the previous one. However, there are only three meshes in the scene after rendering, like this:

enter image description here

I want to know what is wrong with my code, and how to implement it properly?

By the way, what is the difference between scene.removeMesh(mesh) and mesh.dispose()?

Here's the relative link in stackoverflow:

https://stackoverflow.com/questions/50235364/create-mesh-before-render-in-babylon-js

Link to comment
Share on other sites

scene.removeMesh will just remove the mesh from the scene but the mesh still exists

with dispose, the mesh will be disposed AND removed from the scene

 

In your case I suggest this slightly change:

newOne.position = head.position.clone();

 

Link to comment
Share on other sites

You should provide a repro in the PG: it helps a lot to get a fast answer :)

Just by running your code I think it will crash after 3 tries as the snake array will be empty so on the 4th call snake[0] will be undefined and then it will crash. You should definitely check your console to see if there is an exception

Link to comment
Share on other sites

    let canvas,
        engine,
        camera,
        scene;

    function initEngine(){
        canvas = document.getElementById("renderCanvas");
        engine = new BABYLON.Engine(canvas, true);
    }

    function createScene(){
        initEngine();

        let scene = new BABYLON.Scene(engine);

        camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 4, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        

        let light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0,1,0), scene);

        let ground = BABYLON.MeshBuilder.CreateGround(
            "ground",
            {
                width:30,
                height:30
            },
            scene
        );

        ground.position.y -= 0.5;

        let sphere1 = BABYLON.MeshBuilder.CreateSphere(
            "sphere1",
            {

            },
            scene
        );

        let sphere2 = sphere1.clone("sphere2");
        let sphere3 = sphere1.clone("sphere3");

        sphere1.position.z = -18;
        sphere2.position.z = -19;
        sphere3.position.z = -20;

        let snake = [
            sphere1,
            sphere2,
            sphere3
        ];

        (function(){
            let counter = 4;
            scene.registerBeforeRender(function(){
                let newOne = BABYLON.MeshBuilder.CreateSphere(
                    "sphere" + counter,
                    {

                    },
                    scene
                );
                let head = snake[0];
                newOne.position = head.position;
                newOne.position.x += 0.02;
                snake.unshift(newOne);
                ++counter;
            });
        })();

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

        return scene;
    }

    scene = createScene();
    
    engine.runRenderLoop(function(){
        // box.position.z += 0.01;
        scene.render();
    });

@DeltakoshHere's the minimal demo.

Link to comment
Share on other sites

This is the link to the playground to underline my remark:

Quote

You should provide a repro in the Playground: it helps a lot to get a fast answer

 

Link to comment
Share on other sites

mmmhh.. I didn't test your PG but it looks like you create a new mesh each frame with no stop condition. This means, every 16 ms, a new instance is allocated in memory. This would crash very quickly any browser imho.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...