在前端 3D 开发中，对于网格模型的修复和处理是非常常见的。npm 上的 mesh-fixer-tolerance 是一个较为常用的 npm 包，旨在帮助开发者处理一些用于浏览器的 STL 格式文件。本文将引导您使用 mesh-fixer-tolerance，并展示一些常见的用例。
安装
使用以下命令安装 mesh-fixer-tolerance：
npm install mesh-fixer-tolerance --save
使用
导入模块
在使用 npm 包 mesh-fixer-tolerance 之前，您需要在您的项目中导入模块：
import { BufferGeometry } from 'three';
import { applyFixes } from 'mesh-fixer-tolerance';应用修复
let geometry = new BufferGeometry().fromGeometry( mesh.geometry );
let fixedGeometry = applyFixes( geometry, { tolerance: 0.01 } );
mesh.geometry = new THREE.Geometry().fromBufferGeometry(fixedGeometry);上述代码做了以下内容：
- 从原模型获取 BufferGeometry 对象；
- 通过 applyFixes 方法对 BufferGeometry 对象应用一些修复；
- 通过 new THREE.Geometry().fromBufferGeometry 将要修复的 BufferGeometry 对象重新转换为 Geometry 对象。
在这里需要注意：mesh 是 THREE.Mesh 的实例对象。
修复选项
applyFixes 的第二个参数是一个对象，它可以包含多个修复选项。这些选项通常是根据您的具体情况进行配置的。下面给出 mesh-fixer-tolerance 的一些选项：
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| tolerance | Number | 10e-6 | 容差，一个小数，它决定了在应用修复时计算正偏差和负偏差的距离值。只有距离值大于容差值时，相应的修复才会应用。 |
| toleranceRelaxation | Number | 1.5 | 容差放松因子，它可以为容差值增加一定的余量。在一个受城市震级风险的地区，人们通常会经常改变自己的标准，是为了能够应对未来的大地震。这样，一旦更严重的问题出现了，则会采取更严格的标准来防止灾难。同样，这个选项可以为容差增加一定余量，从而在处理完严格的问题之后，潜在的小型问题也能被解决。 |
| referencedVertexToleranceMin | Number | tolerance | 引用点容差最小值，这用于点合并和消除。如果模型中两个三角形共享相同的点，它们中的一个会被移除，以减少顶点数。默认情况下，参考顶点容差最小值为容差值。 |
| closedEdgesToleranceMin | Number | tolerance | 闭合边缘容差最小值，这用于修复问题边缘。当三角形未完全闭合时，如果它们都在同一个平面上，可能存在未完全堵塞的小缝隙。通过适当地阈值设置，可以消除这些缝隙。默认情况下，闭合边缘容差最小值为容差值。 |
示例
下面将演示一个完整的轮廓修复例子：
假设你有一个 3D 模型，如下所示：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------------------------
--- ------ - --- ------------
------------ ------------------- -------- - -------- - -
------------------
--- -------- - --- ---------------------------
--- ---- - --- ----------- --------- -------- --
---------- ---- --
- --我们可以对这个模型应用 mesh-fixer-tolerance：
-- -------------------- ---- -------
------ - -------------- - ---- --------
------ - ---------- - ---- -----------------------
-- --------------------
------------- -- -
--- -------- - --- ------------------------------ ------------- --
--- ------------- - ----------- --------- - ---------- ---- - --
------------- - --- ---------------------------------------------------
-- ------通过上述应用，你将获得一个更好的模型，它执行了一些自动修复，以确保其在浏览器中正确呈现。
总结
mesh-fixer-tolerance 是开发者在前端 3D 设计中处理网格模型问题时的一种实用工具。使用 applyFixes，您可以将其直接应用于 THREE.BufferGeometry，从而自动修复一些可能会对您的设计造成问题的典型错误。通过正确设置修复选项，您可以获得优秀的结果，这将省去您在确定问题、寻找解决方案以及手动修复过程中耗费的大量时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8d81e8991b448d92f1