创建要导入 Three.JS 的 SVG 以使其符合真正的 SVG 设计时，错过了哪一步？

Question

当我在 Illustrator 中创建 SVG 时，通过在不同图层上绘制多个描边路径，从路径开始到路径结束没有连接，也没有应用填充，然后将它们连接到一个图层中， SVG 在浏览器中按预期呈现，但在 Three.JS

中未按预期呈现

我逐字使用 ThreeJS 网站上定义的 "load" 代码：https://threejs.org/docs/#examples/loaders/SVGLoader, changing only the path to the SVG file being used. When I use sample SVG files from Wikimedia that have hollowed inner pieces they render as expected. For example I used this SVG which is a hollowed circle with no fill and ThreeJS renders it appropriately: https://upload.wikimedia.org/wikipedia/commons/d/dc/Circle_blank_font_awesome.svg

现在这是我在 Illustrator 中创建的示例图像：

https://www.dropbox.com/s/x2pibx6olayvfe0/test.svg?dl=0

上图仅使用象限 II 中的一条路径绘制，然后在其他象限中垂直和水平镜像自身，然后将所有路径连接到一个图层中。

这就是 Three.JS 渲染的内容（忽略网格 material）...

https://www.dropbox.com/s/iw4xwiw0807mf3x/threejs_test.png?dl=0

在 Illustrator 或 Three.JS 中是否有一个步骤我在 creating/saving SVG 或导入 Three.JS 时丢失，以便它知道不要填充空心内部形状，但只渲染描边的外部路径？

Answer 1

请参阅上面@WestLangley 对 link 的第一条评论，其中还显示了如何包含要呈现的 SVG 数据的子路径。


    var strokeColor = path.userData.style.stroke;

    if ( guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none' ) {

        var material = new THREE.MeshBasicMaterial( {
            color: new THREE.Color().setStyle( strokeColor ),
            opacity: path.userData.style.strokeOpacity,
            transparent: path.userData.style.strokeOpacity < 1,
            side: THREE.DoubleSide,
            depthWrite: false
        } );

        for ( var j = 0, jl = path.subPaths.length; j < jl; j ++ ) {

            var subPath = path.subPaths[ j ];

            var geometry = THREE.SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );

            if ( geometry ) {
                var mesh = new THREE.Mesh( geometry, material );
                group.add( mesh );
            }
        }
    }

创建要导入 Three.JS 的 SVG 以使其符合真正的 SVG 设计时，错过了哪一步？

What step is being missed when creating an SVG for import into Three.JS so that it honors the true SVG design?

svg

adobe-illustrator

stroke

three.js