Three.js - 从循环中动态创建的数组中删除对象

Question

我正在使用 three.js 来创建一个“落下的甜甜圈”的动画。这些甜甜圈在每次场景渲染时动态生成，并被推送到一个数组中。

每个甜甜圈都是用随机的起始 x 位置和速度创建的，但它们都应该从屏幕顶部开始，然后垂直向下移动，直到它们到达我希望删除/移除它们的屏幕的某个点.虽然我可以轻松地从场景中移除对象，但我正在努力从数组中移除引用，该数组在每次渲染时都会变得更大，并且希望以某种方式进行优化。有没有其他方法或解决方案？我对threejs很陌生，对javascript也比较陌生。在此先感谢:)))

这是我的主循环函数：

let donuts = [];

let mainLoop = function() {

    //create donut with a starting position and add to donuts array
    donuts.push(createDonut());

    donuts.forEach((donut)=>{
        scene.add(donut);
        donut.position.y += gravity * Math.random(); 

        if(donut.position.y <=  -1) {
            donut.geometry.dispose();
            donut.material.dispose();
            scene.remove(donut);
        }
    });

    renderer.render(scene, camera);
    requestId = requestAnimationFrame(mainLoop);
}; 

Answer 1

从 JavaScript 的角度来看，您正在使用 .push() 将甜甜圈添加到 donuts 数组中，但您永远不会将它们从数组中删除，只是从场景中删除。所以，你的数组当然会无限增长。在数组自己的 forEach 循环中，您也不应该从数组中删除元素。例如，如果您从 10 个项目开始，开始循环，然后删除一个元素，您的循环仍会尝试计数到 10，但现在您只有 9 个元素！

从 Three.js 的角度来看，您不应该以这种方式删除和重新生成对象，因为它们会降低您的性能并可能造成内存泄漏，因此您的页面会随着时间的推移消耗越来越多的内存.

相反，标准做法是在开始时初始化您需要的几何图形，然后尽可能地重复使用它们。像这样的：

let donuts = [];

// Initialize 20 donuts once
for (let i = 0; i < 20; i++) {
    // Create donut at a random y-position between 10-20
    let newDonut = createDonut();
    newDonut.y = Math.random() * 10 + 10;

    donuts.push(newDonut);
    scene.add(newDonut);
}

let mainLoop = function() {
    donuts.forEach((donut)=>{
        donut.position.y += gravity * Math.random(); 

        if(donut.position.y <=  -1) {
            // Reset random Y position to use again
            donut.position.y = Math.random() * 10 + 10;
        }
    });

    renderer.render(scene, camera);
    requestId = requestAnimationFrame(mainLoop);
};