I have imported an SVG shape of the letter ‘M’ into Three.js using SVG Loader. The geometry that is being created seems unecessarily complex and is causing issues.

Is there a way to achieve cleaner, more simple geomtery? I don’t know if it’s to do with SVG Loader, or the way I’m setting up the SVG file itself. Perhaps I need to create the shape in 3D and import it that way?

As you can see from the wireframe, the geometry isn’t as neat and clean and simple as it could be.There seem to be extra polygons.

(https://i.sstatic.net/lSeLKp9F.png)

I am using SVG Renderer and the issue this causes is that the resulting SVG has these spurs where all the geometry points meet and overlap a little.

(https://i.sstatic.net/DzwHHX4E.png)

Any help would be greatly appreciated.

I have tried simplifying the svg file by removing any extrenous points.

Here is the SVG markup:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 151.72 165.95">
  <path class="cls-1" d="M0,0h19.14l56.72,124.64L132.58,0h19.14v165.95h-19.37V44.35l-46.68,103.17h-19.61L19.37,44.35v121.61H0V0Z"/>
</svg>

Here is the SVG Renderer setup:

renderer = new SVGRenderer(); // Init a renderer
renderer.overdraw = 0.58; // Allow three.js to render overlapping lines
renderer.setSize( mainWidth, mainHeight );
mainElement.appendChild(renderer.domElement); // Add the renderer in the DOM
renderer.domElement.setAttribute('xmlns' ,'http://www.w3.org/2000/svg'); // Add the xmlns attribute

Here is the SVG Loader setup:

// Load SVG and create mesh
const loader = new SVGLoader();
loader.load('svg/m.svg', function (data) {
    const paths = data.paths;
    const shapes = [];
    paths.forEach((path) => {
        path.toShapes(true).forEach((shape) => {
            shapes.push(shape);
        });
    });

    mesh = createExtrudedMesh(shapes);
    scene.add(mesh);

    // Depth control
    const depthControl = document.getElementById('depth');
    depthControl.addEventListener('input', (event) => {
        const depth = event.target.value;
        extrudeSettings.depth = parseFloat(depth);
        
        // Remove the old mesh and add a new one
        scene.remove(mesh);
        mesh = createExtrudedMesh(shapes);
        scene.add(mesh);
    });

    animate();
});



// Render loop
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}