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

Question

When I create an SVG in Illustrator by drawing multiple stroked paths on different layers with no connection from the start of path to the end of the path and with no fill applied, and then join them into a single layer, the SVG renders as expected in the browser but not as expected in Three.JS

I am verbatim using the "load" code defined on the ThreeJS website located here: 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

Now this is the image I created as an example in Illustrator:

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

The above image was drawn using just a path in quadrant II, then mirrored against itself vertically and horizontally in the other quadrants and then all paths were joined in a single layer.

This is what Three.JS renders however (ignore the mesh material)...

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

Is there a step in Illustrator or in Three.JS I am missing when creating/saving the SVG or when importing into Three.JS so that it knows not to fill in the hollow inner shape, but only render the stroked outer path instead?

Answer 1

See the first comment by @WestLangley above for the link that shows also how to include the subpaths of the SVG data to be rendered.

    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 );
            }
        }
    }