react-three/纤程检测单击空白区域

import React, { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Box } from '@react-three/drei';

function BoxComponent(props) {
  const mesh = useRef();

  useFrame(() => {
    // 更新逻辑（如果有）
  });

  return (
    <Box {...props} ref={mesh}>
      {/* Box 的内容 */}
    </Box>
  );
}

function App() {
  const handleClick = (event) => {
    // 获取鼠标点击位置
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 创建射线投射器
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    // 检测与对象的交点
    const intersects = raycaster.intersectObjects(scene.children, true);

    if (intersects.length === 0) {
      console.log('点击了空白区域');
      // 在这里处理空白区域的点击事件
    }
  };

  return (
    <Canvas onClick={handleClick}>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <BoxComponent position={[-1.2, 0, 0]} />
      <BoxComponent position={[1.2, 0, 0]} />
    </Canvas>
  );
}

export default App;