Three.js ExtrudeGeometry处理含环形SVG时挤出结果异常问题咨询

问题原因 #

你所用的SVG是包含多段闭合子路径的复合路径，原有代码中把path.toShapes()返回的所有形状单独做挤出处理，原本应该作为镂空区域的内部子路径被当成独立实体生成了网格，最终就出现了多个圆盘堆叠的错误效果。

效果参考 #

预期效果：

原代码实际效果：

解决方法 #

修改路径转形状后的挤出逻辑即可：SVGLoader的toShapes(true)方法返回的数组中，第一个元素是外轮廓主形状，后续所有元素都是需要挖掉的孔洞，把孔洞添加到主形状的holes属性中，只挤出主形状就能得到正确的镂空效果。

修改后的核心代码 #

仅需要替换原有JS中遍历SVG路径的部分即可：

svgData.paths.forEach((path, i) => {
    const shapes = path.toShapes(true);
    // 取第一个作为主外轮廓
    const mainShape = shapes[0];
    // 剩余形状全部作为孔洞添加到主形状
    mainShape.holes.push(...shapes.slice(1));

    // 仅挤出主形状
    const geometry = new THREE.ExtrudeGeometry(mainShape, {
        depth: 20,
        bevelEnabled: false
    });
    geometry.computeVertexNormals();
    const mesh = new THREE.Mesh(geometry, material);
    svgGroup.add(mesh);
});

修改后不需要调整其他逻辑，运行即可得到和Blender渲染一致的镂空3D效果。

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