Three JS SVG Renderer с сеткой и прозрачными поверхностями

Question

Я пытаюсь сделать файлы SVG с помощью ThreeJS Поскольку PNG-файлы выглядят не очень хорошо, я сейчас использую SVGRenderer.

Мои SVG-файлы выглядят так:

Когда я отрисовываю изображение, оно кажется полностью черным (хотя цвет, который я выбрал)

Я нашел возможность отобразить его в виде каркаса, но там показаны некоторые рамки, которые я не хочу видеть

Мой JS выглядит так:

var loader = new THREE.SVGLoader();
loader.load( 'media/qpartdark/SVG/qpart2.svg', function ( paths ) {
    var group = new THREE.Group();
    group.scale.multiplyScalar( 0.25 );
    group.position.x = - 70;
    group.position.y = 0;
    group.position.z = 0;
    group.scale.y *= -1;
    for ( var i = 0; i < paths.length; i ++ ) {
        var path = paths[ i ];
        var material = new THREE.MeshBasicMaterial( {
            color: path.color,
            side: THREE.DoubleSide,
            depthWrite: false,
            wireframe: false,
            wireframeLinewidth: 0.01
        } );
        var shapes = path.toShapes( true );
        for ( var j = 0; j < shapes.length; j ++ ) {
            var shape = shapes[ j ];
            var geometry = new THREE.ShapeBufferGeometry( shape );
            var mesh = new THREE.Mesh( geometry, material );
            group.add( mesh );
        }
    }
    scene.add( group );
} );

//
renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

У вас есть какие-нибудь подсказки, как я могу отобразить svg, как в примере?

вот оригинальный SVG: