Django模板中用Three.js渲染3D模型遇404错误求助

核心问题原因 #

Django对静态资源的访问有严格的目录规范，你之前放置models目录的位置（templates目录或theme根目录）不属于Django默认的静态文件可访问路径，因此无法被前端请求到。

步骤1：调整模型目录位置 #

将models目录移动到theme/static目录下，最终项目结构如下：

home
   templates/home
      home.html
theme
   static
      js
         3d.js
      models
         eye
            scene.gltf

步骤2：修正JS中的模型加载路径 #

有两种可靠的修改方式：

方式一：通过模板标签传递静态URL（推荐）

在home.html中，引入3d.js前先定义全局静态URL变量：

<script>
    const STATIC_URL = "{% static '' %}";
</script>
<script src="{% static 'js/3d.js' %}"></script>

然后修改3d.js中的加载路径：

loader.load(
    `${STATIC_URL}models/${objToRender}/scene.gltf`,
    // 后续回调函数保持不变
);

方式二：直接使用静态文件根路径

如果你的Django项目settings.py中配置了STATIC_URL = '/static/'，可以直接修改3d.js的路径：

loader.load(
    `/static/models/${objToRender}/scene.gltf`,
    // 后续回调函数保持不变
);

步骤3：确认静态文件配置（关键） #

检查项目settings.py中的静态资源配置，确保包含theme/static目录：

STATIC_URL = '/static/'

# 开发环境下添加静态文件目录
STATICFILES_DIRS = [
    BASE_DIR / 'theme' / 'static',
]

验证 #

重启Django开发服务器，直接访问http://localhost:8001/static/models/eye/scene.gltf，如果能正常下载或预览模型文件，说明路径配置正确，此时前端页面即可成功加载3D模型。

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