在 babylon.js 渲染之前创建网格答案

【问题标题】：create mesh before render in babylon.js在 babylon.js 渲染之前创建网格
【发布时间】：2018-10-18 12:12:44
【问题描述】：

我想在每次渲染之前创建新的网格，这是我的代码（一个最小的演示）：

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();
});

我的预期行为是创建一系列球体，每个position.x 比前一个略高。但是渲染后场景中只有三个网格，像这样：

结果

我想知道我的代码有什么问题，以及如何正确实现它？

对了，scene.removeMesh(mesh)和mesh.dispose()有什么区别？

【问题讨论】：

你的代码应该循环吗？我在那里看不到任何循环机制。另外，您希望创建多少个球体？
@DavidBasalla 只是我的一部分代码，关于registerBeforeRender，可以看这个页面，doc.babylonjs.com/api/classes/…。
你说你期待一系列球体。多少？一个系列向我暗示了某种循环。我建议将 console.log /debugger 语句放入创建新球体并检查您希望看到的值的函数中。
@DavidBasalla 我已经尝试过这样做。蛇数组的长度确实在不断增加。

标签： javascript babylonjs

【解决方案1】：

因为这句话。

newOne.position = head.position;

它只是复制一个参考。所以现在新球体和蛇[0]共享同一个位置实例，所以所有新创建的球体共享同一个位置实例（通过持有一个位置引用），并且位于同一个位置。

【讨论】：