I'm currently working on an animation project using Three.js that involves moving objects. In this animation, I've created a text bubble that appears when an object is clicked, along with an "X" button to close it. However, I'm facing an issue where if the X button overlaps with a 3D object, the button gets ignored and the 3D object gets clicked instead. How can I ensure that the HTML content always takes priority over the 3D objects?
Raycasting is being used to detect clicks on the 3D objects. Despite attempting to set a higher z-order for the button, it hasn't resolved the problem. It's important to note that visually, the HTML content is positioned on top of the 3D objects.
Furthermore, it would be ideal if clicking within the text bubble doesn't register as a click on any object beneath it.
Edit: Here's a simplified version of the code I'm using for the onclick function (which works for my 3D objects). I've also separately bound a specific onclick function to the problematic button.
document.addEventListener('mousedown', () => {
raycaster.setFromCamera(mouse, camera);
const hits = raycaster.intersectObjects(scene.children);
if(hits.length > 0) {
---do stuff---
}
renderer.render(scene, camera);
});