HTML5建模保存需JavaScript配合Blob与a标签实现下载；Canvas截图用toBlob()更优，Three.js导出GLB需处理跨域纹理并确保数据完整。

HTML5建模本身不提供文件保存能力，得靠 JavaScript 配合 Blob + a 标签触发下载

HTML5 没有内置“建模保存”功能，所谓“HTML5 建模”，实际是用 Canvas、WebGL（如 Three.js）、或 SVG 在浏览器中渲染 3D/2D 模型。真正保存文件，必须由 JavaScript 构造数据并模拟用户点击下载——这是唯一可靠且兼容主流浏览器的方式。

关键限制：浏览器不允许 JS 直接写入本地磁盘；所有“保存”本质都是生成临时 URL 并触发下载请求。

保存为 PNG / JPG：用 canvas.toDataURL() 或 canvas.toBlob()

适用于 Canvas 渲染的模型快照（比如 Three.js 的 WebGLRenderer.domElement 或 2D 绘图）。toDataURL() 简单但会阻塞主线程、生成 Base64 字符串体积大；toBlob() 更推荐，异步、内存友好、支持指定质量。

• toDataURL('image/png') 返回字符串，适合小图或调试；大图可能触发 Safari 的 URI 长度限制（约 2MB）
• toBlob(callback, 'image/jpeg', 0.9) 第三个参数只对 jpeg 有效，png 忽略质量设置
• Three.js 用户注意：renderer.setPixelRatio(window.devicePixelRatio) 要在截图前设好，否则导出模糊

const canvas = renderer.domElement;
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'model-screenshot.jpg';
  a.click();
  URL.revokeObjectURL(url); // 立即释放，避免内存泄漏
}, 'image/jpeg', 0.95);

保存为 OBJ / STL / GLB：需手动拼接文本或使用库序列化，再转 Blob

这些是纯文本（OBJ、STL ASCII）或二进制（STL binary、GLB）格式，不能用 canvas 方法。你得从模型数据结构（顶点、面、法线等）生成对应内容：

• OBJ：简单文本格式，每行一个 v x y z 或 f v1/vt1/vn1 v2/vt2/vn2...，适合初学者手写导出逻辑
• STL ASCII：类似 OBJ，但只存三角面片；STL binary 更紧凑，需用 Uint8Array 构造二进制头+面数据
• GLB：是 glTF 的二进制封装，必须严格遵循 chunk 结构（JSON header + BIN chunk），强烈建议用 @gltf-transform/core 或 Three.js 的 GLTFExporter
• Three.js 导出 GLB 示例中，若模型含纹理，要确保 texture.image 已加载完成，否则导出为空或报错 TypeError: Cannot read property 'width' of null

跨域图像/纹理导致保存失败：常见静默错误，必须预处理

如果模型用了 加载的外部纹理（如 CDN 上的贴图），Canvas 会被污染（canvas.getContext('2d').getImageData() 报错），进而导致 toBlob() 失败或导出全黑——这不会抛异常，只会静默失败。

• 解决办法只有两个：服务端代理纹理资源（加 CORS header），或前端预加载时用 crossOrigin="anonymous"
• Three.js 中加载纹理务必写：new TextureLoader().setCrossOrigin('anonymous').load(url)
• 检查是否污染：canvas.toDataURL() 若抛 SecurityError，说明已被污染；此时无法截图，只能换方案（如服务端渲染）

真正麻烦的不是“怎么保存”，而是“保存什么”——OBJ 不带材质，STL 不带 UV，GLB 虽完整但浏览器里生成它需要完整走一遍 glTF 规范校验。很多项目卡在这一步，不是代码不会写，是没理清模型数据流到底从哪来、到哪去。