Next.js中使用useGLTF加载GLTF模型失败求助

问题原因 #

Next.js 14使用App Router时，app目录下的文件不属于静态资源可访问路径，只有根目录的public文件夹才是静态资源的默认存放位置。你把模型放在app/components/thinker里，无法通过URL访问到，所以useGLTF找不到资源。

解决方案（两种可选） #

方案一：将模型移到public目录

1. 在项目根目录创建public文件夹（如果不存在）
2. 把thinker文件夹整个移动到public目录下，最终路径为public/thinker/scene.gltf
3. 修改组件中的路径：

"use client";
import { useGLTF} from "@react-three/drei";
import { Suspense } from "react";

const Model = () => {
    // 用根路径访问public下的资源
    const modelFile = useGLTF("/thinker/scene.gltf");

    return (
        <Suspense fallback={<div>Loading model...</div>}>
            {/* 渲染模型场景 */}
            <primitive object={modelFile.scene} />
        </Suspense>
    );
}

export default Model;

方案二：通过ES模块导入模型

Next.js支持直接导入静态资源文件，无需移动到public：

"use client";
import { useGLTF} from "@react-three/drei";
import { Suspense } from "react";
// 直接导入模型文件，路径相对于当前组件文件
import modelUrl from "./thinker/scene.gltf";

const Model = () => {
    const modelFile = useGLTF(modelUrl);

    return (
        <Suspense fallback={<div>Loading model...</div>}>
            <primitive object={modelFile.scene} />
        </Suspense>
    );
}

export default Model;

额外注意事项 #

• 确保模型的依赖资源（比如纹理文件）也和scene.gltf放在同一文件夹，否则会出现纹理丢失的问题
• 必须包裹在Suspense组件中，处理模型加载的等待状态
• 如果使用方案一，public目录下的资源路径要以/开头，避免相对路径带来的路由问题

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