React+TypeScript项目中three.js OrbitControls类型报错求助

以下是几种可行的解决方式：

1. 更新@types/three到最新版本 #

旧版本的@types/three可能未覆盖OrbitControls的类型定义，执行命令更新：

npm install --save-dev @types/three@latest

更新后重启TypeScript服务器（VSCode中按Ctrl+Shift+P，输入TypeScript: Restart TS Server）即可生效。

2. 改用three/addons的导入路径 #

three.js r129版本后，官方将examples/jsm下的模块迁移到three/addons目录，改用这个路径导入，最新的类型声明已完整支持：

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

3. 手动添加类型声明文件 #

如果前两种方法无效，可自行创建类型声明文件：

• 在项目根目录新建types/three.d.ts文件，写入以下内容：

declare module 'three/examples/jsm/controls/OrbitControls' {
  import * as THREE from 'three';
  export class OrbitControls extends THREE.EventDispatcher {
    constructor(camera: THREE.Camera, domElement?: HTMLElement);
    enableDamping: boolean;
    dampingFactor: number;
    enableZoom: boolean;
    enablePan: boolean;
    update(): void;
    dispose(): void;
    // 可根据实际使用需求补充更多属性或方法
  }
}

• 修改tsconfig.json，确保类型文件被TS识别：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./types"],
    // 保留项目原有其他配置
  },
  "include": ["src", "./types/**/*.d.ts"]
}

4. 清除缓存并重装依赖 #

若仍存在问题，尝试清除缓存后重装依赖：

rm -rf node_modules package-lock.json
npm install

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