ThreeJS unable to get the click event from CSS2DObject

Questions
,
1

I’m working with ThreeJs in order to provide a ruler for the 3d model.

I have created a div in this way and than I have put it inside CSS2DObject as in the below code

        const measurementDiv = document.createElement('div');
        const labelDiv = document.createElement('div');
        const close_button = document.createElement('button');
        close_button.type = "button";
        close_button.innerHTML ='x';
        close_button.id = lineId;
        close_button.className='measurementButton';
        measurementDiv.className = 'measurement';
        labelDiv.className = 'measurementLabel';
        labelDiv.innerText = "0.0 mm";
        measurementDiv.appendChild(labelDiv);
        measurementDiv.appendChild(close_button);
        close_button.addEventListener('onclick', function(){
            console.log( event ) ;
            // scene.remove(measurementLabels[close_button.id]);
        });
        const measurementLabel = new CSS2DObject(measurementDiv);

what I would like to do is, when I click on the button I delete the CSS2DObject.

the problem is that if I click on the button the click event is not fired. it seems that the main render view is getting the event and it does not transfer it to the underline dom element

at this link you can try a simple example https://codepen.io/mboscolo/pen/XWapaEK

thanks

2

It’s not onclick but just click.

If this does not solve your issue it’s potentially a duplicate of Onclick is not working on CSS3DObject.

3

the element.addEventListener(‘pointerdown’, () => { alert(1) }) solve the issue;
thanks

1 Like
4

thanks, this works.

1 Like