HTML无法直接渲染3D模型，必须用JavaScript库（如Three.js或model-viewer）加载；上传后需生成临时URL，注意CORS、MIME类型及协议限制。
上传的不是模型文件，而是模型资源路径
HTML 本身不支持直接解析或渲染 3D 模型（如 .glb、.gltf、.obj），<input type="file"> 只能读取文件二进制或生成临时 URL，真正加载和渲染必须交给 JavaScript 3D 库。常见误区是以为选中文件后 HTML 就能“显示模型”，其实只是拿到了一个 Blob 或 File 对象，后续全部依赖 JS 处理。
实操建议：
- 用
input[type="file"]限制接受格式：accept=".glb,.gltf,.obj"（注意：仅前端提示，不可靠，服务端仍需校验） - 监听
change事件后，用URL.createObjectURL(file)生成可被 Three.js 等库加载的临时地址 - 不要尝试用
img或iframe直接展示模型文件——它们不识别 3D 格式
Three.js 是最可行的轻量级展示方案
目前浏览器端稳定支持 GLB/GLTF 的主流方案仍是 three.js + @google/model-viewer（Web Component 方案更简单但定制性弱）。若你控制页面结构、需要交互（旋转、缩放、材质切换），three.js 是实际项目中最可控的选择。
关键步骤：
立即学习“前端免费学习笔记（深入）”；
- 引入
three.js和GLTFLoader（需额外 import）：import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' - 创建场景、相机、渲染器（标准三件套），再用
loader.load(url, (gltf) => { scene.add(gltf.scene); })加载 - 注意：GLB 文件必须通过 HTTP(S) 加载（本地 file:// 协议下因 CORS 会失败），所以开发时得用
live-server或vite启服务 - 加载前清空旧模型：
scene.children.forEach(child => child.isMesh && scene.remove(child))，避免叠加
model-viewer 更适合快速嵌入，但有兼容与功能限制
如果只要“上传后立刻预览”，不涉及自定义光照、动画或射线拾取，<model-viewer> 是最省事的方案——它封装了底层 WebGL 逻辑，支持拖拽、AR、响应式，且自动处理 PBR 材质。
但要注意：
- 它不支持直接传
Blob或File对象，必须是可访问的 URL；所以上传后需先调用URL.createObjectURL(file)，再赋值给src属性 - 部分安卓 WebView 或旧版 Safari 不支持，需检查 model-viewer 官网兼容表
- 无法直接获取模型网格数据或修改材质，调试困难；例如想高亮某个 mesh，就得换回 three.js
- 示例写法：
<model-viewer src="" ar camera-controls auto-rotate></model-viewer>，JS 中设modelViewer.src = url
上传到服务器再展示？别跳过 MIME 类型和跨域
如果模型需长期保存并多人访问，上传到后端是必要步骤。但这里容易卡在两个地方：后端没正确返回 Content-Type，或前端请求被 CORS 拦截。
务必确认：
- 后端返回 GLB 文件时，HTTP 响应头必须含
Content-Type: model/gltf-binary（或至少application/octet-stream），否则GLTFLoader会解析失败，报错类似"Unexpected token in JSON at position 0" - 前端请求该模型 URL 时，若域名不同，后端需返回
Access-Control-Allow-Origin: *（或具体域名），否则 Three.js 加载器静默失败，控制台只显示 CORS 错误 - 不要把模型当普通图片上传后直接用
img标签展示——没有意义，也不会显示
真正卡住人的往往不是“怎么写”，而是 CORS、MIME、协议限制这三座小山。本地开发时记得开服务，上线前用 curl 或浏览器 Network 面板确认模型 URL 能直接下载且响应头正确。
