Raycaster intersects invisible marker roots. Is there any landmark to distinguish between displayed and hidden elements? (marker-based)

[DavidArdelean7]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I use ar-threex (https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex.js) in combination with Three.js for an AR restaurant menu application.
I am loading more GLB models using a glTfLoader and add them into the markerRoot alongside a "select" button. I have two scenes, and when touching the select button, the scene switches through a function that takes as a parameter the model mapped to the touched button.
I am using a raycaster to get the intersections and even though only one select button is effectively visible on the canvas(when I touch it), I get an array with all the buttons, all having the same distance and sometimes it gets buggy because the secondaryScene opens with another model than the one selected.
Also, sometimes even if nothing is rendered on the canvas, and it's just the plain camera video, the raycaster intersects certain elements at random positions, that triggering associated actions.

Here are some videos of the glitches: https://we.tl/t-nXbSeIcD6c.
If the current behavior is a bug, please provide the steps to reproduce.
This is a pretty big application but if one should isolate the problem:

1. initialize an ar-three ecosystem
2. register at least two markerRoots (using arMarkerControls) containing some "touchable" elements (not necessarily GLB models)
3. use the raycaster provided by Three to get the intersection onTouch (mobile devices)
4. see how objects that are children of the scene are intersected even though they are not effectively visible (through marker detection for example)

I have also opened an issue on the three.js forum, not being sure where's the trouble really (https://discourse.threejs.org/t/raycaster-intersects-invisible-on-canvas-elements-ar-js-marker-based/65081).

Please mention other relevant information such as the browser version, Operating System and Device Name
I am testing on a Redmi Note 9 Pro, using chrome (localhost).
What is the expected behavior?
I am expecting AR.js to offer some kind of landmark to differentiate between the currently visible and rendered elements and the ones that are hidden such that I can filter the results of the raycaster intersection. Initially, I expected that the raycaster wouldn't even detect the elements that are not visible, but they seem to be somehow overlayed, at the same distance(z-axis).
To summarize the problem: I am sometimes "touching" other elements than the ones that I am visibly "touching" on my screen.
I've checked the elements and their material properties like: transparent, opacity, visible; they seem not to be influenced by the marker-detection process.
If this is a feature request, what is motivation or use case for changing the behavior?

[aadityactruh]

Hello Everyone,

Did anybody find a fix to this problem?
I'm developing a web app with THREEx + Threejs with AR but for me, it sometimes recognizes clicks or touches and sometimes doesn't, Sometimes, the invisible marker object gets selected. in some cases, I get ghost clicks. on both desktop and phone.
Any help would be greatly appreciated!