Make HTML Content Clickable Over Three.js Content

I am making an animation with moving objects in Three.js. In this animation, I create a text bubble when an object is clicked, and it has an “X” button to close it. However, if the x button overlays a 3D Object from Three.js, then the button is ignored entirely and the 3D Object gets clicked instead. How can I avoid this and instead allow this HTML content to always take priority?

I am using raycasting to detect clicks on my 3D Objects, if that is helpful. I have already tried giving the button a higher z-order, however that did not work. And, to be clear, visually the HTML content is on top of the 3D Objects.

Additionally, it would be nice if clicking in the text bubble would not fall straight through to an object beneath the text bubble.

Edit: here is the simplified code for my onclick function (works for my 3D Objects). I bound a different onclick function to specifically my button in question.

document.addEventListener('mousedown', () => {
    raycaster.setFromCamera(mouse, camera);
    const hits = raycaster.intersectObjects(scene.children);
    if(hits.length > 0) {
        ---do stuff---
    }
    renderer.render(scene, camera);
});

Answer

See the top answer at this link: How can I block a THREE.js raycast with HTML elements?

This worked perfectly for me.

Advertisement

Answer