使用@react-three/fiber的Canvas组件报错：无法解析three依赖

你遇到的错误是因为three-mesh-bvh（@react-three/drei的依赖包）需要导入three库，但你的项目中缺少这个依赖，或者打包工具无法正确识别它。

解决步骤： #

1. 安装Three.js依赖
   直接在项目根目录运行对应包管理器的命令，手动安装three：

   # npm
   npm install three
   
   # yarn
   yarn add three
   
   # pnpm
   pnpm add three
   

   @react-three/fiber和@react-three/drei都依赖Three.js，但部分包管理器不会自动安装peer依赖，所以需要手动添加。

2. 验证打包工具配置（如果安装后仍报错）
   如果安装依赖后还是出现解析错误，检查你的打包工具（如Vite、Webpack）配置，确保three被正确识别。比如Vite默认会自动处理npm包的导入，无需额外配置；如果是Webpack，避免将three错误标记为外部依赖（除非你通过CDN引入）。

另外，等依赖问题解决后，你可以这样在组件中正确使用Canvas：

import React from 'react'
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';

const Computers = () => {
  const computer = useGLTF('./desktop_pc/scene.gltf')
  return (
    <Canvas>
      <OrbitControls />
      <primitive object={computer.scene} />
    </Canvas>
  )
}

export default Computers

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