handle multiple children with <Subtraction>

[marcofiletto]

Hi there! I'm trying to use <Subtraction> within a map. The idea is to take each path of an SVG and apply subtraction to it.

         {shape.children.map(s => (
            <mesh
              key={s.uuid}
              rotation={[Math.PI, 0, 0]}
            >
              {/* @ts-ignore: center exists on gltf type */}
              <Subtraction geometry={s.geometry} showOperation={false} />

              <meshStandardMaterial
                {...SVGMaterialConfig}
              />
            </mesh>
          ))}

but for some reason it only subtract the first child any suggestions?

[marcofiletto]

I solved it by merging SVG geometries before applying the subtraction.

const geometries = shape.children.map(child => child.geometry);
const mergedGeometry = mergeGeometries(geometries);

and of course, no map needed, just use <Subtraction geometry={mergedGeometry} />