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.
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.
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.
