How to hide CSS2DObject when switch scene?

Questions
1

I have two scene.
var scene1 = new THREE.Scene(); var scene2 = new THREE.Scene();
and i add the CSS2DObject to the scene1.
var labelDiv = document.createElement('div'); var label = new THREE.CSS2DObject(labelDiv); scene.add(label);
and i switch the to scene2
renderer.render(scene2, camera);
the mesh in the scene1 hide but the label(CSS2DObjcet) is still display, so how to hide the label when i switch the scene?

2

Does it work if you set the visible property of the label to false.

label.visible = false;
3

It is not work, here is the live code https://jsbin.com/karigig/1/edit?html,css,js,output.

4

label1.visalbe

It’s not visalbe but visible. Anyway, even without the typo it does not work since the renderer needs the respective scene in order to change the CSS style. So unfortunately, setting the property does not work.

However, the following code should do it:

if(isScene1){
    labelDiv1.style.display = 'none';
    labelDiv2.style.display = 'block';
  }else{
    labelDiv1.style.display = 'block';
    labelDiv2.style.display = 'none';
  }

As you can see, the idea is to directly change the style settings of the HTML elements.

1 Like