Express运行A-Frame WebVR项目时.glb模型无法显示问题

你的Express服务无法加载glb模型的核心原因是没有配置静态资源托管能力，仅实现了根路径返回index.html的路由逻辑：

• VS Code的"Open in Default Browser"扩展自带静态文件服务，会自动将当前HTML所在目录作为静态资源根目录，因此请求/EPE_4.glb时可以正确返回文件，模型正常渲染。
• 当前编写的Express服务只处理GET /这一个路由，浏览器解析HTML后发起的GET /EPE_4.glb请求没有匹配的处理逻辑，默认返回404错误，模型自然无法加载。
• 额外注意：你的glb模型体积达200MB，还需要确认服务没有设置过短的请求超时时间，避免大文件传输中途断开。

1. 补全Express配置，添加静态资源中间件 #

Express内置了静态资源处理中间件express.static，只需要将存放glb模型、本地脚本、样式、图片等静态文件的目录注册到服务中即可。
假设你的index.html和EPE_4.glb都存放在项目根目录，修改后的完整app.js代码如下：

// 补上原代码缺失的express模块引入，否则服务启动会直接报错
const express = require('express');
const path = require('path');
const app = express();
const router = express.Router();

// 注册静态资源中间件，把项目根目录设为静态资源根路径
// 如果习惯把静态文件统一存在public目录，把路径改成path.join(__dirname, 'public')就行，对应把glb文件移到public目录下
app.use(express.static(path.join(__dirname)));

router.get('/',function(req,res){
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.use('/', router);
app.listen(process.env.port || 3000, () => {
  console.log('Running at Port 3000');
});

2. 校验路径匹配 #

修改配置后确认文件路径映射正确：

• HTML中glb模型的src属性写的是/EPE_4.glb，对应静态资源目录下直接存放EPE_4.glb文件即可，不要多嵌套一层目录导致路径不匹配。
• 如果你调整了静态资源目录，记得同步移动glb文件到对应目录，保证请求路径和文件位置一一对应。

3. 大文件加载适配 #

200MB的模型文件体积较大，配置完成后如果仍加载失败，做以下调整：

• 打开浏览器F12开发者工具，切到Network面板找到glb文件的请求，确认状态码为200，传输过程没有中断。如果出现超时错误，调整服务的超时配置，给大文件传输留足时间。
• 建议对glb模型做几何压缩、纹理压缩，可大幅降低文件体积，缩短加载时间，减少传输失败概率。

如果修改后仍无法正常加载，按以下顺序定位问题：

• 打开浏览器控制台Console面板，查看是否有明确的报错信息，重点确认glb请求是否存在404、403、跨域类错误。
• 在Network面板查看glb请求的响应内容，确认返回的是二进制模型文件，而不是HTML格式的错误提示页。
• 确认glb文件本身没有损坏，本地直接打开HTML可正常加载的前提下，再排查服务配置问题。
• 如果服务部署在远程服务器上，确认服务器带宽、反向代理（如果有）的超时限制、文件大小限制足够支撑200MB文件的传输。

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