ShapeGeometry is not giving expected result from svg path data

Questions
, ,
1

I am trying to load shape with svg path in three js using THREE.ShapeGeometry but I did not get expected result sometimes.
Here is the code I used to load shape

let loader = new SVGLoader()
loader.load('./test.svg', function (data) {
    let paths = data.paths
    let group = new THREE.Group()
    threeViewer.scene.add(group)
    group.scale.y *= -1

    let path = paths[0]
    if(!path) return

    let shapes = path.toShapes(true)
    let shape = shapes[0]


    let material = new THREE.MeshBasicMaterial({
        color: "black",
        side: THREE.DoubleSide
    })

    let geometry = new THREE.ShapeGeometry(shape)
    let mesh = new THREE.Mesh(geometry, material)
    group.add(mesh)

    let box = new THREE.Box3().setFromObject(group)
    threeViewer.controls.smoothTime = 0.1
    threeViewer.controls.fitToBox(box, true)
})

test
For this svg THREE.ShapeGeometry renders

model
model1456×949 32.4 KB

2

Code looks good.

Are you using latest 161 version?
Can you share the test.svg?

Do you get the same result if you paste your test.svg into this page three-svg-js

It might be a bug.

3

It is there (extra small).

image

Three-svg-js has the same issue:

image
image1909×696 51.9 KB

4

I ran your file through this online tool SVGOMG - SVGO’s Missing GUI (jakearchibald.github.io).

The generated file fixes the problem

I think there’s some duplicate paths that SVGLoader doesn’t handle very well.

I haven’t done a details comparison of before and after to see what actually changed

2 Likes
5

thanks for your help, I fixed this issue by creating a separate svg’s for each character.