Scene.remove() not working - scene.children shows objects deleted, but objects till visible in scene!

Hi all;

I have a scene with 50 GLTF objects. If I run a loop, such as:

const n = scene.children.length - 1; 
for (var i = n; i > -1; i--) {
    scene.remove(scene.children[i]); 
}

The objects are removed as shown in console.log(scene.children) BUT the meshes are still visible in the scene & Orbit Controls becomes unresponsive.

Has anyone had this situation before?

Can you try it with scene.clear() instead?

BTW: It’s best to demonstrate issues like yours with a live example: three.js dev template - module - JSFiddle - Code Playground

^ I tried to edit but it got deleted.

I believe I’ve found the issue -

renderer.setClearColor(0xffffff, 0);
renderer.autoClear = false;

When these are set, the error occurs. When they are not set, it works as expected. Seems like a transparent scene background crashes the renderer when using scene.remove(). !

Probably because you are a new user. Please try it again it should work now.

I can’t imagine a reason why this should happen.

i think the scene.remove() is doing fine, why it looks like the gltf is not removed because the animate function encountered an error when u removed the gltf. when u remove an object u must halt the animate function after the removal is complete then resume the animate function

try this solution to remove ur gltf properly including all associated materials and textures

“when u remove an object u must halt the animate function after the removal is complete then resume the animate function” - really? I’ve never needed to do that before.

halting the animation is barely noticible, but giving micro seconds halt allows ur scene.remove() or memory management function to safely remove and deallocate the browser vram, this is maybe irrelevant on few gltf removal but this will prevent errors on large scale threejs project involving hundreds of gltf models.