events firing multiple times when adding LineSegments / WireframeGeometry to mesh

[jonasrodningen]

I came across a situation where onClick / onPointerMove etc for "mesh" fires 22 times. Mesh is a regular box, and I'm adding wireframe to the box through a useEffect:

useEffect(() => {
    if (mesh.current) {
      const wireframe = new LineSegments(
        new WireframeGeometry(mesh.current.geometry),
        new LineBasicMaterial({ color: "aqua" })
      );
      mesh.current.add(wireframe);
    }
  }, []);


// this box is from Drei, but the issue persists when using regular <mesh>
<Box
        {...props}
        ref={mesh}
        // onClick={(e) => parentClickHandler(e)}
        onPointerMove={(e) => pointerMoveHandler(e)}
        args={[1, 1, 1]}
      >
        <meshStandardMaterial attach="material" color={"gray"} />
      </Box>

Not sure if it's caused by three or react-three-fiber, or if I'm implementing this totally wrong. Let me know if you need more code for reprod.

[gsimone]

If you just need a wireframe around the Box, you can use useHelper from drei, example here: https://drei-storybook-beta.netlify.app/?path=/story/misc-usehelper--default-story

If you can, please create a reproduction on codesandbox and I'll look into it

[jonasrodningen]

Here's a reproduction: https://codesandbox.io/s/funny-knuth-7vwvq?fontsize=14&hidenavigation=1&theme=dark

I need a wireframe that highlights every edge of a model, but couldn't find a helper for that.

[drcmda]

move fires every time the input pointer moves, so 22 events can happen. onclick should fire once, see: https://codesandbox.io/s/r3f-basic-demo-rrppl0y8l4

[jonasrodningen]

Definitely! In this scenario, if you move the pointer 22 pixels, about 22*22 events are fired. For an onClick, about 22 clickEvents are fired.

https://codesandbox.io/s/funny-knuth-7vwvq?fontsize=14&hidenavigation=1&theme=dark

[drcmda]

this is because of wireframegeom. events bubble, so if you put the handler on, for instance, a group, and you dump 100 boxgeoms in there, a click will get every single one of them. just like in the dom, you can call event.stopPropagation to only get the first event.

[jonasrodningen]

@drcmda Aha, thanks for explanation! Your solution worked great.

[jonasrodningen]

@drcmda:

this is because of wireframegeom. events bubble, so if you put the handler on, for instance, a group, and you dump 100 boxgeoms in there, a click will get every single one of them. just like in the dom, you can call event.stopPropagation to only get the first event.