Make HTML Content Clickable Over Three.js Content-CodePudding

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);
});

CodePudding user response：

I was able to accomplish that in react with just z-index for the clickable objects, but if that doesn't work you can try using pointer-events: none; on your 3D render. See screen capture here https://streamable.com/yzp68c. The webGL globe uses three.js in react and is the full width of the active area where the links sit on top.

Then outer container is position: relative;...the links sit in a div inside with position: absolute; z-index: 1000; and then the earth three.js render is the last div but still inside the container.

CodePudding user response：

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

This worked perfectly for me.