带孔洞SVG使用ExtrudeGeometry仅挤出六边形壁的问题

我需要对嵌套六边形的SVG进行挤出操作，目标是仅挤出两个六边形之间的壁空间，但当前挤出后得到的是两个重叠的实心六边形，内部区域被外部完全覆盖。调试时发现生成了4个网格：每条线对应一个，外部六边形与内部六边形各一个。

原始SVG效果：

当前挤出结果：

使用另一个仅含2个路径的SVG测试时，也出现同样问题，内部六边形被外部覆盖：

我试过用SVGLoader.createShapes(path)和path.toShapes(true)两种方式生成形状，以下是我的代码：

const loader = new SVGLoader();
// load a SVG resource
loader.load(
    // resource URL
    './svg/hexagone.svg',
    // called when the resource is loaded
    function (data) {

        const paths = data.paths;
        const svgGroup = new THREE.Group();
        svgGroup.name = "svgGroup"
        svgGroup.scale.y *= -1;
        let mesh;

        for (let i = 0; i < paths.length; i++) {
            const path = paths[i];
            
            const material = new THREE.MeshNormalMaterial();
            const shapes = SVGLoader.createShapes(path); //path.toShapes(true);

            shapes.forEach((shape, i) => {
                const geometry = new THREE.ExtrudeGeometry(shape, {
                    depth: 10,
                    bevelEnabled: false
                });
                geometry.computeVertexNormals();
                mesh = new THREE.Mesh(geometry, material);
                svgGroup.add(mesh);
            });
        }

        // Reshape items
        const box = new THREE.Box3().setFromObject(svgGroup);
        const size = new THREE.Vector3();
        box.getSize(size);

        const zOffset = size.z / -2;
        const yOffset = size.y / -2;
        const xOffset = size.x / -2;

        svgGroup.children.forEach(item => {
            item.position.z = zOffset;
            item.position.x = xOffset;
            item.position.y = yOffset;
        });

        scene.add(new THREE.AxesHelper(5))
        scene.add(svgGroup)

        // Rotate           
        svgGroup.rotateX(90 * Math.PI / 180);

    }
);

第一个SVG #

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.86 53.86">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }
    </style>
  </defs>
  <g>
    <polygon class="cls-1" points="15.98 53.36 .5 37.88 .5 15.98 15.98 .5 37.88 .5 53.36 15.98 53.36 37.88 37.88 53.36 15.98 53.36"/>
    <path d="M37.67,1l15.19,15.19v21.48l-15.19,15.19H16.19L1,37.67V16.19L16.19,1h21.48m.41-1H15.77L0,15.77v22.31l15.77,15.77h22.31l15.77-15.77V15.77L38.08,0h0Z"/>
  </g>
  <g>
    <polygon class="cls-1" points="20.63 44.31 10.96 34.64 10.96 20.96 20.63 11.29 34.31 11.29 43.98 20.96 43.98 34.64 34.31 44.31 20.63 44.31"/>
    <path d="M34.1,11.79l9.38,9.38v13.26l-9.38,9.38h-13.26l-9.38-9.38v-13.26l9.38-9.38h13.26m.41-1h-14.09l-9.96,9.96v14.09l9.96,9.96h14.09l9.96-9.96v-14.09l-9.96-9.96h0Z"/>
  </g>
</svg>

第二个测试SVG #

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Fusion 360, Shaper Origin Export Add-In, Version 1.6.10  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:shaper="http://www.shapertools.com/namespaces/shaper" shaper:fusionaddin="version:1.6.10" width="3.1176915cm" height="3.6cm" version="1.1" x="0cm" y="0cm" viewBox="0 0 3.1176915 3.6" enable-background="new 0 0 3.1176915 3.6" xml:space="preserve">
<path d="M-0,-1.8 L1.5588457,-0.9 1.5588457,0.9 -0,1.8 -1.5588457,0.9 -1.5588457,-0.9 -0,-1.8z" transform="matrix(1,0,0,-1,1.5588457,1.8)" fill="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" />
<path d="M-0.9588457,0.5535898 L-0.9588457,-0.5535898 -0,-1.1071797 0.9588457,-0.5535898 0.9588457,0.5535898 0,1.1071797 -0.9588457,0.5535898z" transform="matrix(1,0,0,-1,1.5588457,1.8)" fill="rgb(255,255,255)" stroke="rgb(0,0,0)" stroke-width="0.0010cm" stroke-linecap="round" stroke-linejoin="round" />
</svg>

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