Convert SVG group into a 3D shape | adding thickness with Three.js

Question

Is there a way to convert an SVG group of paths into its 3D counterpart? In a way, It's like adding thickness to it.

I used SVGLoader to import my svg path into THREE.JS library:

loader.load(
    './test.svg',
    function ( data ) {

        const paths = data.paths;
    

        for ( let i = 0; i < paths.length; i ++ ) {

            const path = paths[ i ];

            const material = new THREE.MeshBasicMaterial( {
                color: 0x337ab7,
                side: THREE.DoubleSide,
                depthWrite: false,
                opacity: 1,
                transparent: true
            } );

            const shapes = path.toShapes( true );

            for ( let j = 0; j < shapes.length; j ++ ) {

                const shape = shapes[ j ];
                const geometry = new THREE.ShapeBufferGeometry( shape );
                const mesh = new THREE.Mesh( geometry, material );
                group.add( mesh );

            }

        }...

The SVG upload works fine. Do you know any library or trickery to accomplish this 3D transformation?

question from:https://stackoverflow.com/questions/65870512/convert-svg-group-into-a-3d-shape-adding-thickness-with-three-js

Answer 1

Instead of creating ShapeBufferGeometry try it with ExtrudeBufferGeometry. It should be exactly what you are looking for.