如何让React Three Fiber中的Raycaster正确检测网格相交？

问题根源分析 #

射线检测未生效主要有以下几个原因：

• 射线方向错误：默认情况下，Mesh的getWorldDirection返回-z方向（Three.js默认前向），但静态碰撞盒在x轴负方向，射线根本没指向目标区域。
• intersectObjects参数错误：你传入了scene对象，但该方法需要传入物体数组（如scene.children），且默认会检测包括射线起点所在物体在内的所有对象。
• 未利用传入的collisionItem参数：你已经获取了目标碰撞盒，但射线检测中没有针对它精准检测，导致检测范围冗余，还可能误检自身或地面。

修复后的代码 #

修改useForwardRaycast钩子

const useForwardRaycast = (obj, collisionItem) => {
  const raycaster = useMemo(() => new Raycaster(), []);
  const pos = useMemo(() => new Vector3(), []);
  // 定义射线方向：对准静态碰撞盒所在的x轴负方向
  const dir = useMemo(() => new Vector3(-1, 0, 0).normalize(), []);

  return () => {
    if (!obj.current || !collisionItem) return [];
    // 将射线起点设置为移动盒子的右侧边缘，避免检测到自身
    obj.current.getWorldPosition(pos);
    pos.x += obj.current.scale.x / 2;
    raycaster.set(pos, dir);
    // 只检测目标碰撞盒，第二个参数为递归检测开关（此处不需要但留作扩展）
    return raycaster.intersectObjects([collisionItem], true);
  };
};

调整MovingBox中的射线检测逻辑

const MovingBox = () => {
  const boxRef = useRef();
  const controls = useKeyboardControls();
  const scene = useThree((state) => state.scene);
  // 用useMemo缓存碰撞盒对象，避免每次渲染重复查找
  const collisionBox = useMemo(() => scene.children.find(el => el.name === "CollisionBox"), [scene]);

  useHelper(boxRef, BoxHelper, "red");

  const raycast = useForwardRaycast(boxRef, collisionBox);

  useFrame(() => {
    const { moveForward, moveBackward, moveLeft, moveRight } = controls;
    if (moveForward) boxRef.current.position.z += 0.1;
    if (moveBackward) boxRef.current.position.z -= 0.1;
    if (moveLeft) boxRef.current.position.x += 0.1;
    if (moveRight) boxRef.current.position.x -= 0.1;
  });

  useFrame(() => {
    const intersections = raycast();
    if (intersections.length > 0) {
      console.log("检测到碰撞：", intersections[0].object);
    }
  });

  return (
    <mesh scale={[5, 5, 5]} position={[0, 0, 0]} ref={boxRef} name="MovingBox">
      <boxGeometry />
      <meshStandardMaterial color="grey" />
    </mesh>
  );
};

关键修复点说明 #

1. 修正射线方向：将射线方向设置为Vector3(-1,0,0)（x轴负方向），直接对准静态碰撞盒位置，确保移动盒子向x轴负方向移动时能被检测到。
2. 调整射线起点：把起点从盒子中心移到右侧边缘，避免射线直接检测到移动盒子自身。
3. 精准检测目标：只传入目标碰撞盒数组给intersectObjects，减少不必要检测，提升性能。
4. 缓存碰撞盒对象：用useMemo缓存查找结果，避免每次渲染遍历scene.children。

如果你的需求是检测移动盒子前进方向（z轴）的碰撞，只需把射线方向改成Vector3(0,0,-1)，并调整静态碰撞盒位置到z轴方向即可。

内容的提问来源于stack exchange，提问作者Sandeep Chandran