Как запретить элементам холста React Three получать событие onClick, когда они находятся за другим элементом в трехмерно ⇐ Javascript

[Anonymous]

Контекст
Используя React Three Fiber и Drei, я создал простую вращающуюся галерею изображений для создания 3D-карусели проектов.
< img alt="изображение галереи изображений реакции три" src="https://i.sstatic.net/CUexY06r.png" />
Я настроил событие onClick стрелять по каждому карточек, как показано ниже, который передает функцию handleClick компоненту из реакции Three Drei:

Код: Выделить всё

function Carousel({ cards, handleClick }: CarouselProps) {
const count = cards.length;
const radius = (count * 2.5) / (Math.PI * 2);

return cards.map((card, i) => (
 handleClick(i)}
position={[
Math.sin((i / count) * Math.PI * 2) * radius,
0,
Math.cos((i / count) * Math.PI * 2) * radius,
]}
rotation={[0, (i / count) * Math.PI * 2, 0]}
/>
));
}

Рабочую демонстрацию можно увидеть здесь.
Код для 3D-карусели можно найти здесь вместе с компонентом карточки.
Рабочую демонстрацию можно увидеть здесь.
Код для 3D-карусели можно найти здесь вместе с компонентом карточки.
p>
Проблема
При нажатии на изображение функция onClick вызывается по назначению, однако, когда два изображения перекрываются (т. е. одно находится за другой в круге), затем кнопку onClick func вызывается дважды — один раз для изображения впереди, а затем сразу после этого — для изображения сзади. Это происходит только в том случае, если указатель мыши пересекается с обоими изображениями (хотя то, что позади, не видно).
Не удалось решить
Я пытался регулирование и устранение дребезга вызовов, но второй вызов выполняется сразу после задержки, установленной функциями.
Я уверен, что для этого есть либо собственное решение Javascript, либо что-то в React Three, чтобы справиться с этим. такая ситуация, но я изо всех сил пытаюсь найди это решение сам.

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-when-beh