overlayed multiple meshes problem

[shadybassily]

So currently I'm working on a carousel to display multiple planes that can be scrolled horizontally

, one after the other, like a shelf.
technically the meshes are behind each other, but when I click on one mesh, the ones behind gets affected.

for example, and for testing purposes, I console.log the index of the plane I click on, when I click on the nearest mesh to the camera, on the center, it logs index 0, but if I click on the same plane but closer to the right edge, at least 2-3 meshes get affected, so it logs 0,1,2,3

does anyone know why this happens, and if there is a work around it, becase I will use each plane to display something different.

[drcmda]

onClick={e => {
  e.stopPropagation()

it is to be expected that it picks up on all meshes the raycaster is able to pierce. it's up to you to decide to stop it, using stopPropagation just like on the dom.

[shadybassily]

Thank you so much, I dunno how I did not think of that!