Created an extruded shape from SVG paths (SVGLoader?)

Questions
#1

I’m wondering what the best way to take vectors from an SVG and create an extruded shape. Here’s an example of a drawn asset with it’s top point at 0,0.

Screen Shot 2020-11-08 at 3.23.17 PM
Screen Shot 2020-11-08 at 3.23.17 PM1246×1356 11.3 KB

I could spend the time writing something that parses the path of the line (sometimes it has beziers) but I was wondering if there’s a more acceptable method like an SVG loader or a tool? The goal is to pull in an SVG asset, parse the path then use the vector points to created an extruded shape.

The height/width of the asset is to be standardized ie. 100px x 100px so that I can scale and size the geometry as I need.

Suggestions would be awesome. =)

#2

There’s no existing tool I know of in Babylon that would do this.

Maybe you can use these as a starting point:

Or using getPointAtLength:

var NUM_POINTS = 6;

var path = document.getElementById("test");
var len = path.getTotalLength();
var points = [];

for (var i=0; i < NUM_POINTS; i++) {
    var pt = path.getPointAtLength(i * len / (NUM_POINTS-1));
    points.push([pt.x, pt.y]);
}

console.log("points = ", points);

<svg>
  <path id="test" d="M5,15 c5.5,0 10-4.5 10,-10 h10"/>
</svg>

See answer here: javascript - Convert SVG path to polygon coordinates - Stack Overflow

1 Like
#3

Hmmmmm, I hate relying on the browser for these sorts of things so while getPointAtLength is tempting I rather take the hit on bundle size for svg-path-to-polygons. Looks like it’ll work nicely. Thanks again @Evgeni_Popov