Node.js Express环境下Three.js加载GLTF文件返回404错误问题求助

问题排查与修复方案 #

1. 核心拼写错误修复
   你代码中的加载路径存在后缀拼写错误，GLTF格式的标准后缀是.gltf，你写为了.gtlf，将加载代码修改为以下内容即可：

const loader = new GLTFLoader();
  
loader.load('/assets/city/scene.gltf',
  (gltf) => {
    const root = gltf.scene;
    scene.add(root);
  },
  (xhr)=>{},
  (error)=>{
    console.log(error);
  });

此处额外将路径改为绝对路径（开头加/），可以避免因前端页面路由层级变化导致的相对路径匹配错误。

2. 可选排查项（如果修改拼写后仍有问题）

• 修正Express静态目录的路径写法：如果你的项目启动文件（如app.js）不在项目根目录，相对路径写法可能会导致Express找不到public文件夹，建议改为基于文件位置的绝对路径配置：

const path = require('path');
app.use(express.static(path.join(__dirname, 'public')));

• 检查GLTF关联资源完整性：GLTF文件通常会依赖同目录下的.bin资源文件、贴图文件，确保这些文件都和.gltf文件放在同一目录下，避免依赖资源加载失败。

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