Having some fun playing with this code.

[mmiscool]

Hello,
Fist off thanks for this great code that seems to just work!

I wanted to figure out if it was possible to use the THREE.Group(); object as shown below and turn in to a THREE.CSG.fromMesh(). It might just be that I don't know my way around three.js well enough yet. But it seems like the group is not able to be used as a mesh. Is there a way to converter a THREE.Group() object in to a THREE.CSG directly or an easy way to convert the group to a mesh that THREE.CSG can take?

I have been able to use the individual meshes get created for each loop of the SVG but would rather not have to do bools on the individual meshes but rather the final resulting mesh that the group represents.

code from article https://muffinman.io/three-js-extrude-svg-path/
demo from article https://codepen.io/stanko/pen/gObMepb

const svgMarkup = document.querySelector('svg').outerHTML;

const loader = new THREE.SVGLoader();
const svgData = loader.parse(svgMarkup);

// Group that will contain all of our paths
const svgGroup = new THREE.Group();

const material = new THREE.MeshNormalMaterial();

// Loop through all of the parsed paths
svgData.paths.forEach((path, i) => {
  const shapes = path.toShapes(true);

  // Each path has array of shapes
  shapes.forEach((shape, j) => {
    // Finally we can take each shape and extrude it
    const geometry = new THREE.ExtrudeGeometry(shape, {
      depth: 20,
      bevelEnabled: false
    });

    // Create a mesh and add it to the group
    const mesh = new THREE.Mesh(geometry, material);

    svgGroup.add(mesh);
  });
});

// Add our group to the scene (you'll need to create a scene)
scene.add(svgGroup);