HTML5无内置建模与OBJ导出能力，需依赖Three.js等WebGL库及手动实现；OBJExporter为非官方模块，仅支持基础几何信息，不支持动画、PBR材质等现代特性，推荐优先使用glTF格式。
HTML5 本身不提供任何建模能力，也没有内置的 OBJ 导出功能——所谓“HTML5 建模”，实际指的是在浏览器中运行的基于 WebGL 的 JavaScript 3D 库（如 Three.js、Babylon.js）所构建的场景和模型。OBJ 导出必须由前端 JavaScript 代码手动实现，或借助后端服务完成。
Three.js 中用 OBJExporter 导出模型的正确姿势
Three.js 官方并未维护 OBJExporter，它属于非官方扩展模块（examples/jsm/exporters/OBJExporter.js），需单独引入。导出结果仅包含顶点、面、UV 和法线基础信息，不支持材质贴图路径自动写入（mtllib 需手动处理）。
- 必须确保几何体已调用
geometry.computeVertexNormals()，否则导出的vn行为空或错误 -
OBJExporter只处理BufferGeometry，若使用老式Geometry（已废弃），需先调用toBufferGeometry() - 导出时默认不包含材质信息；若需
usemtl指令，须手动为每个Mesh设置material.name，且导出后需另存.mtl文件并手动关联 - 示例导出调用：
import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js';
const exporter = new OBJExporter();
const result = exporter.parse(scene); // scene 是 THREE.Scene 实例
const blob = new Blob([result], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'model.obj';
link.click();
OBJ 不支持的特性及替代方案
OBJ 是纯静态网格格式，无动画、无骨骼、无 PBR 材质定义、无实例化信息。如果你的 HTML5 场景含以下内容，OBJ 导出必然丢失：
- 蒙皮动画（
Skeleton/Bone）→ 改用glTF（推荐GLTFExporter） - PBR 材质（
MeshStandardMaterial的 roughness/metalness 贴图）→ OBJ 无法描述，只能降级为Phong近似，且贴图路径需手动写入.mtl - 多个子网格共用同一几何体但不同材质 →
OBJExporter会合并为单个o对象，材质切换靠usemtl，但需确保每个Mesh的material已显式赋值且name不重复 - 非三角面（如四边形）→
OBJExporter会自动三角化，但可能改变 UV 分割逻辑，导出前建议统一调用geometry.toNonIndexed()再三角化
导出后验证 OBJ 文件是否可用
浏览器端生成的 OBJ 很容易因编码、换行符或缺失空行导致桌面软件（如 Blender、MeshLab）解析失败。关键检查点：
立即学习“前端免费学习笔记（深入）”；
- 文件首行不能是空行或 BOM 字节；用 UTF-8 无 BOM 编码保存
- 每行末尾必须是
\n（LF），不能混用\r\n（Windows 风格） -
f面索引从 1 开始，且顺序必须是f v1/vt1/vn1 v2/vt2/vn2 v3/vt3/vn3；若缺失 vt 或 vn，对应位置留空（如f 1//1 2//2 3//3） - Blender 导入时若报 “invalid face index”，大概率是某行
f含 0 或负数索引，说明几何体未正确归一化或存在无效面
真正麻烦的不是导出动作本身，而是 OBJ 格式对现代渲染管线特性的天然排斥——它像一张快照，只记录某一帧的三角面快照。一旦你的模型依赖运行时计算（如 morph target、instancing、GPU skinning），OBJ 就不是“导出格式”，而是“降级妥协”。别为了“能导出”而放弃 glTF。
