ignore PointerEvents on hidden (visible={false}) meshes

[TimKraemer]

Hi,

I'm using gltfjsx to import objects into my scene. The user can highlight them by mouseover. I'm using the onPointerOver event.
My problem is, that the imported object also includes invisible (visible={false}) meshes, and the onPointerOver event is also triggered on those invisible meshes, which confuses the user.

I already tried to ignore meshes with visible={false} in my event, unfortunately this prevents the highlight if one of those invisible meshes is in front of a visible one.

I guess what I need is to "penetrate" invisible elements and only handle visible ones. Is this doable with r3f's pointer events?

I prepared a minimalistic example: https://codesandbox.io/s/peaceful-brattain-kp075n?file=/src/App.js

Ideally I don't want to manipulate the gltfjsx auto-generated files, because they will get constantly changed and regenerated by another 3D artist.

[drcmda]

It’s weird but that’s generally how three works. THREE.RayCaster is at fault here. In fiber it's an easy fix because you can change the the event filter.

<Canvas onCreated={(state) => {
  state.setEvents({ filter: (intersections) => intersections.filter(i => i.object.visible) })

[TimKraemer]

Thank you!
I did change the example, by adding your proposed filter - it doesn't seem to change behaviour though:
https://codesandbox.io/s/peaceful-brattain-kp075n?file=/src/App.js

For my better understanding - do r3f pointerEvents use an underlaying THREE.RayCaster and how are the state events connected to that?

[drcmda]

previously i could not hover the mesh, only a small stripe. now i can hover it from all sides, wasn't this what you wanted?

[TimKraemer]

but it also hovers (changes the color) if you hover the invisible items

edit: I'm sorry - it must have been a caching artefact - now it does it exactly like I imagined. Thank you!

[mustafalazzawe]

Would anyone know if there is a way to achieve something similar to this but for older versions of R3F, version 7.0.29 to be exact?

I created an example using the versions I have set up with the project I'm currently working on: https://codesandbox.io/s/compassionate-architecture-lowlv4?file=/src/App.tsx

[TimKraemer]

in your case you should be able to just check for the eventObject.visible state before your set the color.

e.g:

const handlePointerOver = (e) => {
  if(e.eventObject.visible) {
    setColor('cyan');
  }
};

[mustafalazzawe]

Ha, simple but effective thank you!