三个具有网格和透明表面的JS SVG渲染器

Question

我正在尝试使用threeJS渲染SVG文件。由于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：