Ring object that needs the click to be registered in hollow part

Questions
1

Hi! Basically I have a 3D model which I am separating into the different building blocks of the figure in react three fiber.
A couple parts are pretty small, and to make things worse, hollow. Clicking them becomes a tedious task, to simply get to click on the actual material.
What I’d like is for the entirety of the bounding box or sphere to register the click, instead of only the geometry.
These parts are being rendered as , if that adds any useful information.
What would be the appropriate way to go about this?
I also have another issue that whenever two items are overlapping in the view and there is a click on the surface where the both overlap, both items will react to the click.
Is this a propagation problem? Or is due to the event per se? I was thinking maybe a raycaster would be a better way to go.

Thanks in advance!

2

You can put an invisible sphere / cube inside the mesh and listen to events on that sphere / cube instead.

3

either like @mjurczyk said, drei even has a handy discard material that doesn’t render, transparent + opacity=0 could otherwise in some cases lead to render order glitches.

import { MeshDiscardMaterial } from '@react-three/drei'

<mesh geometry={ring} material={gold}>
  <mesh onClick={...}>
    <sphereGeometry />
    <MeshDiscardMaterial />

or, simpler, good old meshbounds

import { meshBounds } from '@react-three/drei'

<mesh
  raycast={meshBounds}
  onClick={...}
  geometry={ring}
  material={gold} />

meshbounds is usually used for performance reasons, it speeds up raycast because it only checks boundary sphere + box, it doesn’t traverse all the vertices.

4

I also have another issue that whenever two items are overlapping in the view and there is a click on the surface where the both overlap, both items will react to the click.
Is this a propagation problem? Or is due to the event per se? I was thinking maybe a raycaster would be a better way to go.

pointer events are the solution to your problem, because they propagate (bubble)

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

raw raycaster just strikes meshes with a ray and returns hits. you wouldn’t have events with this (pointer over, out, etc) and it wouldn’t solve the issue since it can’t bubble.