Remove method is not working as expected

Hi, I am attaching an Object3D to the Quest 3 controller in a VR scene, and upon trying to remove it using .remove method , I see no change in the controller children

Here’s what I am trying to do exactly:

        container.attach(containerback);
        leftController.controller.attach(container);

and

         container.remove(containerback);
         leftController.controller.remove(container);

In the above snippet containerback is a Box geometry and container is the Object3D
I am trying to achieve this in React Three Fiber and React Three XR, so leftController is:

const leftController = useController('left');

Am I missing on some information or does anyone know the reason for this issue?

Any help will be much appreciated!

Looks like it should work. Note there is a difference between .add and .attach

Can you post a working reproduction of the issue in a fiddle||codepen||glitch?

Did you check (by debugging, tracing, or console.logging) that counterback is still a child of container at the time of removing? When an object is cloned, the parent-child link is broken.

1 Like

Give detach() a try rather than remove()

Or

add instead of attach

Is there anything as detach in ThreeJS, I could not find any documentation

I did console log the controller children and the Object still exists

I am afraid I can’t, I am under an NDA

The fact that it exists means you did not remove the correct object.

So, try removing the child of the controller, not the variable that holds the object.

As for NDA, there is absolutely no problem to make a small demo program (unrelated to your project) and if the issue persist – share this demo. If the issue is resolved, then compare both code to find where is the issue.

Hey, sorry my mistake, detach is a specific internal method of TransformControls not Object3D, so the answer I gave above is not correct and of course won’t work.