CSS2renderer is not working with webgl renderer

when we add css2renderer on time like label then my screen stuck seems like orbit control is not working .I’m using transform control in my project and its also not working when annotation label add on model with add listener.

I’ll bet you that when you added a CSS renderer on top of your <canvas>, then the canvas is no longer receiving mouse events because the new renderer element is covering it.

Just add pointer-events: none; to the <div> that contains the CSSRenderer, so your mouse events can “go through” it, and hit the canvas just like before.

Sorry for the late response yeah you are absolutely right but i want to add annotattion with event listener and it will not clickable

let div = document.createElement( 'div' );
div.className = 'label';
div.textContent = '+';
div.type='button';
div.id='label6';
div.style.marginTop = '-1em';
div.addEventListener("mousedown",scope_AC.uiHandler.addConnectionBtns,false);
let label = new CSS2DObject( div );
label.position.copy(pos);
childModel.add( label );

scope_AC.modeler.labelRenderer.setSize( innerWidth, innerHeight );
scope_AC.modeler.labelRenderer.domElement.style.position = 'absolute';
scope_AC.modeler.labelRenderer.domElement.style.top = '15px';
scope_AC.modeler.labelRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(scope_AC.modeler.labelRenderer.domElement );

when I mark the annotation then my scene stuck without any pointerEvent=none but when i apply this then annotation not clickable

Add pointer-events: auto; only to the divs you want to be clickable.

1 Like

Hi I tried all the possible options but it;s not working anymore with threejs version 0.140.2 or latest 0.142.0.

I have used cdn libraries not the npm install jsm files.
See below

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/examples/js/renderers/CSS2DRenderer.js"></script>

<body>
      
    
  </body>

If anyone can look into it would be much apriaciated