Are you sure the issue is caused by three ? I pasted your SVG into a codepen (as plain HTML, no JS, no frameworks) and it seems to look the same way as it does in your example:
yes it looks right, and I’m porting a canvas svg renderer that uses this svg without three js and it works well, opening with illustrator, figma and any other tool also works fine.
Here’s a codepen with the svg looking okay:
removing the e-[number] sort of work so that the issue is not super noticeable, but the curve is not exactly the same shape as the original
replacing with the correct amount of zeros doesn’t look right either
I’m trying to replicate it on codepen - but meanwhile, wouldn’t just scaling the SVG up (so that these super low e-values don’t appear around) and then using .scale to scale them down work?
hm that’s interesting. I will try it, but ideally I think It should support it. With our current use case we store a lot of path data in a database and scaling all our svgs before passing them to the three js SVGLoader may not work out great. But thanks for the quick answer, I will experiment with that idea
This is the steps which I use for draw (Not All steps)
const geometry = new THREE.ShapeGeometry(shape, 0)
const material = new THREE.MeshBasicMaterial({
color: new THREE.Color(0xffffff),
})
const mesh = new THREE.LineSegments(geometry, material)
Thanks for answer @Mugen87.
So which Geometry I should use with shapes received from SVG paths and LineSegments for having result for example this shape from image in canvas ?
Thank you for hint @Mugen87 I think I find solution for my case if I want to generate wireframe (only bordered box ) from SVG shapes I should use EdgesGeometry and generate edges from shape geometry and after that use edges in LineSegments.
const geometry = new THREE.ShapeGeometry(shape)
const edges = new THREE.EdgesGeometry(geometry)
const material = new THREE.MeshBasicMaterial({
color: new THREE.Color(0xffffff),
})
const mesh = new THREE.LineSegments(edges, material)