React+Vite环境下导入.gltf文件失败问题求助

问题原因分析 #

• 404错误：直接将相对路径传给useLoader时，Vite无法正确解析静态资源路径，导致请求的资源地址不正确。
• require未定义：Vite基于ES模块规范，不支持Node.js的CommonJSrequire语法，因此会抛出该错误。

两种可行的解决方法 #

方法1：将模型放入public目录

1. 在项目根目录创建public文件夹（如果不存在），把SpainBoyPose.gltf文件放进去。
2. 使用根路径直接访问该资源：

import { useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default function SpainBoyModel() {
  const gltf = useLoader(GLTFLoader, '/SpainBoyPose.gltf');
  return <primitive object={gltf.scene} scale={0.5} />;
}

方法2：通过ES模块导入资源（推荐）

Vite支持直接导入静态资源，会自动处理路径并生成正确的资源URL：

import { useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 直接导入模型文件，Vite会返回处理后的URL
import modelUrl from '../assets/SpainBoyPose.gltf';

export default function SpainBoyModel() {
  const gltf = useLoader(GLTFLoader, modelUrl);
  return <primitive object={gltf.scene} scale={0.5} />;
}

额外注意事项 #

• 确认导入路径的正确性：如果你的组件在src/components目录，而assets在src/assets，那么../assets/SpainBoyPose.gltf是正确的相对路径。
• 若使用TypeScript，需要添加类型声明避免报错：在src目录下创建vite-env.d.ts文件，加入以下内容：

declare module '*.gltf' {
  const src: string;
  export default src;
}

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