ThreeEvent 和 WheelEvent 在 TypeScript 和 react-three-fiber 中无法识别 (@react-three/fiber)

Question

我有一个带有 onWheel 侦听器的基本网格框，我想将鼠标事件数据传递给处理函数。然而，TS 抛出一系列不同的错误，并且似乎永远无法识别 ThreeEvent 或 WheelEvent，无论我如何尝试使用它们。

在屏幕截图 1 中，您可以看到在 onWheel 属性中，TS 推断出 ThreeEvent<WheelEvent> 是事件类型。然而，当我尝试在我的处理程序函数中键入事件时，我收到一条错误消息，提示 three.js 没有导出成员 ThreeEvent（屏幕截图 2）。

我试过通过命名导入进行导入（即 import {ThreeEvent/WheelEvent} from "three";，并且还使用 react-three-fiber docs 示例中使用的 THREE.ThreeEvent 语法。另外，在这一行之上我像这样成功输入 useRef：const boxRef = useRef<THREE.Mesh>();

我的tsconfig是create-react-app模版里的基础，我的版本如下：

"dependencies": {
    "@react-three/fiber": "^7.0.19",
    "three": "^0.135.0",
    "typescript": "^4.1.2"
}
"devDependencies": {
    "@types/three": "^0.134.0"
}

Answer 1

您应该安装 typescript 的类型。

npm install --save @types/three

之后类型应该可用。

您的导入有问题，必须从“@react-three/fiber”导入 ThreeEvent，从 'react' 导入 WheelEvent。

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