如何修复3D模型在three.js及Windows 3D查看器中显示的裂纹问题

问题根因 #

这类激光扫描模型导出后出现显示裂纹的问题，核心原因集中在三个维度：扫描生成的模型顶点未焊接、UV边界无足够像素填充导致采样溢出、导出/加载参数配置错误。Blender、Unity的渲染管线对这类问题有默认兼容逻辑，所以不会显示异常，而WebGL（three.js底层）和Windows默认3D查看器的渲染逻辑更严格，就会暴露裂纹问题。

修复步骤 #

1. Blender内模型预处理

• 顶点焊接：进入编辑模式全选所有顶点，按M选择「按距离合并」，阈值设置为0.001左右，不要调太高避免破坏扫描细节，解决相邻面顶点断开导致的渲染缝隙。
• UV边界填充：进入UV编辑界面，全选所有UV岛，选择「岛屿」-「扩张」，给每个UV岛边界增加8~16像素的填充；如果是已生成的纹理图，可以直接在图像处理工具中给UV空白区域填充相邻像素，避免纹理采样时采到岛外的空白/黑色区域。
• 法线检查：确认模型法线没有翻转，平滑组配置正确，扫描模型建议统一设置自动平滑，角度阈值设为30~45度。

2. 导出参数配置

GLB格式导出

• 勾选「导出顶点法线」「导出UV坐标」
• 关闭「优化顶点数据」分类下的「强制合并顶点」选项
• 纹理导出时设置padding值为16像素，不要开启不可逆的纹理压缩

OBJ格式导出

• 同步导出.mtl材质文件，确认纹理路径配置正确
• 勾选「导出法线」「导出UV坐标」，不要勾选「精简顶点数据」

3. three.js加载适配

加载模型后调整材质参数：

// 纹理边缘采样设置为钳位，避免重复采样导致的边界溢出
material.map.wrapS = material.map.wrapT = THREE.ClampToEdgeWrapping
// 可临时关闭mipmap测试是否为纹理采样问题
// material.map.generateMipmaps = false
material.map.minFilter = THREE.LinearMipmapLinearFilter
// 若有单面渲染导致的裂纹，可开启双面渲染（性能开销小幅提升）
// material.side = THREE.DoubleSide

完成以上步骤后95%以上的扫描模型导出裂纹问题都可以解决，如果Windows 3D查看器中仍有裂纹，优先检查预处理和导出步骤的配置即可。

参考资料 #

• 3D查看器中的模型显示效果：
  
• Blender中的模型显示效果：
  
• 模型对应纹理图：
  

内容的提问来源于stack exchange，提问作者masanorinyo