在Hugo Coder主题中用Three.js加载glTF/glb模型遇404问题求助

解决方案 #

1. 修正静态资源路径 #

Hugo中static目录下的文件会直接部署到网站根目录，因此路径不需要包含static/前缀，修改模型加载路径为绝对路径：

loader.load(
  '/images/avatar_model.glb',
  // 其余代码保持不变
);

开头的/确保从网站根目录查找资源，避免页面路由变化导致的路径错误。

2. 验证资源实际可访问性 #

启动Hugo服务后，直接在浏览器访问http://localhost:1313/images/avatar_model.glb：

• 若能下载或预览模型，说明路径已正确；
• 若仍报404，检查：
  • 文件名大小写是否与代码中一致（Hugo部署时文件名区分大小写）；
  • 文件是否放在项目根目录的static/images下，而非主题的static目录（主题static会被合并，但优先使用项目根目录的资源）。

3. 检查Hugo服务参数 #

使用hugo server启动服务时，确保未添加--noStatic参数，该参数会禁止加载静态资源。

4. 可选：使用Hugo资源函数生成健壮路径 #

利用Hugo的resources.Get函数自动生成资源URL，适配不同配置：

<script>
  // ... 其余代码
  loader.load(
    '{{ resources.Get "images/avatar_model.glb" | relURL }}',
    // ... 其余代码
  );
</script>

这种方式会自动处理Hugo的资源部署逻辑，避免硬编码路径带来的问题。

内容的提问来源于stack exchange，提问作者Simon Flückiger