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
跨域图像/纹理导致保存失败：常见静默错误，必须预处理
如果模型用了 <img alt="HTML5建模怎么保存文件_不同格式保存及注意事项【说明】" > 加载的外部纹理（如 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 规范校验。很多项目卡在这一步，不是代码不会写，是没理清模型数据流到底从哪来、到哪去。
