在创建 SVG 以导入 Three 时遗漏了哪些步骤.JS以便它尊重真正的 SVG 设计?

Question

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

我逐字使用位于此处的 ThreeJS 网站上定义的"加载"代码：https://threejs.org/docs/#examples/loaders/SVGLoader，仅更改正在使用的 SVG 文件的路径。当我使用来自维基媒体的示例SVG文件时，这些文件的内部部分是空心的，它们会按预期呈现。例如，我使用了这个SVG，它是一个没有填充的空心圆，ThreeJS适当地渲染了它：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 渲染的内容(忽略网格材质)...

https://www.dropbox.com/s/iw4xwiw0807mf3x/threejs_test.png?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 );
}
}
}