如何在react-three-fiber / three.js上创建点击事件监听器？

import { Canvas, useThree } from 'react-three-fiber';
import { useState } from 'react';
import { Raycaster, Vector2 } from 'three';

const [clickedObject, setClickedObject] = useState(null);

const ClickableMesh = ({ onClick, ...props }) => {
  const { camera, mouse } = useThree();
  const raycaster = new Raycaster();
  const [hovered, setHovered] = useState(false);

  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  const handlePointerMove = (event) => {
    const { clientX, clientY } = event;
    const rect = event.target.getBoundingClientRect();
    const x = ((clientX - rect.left) / rect.width) * 2 - 1;
    const y = -((clientY - rect.top) / rect.height) * 2 + 1;
    mouse.set(x, y);
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObject(mesh);
    setHovered(intersects.length > 0);
  };

  return (
    <mesh
      {...props}
      onClick={handleClick}
      onPointerMove={handlePointerMove}
      onPointerOut={() => setHovered(false)}
    >
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'red' : 'blue'} />
    </mesh>
  );
};

const App = () => {
  const handleObjectClick = () => {
    console.log('Object clicked!');
  };

  return (
    <Canvas>
      <ClickableMesh position={[0, 0, 0]} onClick={handleObjectClick} />
    </Canvas>
  );
};