Guidance on using events (OnClick, OnPointerOver etc) for CSG

[arek-e]

Hello! Im trying to implement OnPointerOver like the basic demo of React Three Fiber. Im not super experienced with the CSG part of r3f.

Currently im doing this but with no success, this is a add component that is nested in the geometry.

export default function AddFloor({ position }: AddFloorProps) {
  const addRef = useRef<any>(null!);
  const { update } = useCSG();
  const [hovered, hover] = useState<boolean>(null!);
  console.log(hovered);

  return (
    <PivotControls
      activeAxes={[true, true, true]}
      scale={1}
      anchor={[-1, 1, -1]}
      onDrag={update}
    >
        <mesh>
          <Addition
            position={position}
            ref={addRef}
            onPointerOver={() => hover(true)}
            onPointerOut={() => hover(false)}
          >
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color="orange" />
          </Addition>
        </mesh>
    </PivotControls>
  );
}

I've tried placing it on the mesh aswell but with no success. Does anyone have any pointers on what i can do next?

[marcofiletto]

Hey! Have you tried move handlers to the parent mesh?

<mesh
    onPointerOver={() => hover(true)}
    onPointerOut={() => hover(false)}
>
          <Addition
            position={position}
            ref={addRef}
          >
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color="orange" />
          </Addition>
        </mesh>