What's the correct way to remove CSS2DObject?

Questions
1

I found the CSS2DObject seems is added to the document…
I tried add CSS2D to a mesh following the Eath/Moon example, but not sure how to remove them.
Any suggestion appreciated.

1 Like
2

Have you tried it with Object3D.remove()? CSS2DObject is inherited from Object3D so this method is available for CSS objects.

3

Thank you for replying.
Upon which object should I call Object3D? on window? seems not exists…and what’s the parameter for remove()?

4

I tried with following approach seems works for me.
first give labelRenderer an id

labelRenderer.domElement.id = 'labelDiv'

then whenever need update div, reset its content like this:

const labelDiv = document.querySelector('#labelDiv')
labelDiv.innerHTML = ''

Thanks anyway!

1 Like
5

In the official example, labels are added like so:

var earthLabel = new CSS2DObject( earthDiv );
earth.add( earthLabel );

You can remove the label object like so:

earth.remove( earthLabel );
2 Likes
6

Thank you @Mugen87. I created an array of label, lost references to them :slight_smile:

7

Hi all,

Sorry by advance for either my not fluent english, and usage of this forum as begginer

Searching the same feature, I would like to explain my understanding and propose a better targetted solution, to remove completely a selection of html CSS2D objects :
Mugen87 :

earth.remove( earthLabel );

Unfortunately it will detach earthLabel div objet from earth three objet
but will not delete earthLabel div object from the document. With intensive usage you will get an awful quantity of labels in your page.

So solution in order to delete properly from the document all the div labels of a given class, would look like Daofeng_Li solution

Daofeng_Li : deletes all the renderer’s div
This deletes everything.

In order to delete some identified labels, you might do sthg like :

labelDiv=document.querySelector('#labelDiv'); // same beginning
allLabelsToDelete=document.querySelectorAll('#labelDiv .label') // takes children of class "label" like in moon-earth example
forEach (elem in allLabelsToDelete ) {
labelDiv.removeChild(elem) ; }'

Best regards

8

I don’t think this is true, see three.js dev template - module - JSFiddle - Code Playground.

Can you please modify the fiddle in order to demonstrate the issue.

9

Good point Mugen87. Actually I tested it, and .remove does not remove the DOM object neither the three object, but make them “out of scope” - but reusable. If they are reusable, thay are kept, aren’t they ?
(even in the demo where memory leaks do not matter)
The question is to know whether or not the garbage collector would clean such objects. I am not sure, I hope so because it would make our work easier.

Here is my test :

var etiq=document.createElement( 'div' );
etiq.className = 'labelHaut';
etiq.textContent = 'TEST';
etiq.id="etiq"; 
var oetiq = new CSS2DObject( etiq );
regleHaut.add(oetiq);
oetiq.name="TEST OETIQ";
oetiq.position.set(0,0,0);

regleHaut.remove(oetiq);
// the dom object linked to oetiq is still there but not visible even in console
// prooving: 
regleHaut.add(oetiq); // can also be done though a user event 
console.log ('text content :'+ etiq.textContent);

// so if you repeat this in a 1.000.000 array, you leak some memory…
// pending questions : 1/ such unlinked dom objects, are they cleand by GC (garbage collector) 2/ same question for three.js removed object.

Regards, and thanks for your answers

10

The CSS2DObject.remove() method is responsible for removing the 3D node from the scene graph and the respective DOM element from the document. Of course the objects are still in memory unless you remove all references to it so they are GC collected.

Just repeatedly call add()/remove() should not produce a memory leak.

1 Like
11

Great thanks, I trust you deep knowledge of JS ! (I 'll have another question in another thread since you’re co-author of the example
three.js examples )

Regards,

12

Can you please modify the fiddle in order to demonstrate the issue.

The issue happens when we are using Object3D.clear() method. In this case CSS2DObject element persists in the DOM tree. The correct behavior in this case should be similar to other objects, they are removed from the scene on the next render.
Here is the example of the problem (line 76).

UPDATE. Found the hacky way to solve this by using the remove event here. Thanks Mugen87.