HTML5本身不处理模型破面问题，因其非建模工具且无几何修复能力；破面须在建模软件（如Blender）或MeshLab等工具中修复，HTML5仅负责渲染。
HTML5建模本身不直接处理模型破面问题
HTML5 不是建模工具，也不具备几何修复能力。HTML5 仅提供 <canvas>、WebGL（通过 Three.js 等库）或 glTF 渲染能力。所谓“模型破面”，实际是 3D 模型文件（如 .obj、.gltf、.fbx）在导出或转换过程中产生的拓扑错误，必须在建模/处理阶段修复，而非在 HTML5 页面里“修”。
Three.js 加载后发现破面：先确认是不是渲染问题
很多“破面”现象其实是渲染设置导致的视觉误判，不是模型真坏了：
-
material.side = THREE.DoubleSide缺失时，背面剔除（cullFace）会让内翻面完全不可见——看起来像破洞，实为正常行为 - 法线方向错误会导致光照异常，让面片变黑或反向高光，易被误认为缺失
- 模型单位过大/过小 + 相机
near/far值不合理，引发 Z-Fighting 或裁剪，出现闪烁“破面”感 - 使用
THREE.BufferGeometryUtils.mergeVertices()前未标准化顶点，可能引入微小缝隙，放大后显破
验证方式：用 three.js/examples/jsm/debug/Stats.js 查面数是否与原始模型一致；用 MeshNormalMaterial 替换材质看法线朝向是否统一。
真正破面（Non-manifold geometry、N-gons、反转面）怎么修
必须回到建模软件或专用修复工具处理，常见路径如下：
立即学习“前端免费学习笔记（深入）”；
- Blender 中：选中模型 →
Tab进编辑模式 →Ctrl+Shift+Alt+M选非流形边 →X→Only Faces删除孤立面；再用Mesh > Clean Up > Merge by Distance（距离设0.001）缝合顶点；最后Ctrl+N重算法线 - 命令行批量修复：用
meshlabserver脚本自动闭合孔洞、去除重复顶点：meshlabserver -i input.obj -o output.obj -s clean.mlx
（clean.mlx是 MeshLab 的 XML 过滤脚本） - 导出前关键设置：Blender 导出
.glTF时勾选Apply Modifiers、Include Normals、Force Front Face；禁用Export UVs若模型无贴图，避免 UV 面片错位引发渲染异常
glTF 校验和运行时兜底检测
上线前用官方工具确认模型合规性，避免因格式错误被 WebGL 驱动拒绝绘制：
- 用
gltf-pipeline压缩并验证：gltf-pipeline -i model.gltf -o model.glb --validate
，报NON_MANIFOLD_GEOMETRY就得返工 - Three.js 中加载时监听
loader.load()的onError，但注意：破面通常不触发错误，而是静默渲染异常；更有效的是用BufferGeometry.attributes.position.count % 3 !== 0快速判断顶点数是否非法（三角面必须是 3 的倍数） - 若必须 runtime 修复（极少见），可用
three-mesh-bvh的fromGeometry()强制重 triangulate，但会丢失 UV 和法线精度，仅作临时 fallback
真正耗时的永远不是写 HTML5 页面，而是确保传给 THREE.GLTFLoader 的那个 .glb 文件本身干净——所有“破面”都在那之前发生，也必须在那之前结束。
