Import and extrude 2D Mesh


I’m a newbie in babylonJS and i try to use it for a CAD App. I’d like to import a 2D file to Babylon and extrude it along a path… I don’t know what is the best way to manage this.

Thanks for your help.

Sincerely yours,


Hi bvaisman,

Welcome to Babylon! Probably the best place to start is the doc page on shape extrusion. That should give you a good overview of the extrusion capabilities built into Babylon, which will either give you a good path forward or provide context for further questions. Hope this helps, and best of luck!

Thanks for your answer. I’ve already read the doc and i really don’t know what kind of file format I have to chose to import 2D meshes to babylon and to manage to extrude them.

Okay, I’m guessing I’m just missing some context. Can you clarify what you mean by a 2D mesh? For example, what kind of file are you wanting to import?

You’re right, i have to give more explanation.

I want to extrude aluminium profiles. I assume that these profiles are 2D files which represent the sections of the profiles . First i want to load a 2D file in babylon, get the 2D shape and extrude it along the Z axis to create a 3D profile.

Here’s an image of a profile.

Okay. So, to be clear, what you’re trying to do is create meshes out of PNG cross sections, right?

If so, that’s not a particularly easy thing to do well, so I’d first of all recommend looking into whether there’s any way you could work from a mesh asset instead. Babylon can import a variety of mesh formats, so if your cross-sections ever were a 3d mesh at any point, it’d probably be easier to keep them 3D.

From what you said, though, it sounds like you’re trying to make a CAD app, implying that perhaps there was never a 3D object before. If that’s true, then you either need to make a 3D mesh yourself (not easy) or do something fancy like volume rendering (also not easy). To decide between these approaches, can you give a bit more information about your use case? Specifically, is this CAD targeting cutters (like jigsaw or plasma), CNC mills, 3D printing…? Are the things to be rendered ever built from multiple cross sections, or is there only one cross section per part?

It’s not particularly a png file. I can convert my profiles files into any 2D file. The main issue is that I don’t know the extrude path and this path may have angles

To be completely clear, here’s an exemple of what i want, made with Sketchup:

First the profile and the path (in blue).

and the result of the extrusion.

(Sorry, i cannot post 2 images at the same time)

Okay, gotcha; volume rendering is definitely not what you want. :slightly_smiling_face:

You almost certainly want to use the MeshBuilder.ExtrudeShape(...) feature as exhibited in this Playground. If you look in that Playground, there are two arrays of Vector3s: myShape and myPath. These are the two key pieces of data you’ll need, so you’ll need to recover those from whatever file you store your profiles in. If you can just supply this information as an array of vectors, that’ll be the easiest to work with. However, if your profiles must be uploaded in a 2D raster format (like PNG or something PNG can be converted to), you can get a workable result by “tracing” through the pixels manually to produce your shape. This is essentially a raster-to-vector conversion, which in general is probably a bit out of scope for a forum question, but relatively constrained versions shouldn’t be too tricky. You may also be able to find existing tools that will do this for you, though probably most will be focused on 2D rather than 3D and so might be tricky to adapt. Long story short, if you can export your shapes and paths as vector sequences to start with, that will probably simplify your scenario a lot; but even if you can’t, it’s still doable.

No idea if any of this was helpful, but hopefully it at least provided some points of investigation. :slightly_smiling_face:

Ok, now my mesh is loaded in Babylon. I exported my profile in a gltf format and use the loader functions.

Now i want to get the shape around my mesh to apply BABYLON.MeshBuilder.ExtrudeShape function but i don’t know if it is possible to do that.

Sorry, the shape must be in a (X,Y) plane.


I get the positions of the vertices.

var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);

Create a path

myPath = ;

myPath.push(new BABYLON.Vector3(0,0,0));
myPath.push(new BABYLON.Vector3(0,0,50));

let extruded = BABYLON.MeshBuilder.ExtrudeShape(“ext”, {shape: positions, path: myPath},scene);

And… it doesn’t work… ;-(

The Playground repro would help to help more :slight_smile:
Using your own GLTF at PG - Using External Assets In the Playground | Babylon.js Documentation

That’s now better… I thought that positions where an array of Vector3 but that is not.

So i transform the position array in a Vector3 array.

The problem is that the extrusion is not good because the shape include internal edges. I figured the original profil in a larger dimensions beside my extrusion

Do you know if there is a way to remove internal faces to obtain an empty shape before calculating positions ?