Element in scene overlapping HTML element

Hello !

I am very new to Three.js and I am working on a project with clickable picture rotating in a 3D scene in the background and I have CTA in the page too. One of the CTA display a popup with a link. But as the pictures are still spinning in the background, the mouse only get the info from those element and not from the link. So if I try to click on the link and picture is passing under the pop-up at this moment, it will click on the picture and not the link.
Also, the cursor is customized and I don’t if my problem has anything to do with this.

Thank you for your help.

Do you mind demonstrating the issue with a live example?

You can test the beta version here https://workshop-immersif.albchr.dev/

As you will see, when you hover the images in the background the cursor changes. but even if you hover the image in the center while a image is passing behind, the cursor will detect the image and if you click it will not open the pop-up. Same with the button in the bottom corners, if an image pass behind, you cant click on it

Okay, so the background is a WebGL scene and I suppose you are using raycasting to detect any interaction with the images, right?

Couldn’t you just introduce a flag that disables raycasting when a popup is opened? Or when you hover over a DOM element in general?

I actually can’t reproduce this on my macOS with Chrome. When the popup is open, I can click on the respective link. Same for the buttons at the bottom of the page. Even if an image is behind it.

I will look it that option thank you

But does it display the right thing ? We tried with macOS yesterday and it wasn’t working. When you click on the “?” button on the bottom left corner, it should display a black screen with a paragraph in the middle of the page not another yellow background page.

Yep, that works for me.

That’s weird …
Well thank you so much for your help, I will look into the raycaster to find a solution :slight_smile: