Next.js项目中Three.js useGLTF钩子路径问题求助

核心路径问题分析 #

先明确Next.js的静态资源规则：

• 若模型放在public目录下（比如public/sculpture/scene.gltf），必须使用根路径访问：/sculpture/scene.gltf——因为public是Next.js的静态资源根目录，相对路径会指向组件所在目录，直接导致404错误。
• 若模型和Sculpture.jsx同目录下的sculpture文件夹内，手动写相对路径./sculpture/scene.gltf是可行的，但要注意文件名大小写敏感（Linux/macOS环境下必须完全匹配），且文件确实存在。

更可靠的路径写法（避免手动出错） #

Next.js 13+支持直接导入静态资源文件，让框架自动处理路径，推荐这种方式：

'use client';
import React from "react";
import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from "../CanvasLoader";
// 直接导入模型文件，Next.js会自动解析正确路径
import modelUrl from './sculpture/scene.gltf';

const Sculpture = () => {
  const model = useGLTF(modelUrl);
  // 必须返回Three.js可渲染的对象，比如用primitive包裹模型场景
  return <primitive object={model.scene} scale={0.5} />;
};

export default function SculptureCanvas() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls enableDamping />
        <ambientLight intensity={0.5} />
        <directionalLight position={[5, 5, 5]} />
        <Sculpture />
        <Preload all />
      </Suspense>
    </Canvas>
  );
}

其他必查问题点 #

1. 客户端组件声明：Next.js 13+的App Router中，所有涉及Three.js的组件必须添加'use client';指令，否则会在服务器端渲染时出错。
2. 控制台报错排查：
   • 打开浏览器开发者工具，查看Network标签：若模型请求状态为404，直接说明路径错误；若为500或解析错误，可能是模型文件损坏。
   • 查看Console标签，是否有useGLTF相关的错误提示，比如依赖缺失。
3. 模型文件验证：用GLTF查看器打开scene.gltf，确认文件没有损坏。

常见错误修正 #

你当前代码中返回<div>Sculpture</div>，这不会渲染任何Three.js内容，必须返回primitive或其他Three.js元素才能显示模型。

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