Click Events on Object3D (Mesh,Group, etc) in React-Three-Fiber

Question

I want to add click event to my meshes (there are 40 meshes or groups actually). is there a way to add pointer events to the group objects like that in for loop? object.setAttribute("onClick","console.log(hello);") instead of adding them onClick attribute one by one <group onClick={()=>console.log("hello")}> <mesh/> <mesh/> </group>

Answer 1

you can use pointer events for groups and meshes like this :

  onPointerEnter={() => {
    console.log("Clicked")
  }}
 onPointerOver={() => {
    console.log("hovered")
  }}
  onPointerOut={() => {
    console.log("hover released")
  }}