ThreeJS合并Shape几何体：消除内部重叠透明度并保留对外透明性

方案1：合并Shape而非几何体（根源解决） #

如果所有Shape都在同一平面，优先直接合并Shape对象，再生成单个ShapeGeometry，从根源消除重叠面，避免透明度叠加问题。

示例代码：

// shapes 是多个THREE.Shape实例的数组
const mergedShape = new THREE.Shape();
shapes.forEach(shape => {
  mergedShape.union(shape); // 将每个Shape合并到主Shape中
});

const geometry = new THREE.ShapeGeometry(mergedShape);
const material = new THREE.MeshBasicMaterial({
  color: new THREE.Color("red"),
  opacity: 0.1,
  transparent: true,
  side: THREE.FrontSide
});
const mesh = new THREE.Mesh(geometry, material);

注：若Shape数量极多，union会有一定性能开销，但远优于CSG布尔运算。

方案2：使用模板缓冲避免重复绘制 #

通过模板缓冲标记已绘制区域，同一区域仅渲染一次，既能保证整体透明度一致，又能保留透视后方物体的效果。

步骤与代码： #

1. 启用渲染器模板缓冲：

const renderer = new THREE.WebGLRenderer({
  stencil: true // 必须启用模板缓冲
});

2. 创建两个网格（共享合并后的几何体）：

// 模板材质：仅标记绘制区域，不输出颜色
const stencilMaterial = new THREE.MeshBasicMaterial({
  colorWrite: false,
  depthWrite: false,
  stencilWrite: true,
  stencilFunc: THREE.AlwaysStencilFunc,
  stencilZPass: THREE.ReplaceStencilOp // 将绘制过的像素标记为1
});

// 透明材质：仅绘制模板标记过的区域
const transparentMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color("red"),
  opacity: 0.1,
  transparent: true,
  side: THREE.FrontSide,
  stencilWrite: false,
  stencilFunc: THREE.EqualStencilFunc,
  stencilRef: 1,
  depthWrite: false // 不遮挡后方物体
});

const stencilMesh = new THREE.Mesh(mergedGeometries, stencilMaterial);
const transparentMesh = new THREE.Mesh(mergedGeometries, transparentMaterial);

scene.add(stencilMesh);
scene.add(transparentMesh);

方案3：调整混合模式（快速适配） #

无需修改几何体或模板缓冲，通过调整混合参数让重叠区域透明度不叠加，同时保留透视效果：

const material = new THREE.MeshBasicMaterial({
  color: new THREE.Color("red"),
  opacity: 0.1,
  transparent: true,
  side: THREE.FrontSide,
  blending: THREE.CustomBlending,
  blendEquation: THREE.AddEquation,
  blendSrc: THREE.SrcAlphaFactor,
  blendDst: THREE.OneMinusSrcAlphaFactor,
  blendSrcAlpha: THREE.OneFactor,
  blendDstAlpha: THREE.OneFactor,
  depthWrite: false, // 不遮挡后方物体
  depthTest: true // 保持正常深度测试
});

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