TypeScript与@react-three/fiber中无法识别ThreeEvent和WheelEvent

问题解决方案 #

错误原因

ThreeEvent 不属于 three 核心库的导出，也不存在于 @types/three 中，它是 @react-three/fiber 为封装后的 3D 元素事件单独定义的类型，需要从 r3f 包中导入。

具体操作步骤

1. 从 @react-three/fiber 中导入类型
   使用类型导入语法避免运行时报错：

import type { ThreeEvent } from '@react-three/fiber'

2. 给事件处理函数标注类型
   WheelEvent 直接使用原生 DOM 定义的类型即可，无需额外导入：

const handleWheel = (e: ThreeEvent<WheelEvent>) => {
  // 可正常访问所有事件属性，比如滚轮偏移量deltaY、触发事件的3D对象object等
  console.log(e.deltaY, e.object)
}

3. 组件中正常绑定事件即可，完整示例：

import { useRef } from 'react'
import { Mesh } from 'three'

const Cube = () => {
  const boxRef = useRef<Mesh>(null)
  return (
    <mesh 
      ref={boxRef}
      onWheel={handleWheel}
    >
      <boxGeometry args={[1,1,1]} />
      <meshStandardMaterial color="skyblue" />
    </mesh>
  )
}

可选排查项

如果仍有类型识别问题，可确认 tsconfig 中 moduleResolution 配置为 node，该配置为 create-react-app 默认配置，通常无需修改。你当前使用的依赖版本完全兼容以上写法，无需升级依赖。

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