Three.js CSG布尔减运算偶现网格破损问题求助

问题背景 #

仅在网格处于某些特定角度时，Three.js CSG布尔减运算的结果会出现破损。红色网格是用于切割立方体的网格，该问题仅在两个切割网格距离较近时发生：

调整旋转角度后偶尔会出现错误结果：

可行解决方法 #

• 提升网格精度与细分：CSG运算对浮点精度高度敏感，近距或特殊角度下易出现计算误差。给参与运算的网格增加细分（如使用TessellateModifier），或对顶点坐标做四舍五入保留合理小数位，消除极小坐标差带来的歧义。
• 规避共面临界状态：当切割网格与目标网格面接近共面时，算法极易出错。可给切割网格沿法线方向做微小位移（如0.001单位），或调整旋转角度时跳过触发问题的区间。
• 更换CSG库实现：不同库的精度处理逻辑差异较大。若使用基础CSG库，可替换为three-bvh-csg（基于BVH加速，边缘场景稳定性更强）或csg-js的Three.js适配版本。
• 统一面缠绕顺序：CSG依赖面的方向判断内外，缠绕顺序（顺时针/逆时针）不一致会导致运算错误。用BufferGeometryUtils工具或手动遍历，确保所有网格面顺序统一。
• 预处理清理网格：运算前用BufferGeometryUtils.mergeVertices合并重合顶点，移除零面积面，减少冗余数据引发的运算异常。

网格破损检测方法 #

• 检查几何体参数异常：正常运算后，结果网格的面数、顶点数应在预期范围内，若出现骤降、骤增或为0，可判定为破损。
• 验证包围盒/球有效性：调用computeBoundingBox()和computeBoundingSphere()，若返回空或极值（极小/极大），说明几何体结构损坏。
• 遍历面检查有效性：编写代码排查无效面，示例如下：

function isGeometryBroken(geometry) {
  const index = geometry.index;
  const position = geometry.attributes.position;
  
  if (!index || !position) return false;
  
  const triangle = new THREE.Triangle();
  const vA = new THREE.Vector3();
  const vB = new THREE.Vector3();
  const vC = new THREE.Vector3();
  
  for (let i = 0; i < index.count; i += 3) {
    const a = index.getX(i);
    const b = index.getX(i + 1);
    const c = index.getX(i + 2);
    
    // 检查索引越界
    if (a >= position.count || b >= position.count || c >= position.count) {
      return true;
    }
    
    // 检查零面积面（共线顶点）
    vA.fromBufferAttribute(position, a);
    vB.fromBufferAttribute(position, b);
    vC.fromBufferAttribute(position, c);
    triangle.set(vA, vB, vC);
    if (triangle.getArea() < 1e-5) {
      return true;
    }
  }
  return false;
}

• 可视化排查：开启wireframe: true渲染结果网格，若出现线框断裂、重叠或缺失，可直接判断破损；也可启用Three.js调试工具查看顶点与面的分布。

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