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

**URL:** <https://discourse.threejs.org/t/ring-object-that-needs-the-click-to-be-registered-in-hollow-part/67578>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [July 1, 2024, 8:57pm UTC](https://discourse.threejs.org/t/ring-object-that-needs-the-click-to-be-registered-in-hollow-part/67578 "2024-07-01T20:57:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nat](https://avatars.discourse-cdn.com/v4/letter/n/8c91f0/32.png) [@Nat](https://discourse.threejs.org/u/Nat)\
**Post date:** [July 1, 2024, 8:57pm UTC](https://discourse.threejs.org/t/ring-object-that-needs-the-click-to-be-registered-in-hollow-part/67578/1 "2024-07-01T20:57:51Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [July 1, 2024, 10:21pm UTC](https://discourse.threejs.org/t/ring-object-that-needs-the-click-to-be-registered-in-hollow-part/67578/2 "2024-07-01T22:21:27Z")

</div>

> [@Nat](#):
>
> What would be the appropriate way to go about this?

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

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 2, 2024, 7:05pm UTC](https://discourse.threejs.org/t/ring-object-that-needs-the-click-to-be-registered-in-hollow-part/67578/3 "2024-07-02T19:05:08Z")

</div>

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.

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

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

```

or, simpler, good old meshbounds

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

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 2, 2024, 7:16pm UTC](https://discourse.threejs.org/t/ring-object-that-needs-the-click-to-be-registered-in-hollow-part/67578/4 "2024-07-02T19:16:07Z")

</div>

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

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