Hide a CSS2DObject on event

Questions
,
1

I’m working on the following project: https://inhalkmaar.xtrahost.nl/

I’ve made the labels using a CSS2DObject like the following lines:

var labelDiv = document.createElement( 'div' );
labelDiv.className = 'label label'+i;
labelDiv.textContent = 'label'+i;
var LabelObject = new THREE.CSS2DObject( labelDiv );
LabelObject.position.set( 0, 0, 0 );
labels.push( LabelObject );
sphere2.add( LabelObject );

I’ve tried pushing them in an array and hiding a certain number, like labels[i].visible = true; But this doesn’t seem to do anything. I’ve tried giving them a class and hiding these but I that doesn’t do anything.

Last thing I’ve tried is giving the css classes a fadeOut();, they actually faded out but after the fade was done they reappeared.

What I’m trying to get done: Right now the dots on ‘closed’ floors are hidden, but the labels aren’t. I’d like to hide the labels when the attached dot/sphere is hidden.

2

I’m afraid I can’t reproduce. Hiding an instance of CSS2DObject by setting visible to false seems to work as expected. Check out the following fiddle to see this approach in action:

3

I’ve found where I’ve made the error. I’ve used multiple arrays for the ‘dots’ and the labels, but tried to call them with the same numbers (dots[i] and labels[i]), although the arrays didn’t have the same amount of items. This gave an error when executing the function.

Thanks for your response!