Removing mesh from group

Hello virtual folks,

I’m new to Three.js and I’m making a sample tour project using 360 images.

I’ve successfully added navigation spots in that 360 image but I’m facing one issue and that is when I’m try to remove old points that were part of prev 360 image and add new navigation point in mesh using THREE.group() it is only getting appended and not removing the old mesh I’ve added.

this is how I’m doing it currently:

let list = group.children;

          list.forEach((e) => {
            e.parent?.remove();
          });
          group.matrixAutoUpdate = true;

this is another approach I thought might work

group.parent?.remove();

Can anyone help with the right approach or what I’m doing wrong in current one?

I got a solution:

you just have to do this:

// group.remove(obj) // to remove 1 value from the group
group.remove(...group.children);  // for removing all objects from the group 
group.matrixAutoUpdate = true;

To answer your initial question: you need to add a parameter to remove:

e.parent?.remove( e );

If you want shorter code, you can just do this:

group.children = [];

Note: both the solution and my proposal does not remove the meshes from the memory, they are only unhooked from the group. You need to use dispose if you want to free memory and GPU resources.