Remove a Group/Mesh added into the stage

I’m new in Three.js and I’m making a web configurator for a shoe.

I’ve got a base model (the raw shoe) in .gls format.
The first step is loading this raw model into the stage.

After the loading, the user can choose and apply a graphic to the shoe (
a series of predefined images).
When he selects the graphic, I load the corresponding file (.gls) and I add it into the stage.

If I print the stage object I see It creates a child called Scene with inside the group of my loaded graphic mesh.

I try to delete it but without results.
I get the object by the name scene.getObjectByName(…) and after I try to remove it scene.remove(selectedObject).

How the best practise for that ?

Thanks in advance for any advice.

Kind regards,

Is this selectedObject a child of your scene? If not, try selectedObject.parent.remove(selectedObject). Anyway make sure you replace the root object you initially added to the scene to avoid garbage of empty Object3D nodes.

Thank you! Great, It works.

When the use remove a graphic I load the default graphic.

I take this opportunity for two questions:

  • Remove in this way the mesh it’s enough for perfomance or I need to do some other things?

  • When I do scene.getObjectByName(MYPARAM) I get the requested item without thinking how deep is inside the scene (It was inside child scene of the main Scene).
    Why if I remove It from its closest parent it works (selectedObject.parent.remove(selectedObject)) and if I try to remove it from the grandparent it doesn’t works? (mainScene.remove(selectedObject))

Thanks in advance,
sorry for my english and kind regards,


Depends if you want to get rid of the geometry and/or materials, textures etc (see here). Resources in THREE are freed calling geometry.dispose() for example.

The remove method only cares about the own children, so you need to remove it from it’s actual parent.

Thanks and have a nice day,