Adding displacement map to low poly mesh

Hi,

I’m creating a 3D map (with markers) from an SVG file and I’m trying to add a displacement map for elevation. However, given the low number of vertices on the surface, the displacement isn’t working correctly.


Is there a way to add more vertices or make the displacement work in some other way?.

Code for reference:

        const loader = new SVGLoader()
        loader.load(
          "map.svg",
          (data) => {
            let paths = data.paths
            let shapes = []
            for (let i = 0; i < paths.length; i++) {
              Array.prototype.push.apply(shapes, paths[i].toShapes())
            }
            const extrusionSettings = {
              depth: 8,
              steps: 2,
              bevelEnabled: true,
              curveSegments: 3,
            }
            const geometry = new THREE.ExtrudeBufferGeometry(
              shapes,
              extrusionSettings
            )
            const mesh = new THREE.Mesh(
              geometry,
              new THREE.MeshPhongMaterial({
                color: 0xff0000,
                wireframe: true,
                displacementMap: groundTexture,
                displacementScale: 20,
              })
            )
          scene.add(mesh)
          }

Thanks,

Yunus