The CSS2DObject is always display='none';

Questions
1

My project is React + threejs.
“react”: “^16.13.1”,
“three”: “^0.110.0”,

this.renderer = new THREE.WebGLRenderer({antialias: true, logarithmicDepthBuffer: true,});
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize( window.innerWidth, window.innerHeight );
    // this.renderer.setSize(this.props.size.width, this.props.size.height);
    // this.renderer.shadowMapEnabled = true;
    // this.renderer.shadowMap.enabled = true;
    // this.renderer.shadowMap.autoUpdate = true;
    this.container.appendChild(this.renderer.domElement);

    this.css2dRenderer = new CSS2DRenderer();
    this.css2dRenderer.setSize(window.innerWidth, window.innerHeight);
    this.css2dRenderer.domElement.style.position = 'absolute';
    this.css2dRenderer.domElement.style.top = 0;
    this.css2dRenderer.domElement.style.pointerEvents = 'none';
    // this.css2dRenderer.domElement.style.display = 'block';
    this.css2dRenderer.visible = true;
    document.body.appendChild(this.css2dRenderer.domElement);
    // this.container.appendChild(this.css2dRenderer.domElement);

    var imgDiv = document.createElement('img');
    // txtDiv.className = 'hoverTxt2';
    // txtDiv.style.marginTop = '-1em';
    imgDiv.src = 'static/image/loading.gif';
    imgDiv.style.display = 'block';
    // txtDiv.setAttribute("style", "padding: 4px; ");
    // moonDiv.style.pointerEvents = 'none';
    var imgObj = new CSS2DObject(imgDiv);
    imgObj.position.set(10, 10, 10);
    imgObj.visible = true;
    this.scene.add(imgObj);


    const txt = document.createElement("div");
    txt.id = "x1";
    txt.innerHTML = "adwdaw";
    txt.style.color = "white";
    txt.style.position = "absolute";
    txt.style.bottom = "300px";
    txt.style.right = "60px";
    txt.style.zIndex = "200";
    document.body.appendChild(txt);

    const txt2 = document.createElement("img");
    txt2.id = "x2";
    txt2.src = 'static/image/loading.gif';
    // txt2.innerHTML = "adwdaw";
    txt2.style.color = "white";
    txt2.style.position = "absolute";
    txt2.style.bottom = "300px";
    txt2.style.right = "160px";
    txt2.style.zIndex = "200";
    // document.body.appendChild(txt2);


    var imgObj2 = new CSS2DObject(txt2);
    imgObj2.position.set(10, 10, 10);
    imgObj2.visible = true;
    imgObj2.element.style.display = 'block';
    this.scene.add(imgObj2);

this is the effect
http://bmw.jingge.com/szd/automuseum/

Z7PTRY{}$8V8DJ%U8YHCI_T
Z7PTRY{}$8V8DJ%U8YHCI_T1602×601 269 KB

image
image1659×523 360 KB

I set it display=‘block’ when initializing , but it’s useless.

2

CSS2DRenderer ensures to only render objects which are inside the view frustum. If not, the display CSS property of the respective HTML elements are set to none. So you have to ensure that your instances of CSS2DObject are properly placed in the scene.

BTW: The official example shows that it works as expected:

https://threejs.org/examples/css2d_label