Question

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

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

这是我的mainloop函数：

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的角度来看，您正在使用donuts将甜甜圈添加到.push()数组中，但绝不会将其从数组中删除，而只是从场景中删除。因此，您的阵列当然将无限增长。当您在数组自己的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);
};

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

1 个答案: