Proper way to remove object and CSS2DObject associated

Questions
,
1

Hi,

context :
I have a 3D object with a CSS2DObject associated.

Problem :
When removing the 3D object, the CSS2DObject associated is still there.

As I have a lot of objects, How could I remove the 3D object and the CSS2DObject at the same time ?
Is there a best practise there ? Is there a link between the 3D object and the CSS2DObject ? And how to get it ?

Best regards,

2

If you add the instance of CSS2DObject as a child to the instance of Object3D, removing the 3D object should also remove the CSS related entities.

3

thank you for your reply but I still have the problem.

let label = new CSS2DObject(contenerDiv); // Html element
mesh.add(label); // Mesh is the 3D object

There is the way to remove the 3D object :
scene.remove(mesh);

There is a screenshot of the Three.js object :

Screenshot 2020-08-24 at 3.57.01 PM
Screenshot 2020-08-24 at 3.57.01 PM3322×1040 363 KB

But the html of the CSS2Object are not removed…

4

Please check out:

5

Hi,

I have modified the fiddle.

There is what I have added from your fiddle :

 	var controls = new OrbitControls( camera, labelRenderer.domElement );
    controls.minDistance = 5;
    controls.maxDistance = 100;

  // there is the remove event. if you click you can remove the moon but the label "Moon" won't be removed

 document.addEventListener("click",function(){
 scene.remove(moon);
 })

I have removed your function :

setTimeout( function () {

	moon.remove( moonLabel );

}, 1000 );

https://jsfiddle.net/charlieWhite84/b9adv0s4/4/

1 Like
6

Okay, I see the difference now. Thanks for updating the fiddle.

Yeah, the problem is that CSS2DObject.remove() needs to be called which is not the case the respective 3D object (parent) is removed from the scene graph. However, you could add an event listener to the removed event and then remove all children from the 3D object. Would this work for you?

https://jsfiddle.net/pcm5djx8/

7

Yes, everything is working fine now. Thank you