集成ThreeJS与React Three Fiber的React应用运行时报编译失败

这个报错的核心是依赖版本适配错位：three 在版本迭代中彻底移除了已废弃的Geometry类，同时项目内同时存在新旧两个drei依赖包，旧版停止维护的drei包内部引用了已经被移除的API，导致编译阶段直接报错。你之前单独切换drei和three的版本没有解决，是因为没有对齐整个R3F生态的依赖匹配关系，还残留了旧的冗余依赖包。

• 第一步：清理冗余的旧依赖
  执行卸载命令删掉早就停止维护的旧drei包，它就是触发useSubdivision.js报错的根源：
  npm uninstall drei
  不要继续在项目里使用drei作为导入来源，后续所有drei生态的组件都统一从@react-three/drei导入。

• 第二步：匹配对应兼容的依赖版本组合
  结合你代码里使用的react-three-fiber（R3F v5版本），严格安装以下对应版本的依赖，不要随意升级版本。你之前尝试的drei@2.2.21 是适配three r118的旧版本，和你使用的three@0.125.0存在API版本差，单独切换两个包的版本无法解决匹配问题：

  • react-three-fiber@5.3.22
  • @react-three/drei@7.0.0
  • three@0.137.0
    这个版本组合是经过验证的稳定兼容组合，既不会触发Geometry不存在的导出报错，也能正常加载GLB模型、使用轨道控制器。

  如果你坚持要使用three@0.125.0，需要把@react-three/drei的版本降到4.3.0，更高版本的drei会引用three新版本才有的API，反而会触发反向兼容问题。

• 第三步：修正代码内的错误导入路径
  替换代码中不符合规范的导入写法，避免深路径导入带来的模块解析问题：

  • 把原来的import { useGLTF } from "@react-three/drei/core" 改成 import { useGLTF } from "@react-three/drei"
  • 把原来的import { OrbitControls } from "drei" 改成 import { OrbitControls } from "@react-three/drei"

• 不要给旧版drei打兼容补丁，这个包已经长期停止维护，所有后续功能迭代都合并到了@react-three/drei仓库下，继续使用旧包只会不断遇到新的兼容问题。
• 不要同时安装drei和@react-three/drei两个包，两者的模块路径存在重叠，打包工具很容易错误引用旧包的代码触发报错。
• 原代码中的Suspense包裹、灯光配置、模型网格的写法没有问题，不需要调整，依赖修复完成后即可正常渲染模型。

内容的提问来源于stack exchange，提问作者Mukund S.