Question

当我在Illustrator中通过在不同的层上绘制多个描边的路径来创建SVG时，从路径的开始到路径的末尾没有任何连接，并且没有应用填充，然后将它们连接到一个图层中时，SVG会渲染符合浏览器中的预期，但与Three.JS中的预期不同

我完全使用在ThreeJS网站（stackoverflow）上定义的“加载”代码，仅更改所使用的SVG文件的路径。当我使用来自Wikimedia的示例SVG文件时，这些文件已挖空内部片段，它们将按预期方式呈现。例如，我使用了这个SVG，它是一个没有填充的空心圆，ThreeJS适当地渲染了它：https://threejs.org/docs/#examples/loaders/SVGLoader

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

https://upload.wikimedia.org/wikipedia/commons/d/dc/Circle_blank_font_awesome.svg

上面的图像仅用象限II中的一条路径绘制，然后在其他象限中垂直和水平地相对于自身镜像，然后将所有路径合并在一个图层中。

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

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

在Illustrator或Three.JS中是否存在步骤，所以在创建/保存SVG或导入到Three.JS中时缺少了，以便它不填充空心的内部形状，而仅渲染描边的外部路径代替？

Answer 1

请参阅上面@WestLangley的第一条评论，以获取还显示如何包含要呈现的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设计时，缺少什么步骤？

1 个答案: