How to create a custom mesh in Babylon.js?

Question

I'm using the babylonjs 3D WebGL library.

It's great library, but I can't find the same, which exists in THREE.JS library.

For example, I have 2D polygons in database, I'm fetching the polygon data from it and then create a custom mesh and extruding it.

With the THREE.JS, there isn't any problem, I can add to some array:

...
points.push( new THREE.Vector2( part.x, -part.y ) );
...
var shape = new THREE.Shape( points );
var extrusion = {
    amount: building.height,
    bevelEnabled: false
};
var geometry = new THREE.ExtrudeGeometry( shape, extrusion );
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({
    ambient: 0xbbbbb,
    color: 0xff0000
});
...
scene.add( mesh );

It's very simple. How to do the same, I couldn't find.

I've found only some information here:

With such an example (from msdn by Ctrl + F -> You can also create a mesh from a list of vertices and faces):

var plane = new BABYLON.Mesh(name, scene);

 var indices = [];
 var positions = [];
 var normals = [];
 var uvs = [];

 // Vertices
 var halfSize = size / 2.0;
 positions.push(-halfSize, -halfSize, 0);
 normals.push(0, 0, -1.0);
 uvs.push(0.0, 0.0);

 positions.push(halfSize, -halfSize, 0);
 normals.push(0, 0, -1.0);
 uvs.push(1.0, 0.0);

 positions.push(halfSize, halfSize, 0);
 normals.push(0, 0, -1.0);
 uvs.push(1.0, 1.0);

 positions.push(-halfSize, halfSize, 0);
 normals.push(0, 0, -1.0);
 uvs.push(0.0, 1.0);

 // Indices
 indices.push(0);
 indices.push(1);
 indices.push(2);

 indices.push(0);
 indices.push(2);
 indices.push(3);

 plane.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind);
 plane.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind);
 plane.setVerticesData(uvs, BABYLON.VertexBuffer.UVKind);
 plane.setIndices(indices);

 return plane;

But's it's rather not the same as with the THREE.JS. For example I need to count index buffer manually where in THREE.JS I don't need it, also it's a sample with plane only and I didn't find any info about extruding exactly.

So... Maybe, there are some easy ways in BabylonJS?

score 4 · Accepted Answer · edited Aug 10 '17 at 14:57

4

There is no support for extrusion right now but this could be a great feature to add :) I will definitely add it to our roadmap. If you would like to discuss the issue further please ask on the babylon.js forum.

EDIT:

Have ability to create custom shapes now.

http://doc.babylonjs.com/tutorials/parametric_shapes#extrusion

edited Aug 10 '17 at 14:57

Milind Anantwar

81,290
25
94
125

answered Oct 09 '14 at 16:58

David Catuhe

1,747
1
10
9

-1 This does not answer the question. You may link to an answer in another forum **IF** you include an answer in your own post as well. A link to the landing page of another forum does neither of these things. – Gordon Gustafson Nov 02 '14 at 22:11
Sorry about that, I didn't want to be rude. My response is: no support for now but we will add in a near future :) – David Catuhe Nov 04 '14 at 18:00
2

I've edited your post to make that more explicit and removed my downvote. I didn't realize that 'this feature isn't implemented yet' *was* the answer. – Gordon Gustafson Nov 04 '14 at 20:54

score 1 · Answer 2 · answered Nov 20 '19 at 14:06

Update 2019 PolygonMeshBuilder allows to create custom mesh from the collection of vertexes

Please note that the PolygonMeshBuilder uses Earcut, so, in non playground projects, you will have to add a reference to their cdn or download their npm package

Add Earcut as dependency in your index HTML

<script src="https://preview.babylonjs.com/earcut.min.js"></script>

Now you can use Pramaetric shapes to extrude polygon and punch holes.

   //Polygon shape in XoZ plane
    var shape = [ 
                    new BABYLON.Vector3(4, 0, -4), 
                    new BABYLON.Vector3(2, 0, 0), 
                    new BABYLON.Vector3(5, 0, 2), 
                    new BABYLON.Vector3(1, 0, 2), 
                    new BABYLON.Vector3(-5, 0, 5), 
                    new BABYLON.Vector3(-3, 0, 1), 
                    new BABYLON.Vector3(-4, 0, -4), 
                    new BABYLON.Vector3(-2, 0, -3), 
                    new BABYLON.Vector3(2, 0, -3)
              ];

    //Holes in XoZ plane
    var holes = [];
        holes[0] = [ new BABYLON.Vector3(1, 0, -1),
                 new BABYLON.Vector3(1.5, 0, 0),
                 new BABYLON.Vector3(1.4, 0, 1),
                 new BABYLON.Vector3(0.5, 0, 1.5)
               ];
        holes[1] = [ new BABYLON.Vector3(0, 0, -2),
                 new BABYLON.Vector3(0.5, 0, -1),
                 new BABYLON.Vector3(0.4, 0, 0),
                 new BABYLON.Vector3(-1.5, 0, 0.5)
               ];

    var polygon = BABYLON.MeshBuilder.ExtrudePolygon("polygon",{  
      shape:shape, 
      holes:holes,
      depth: 2, 
      sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);

Result:

See this playground for reference:

https://playground.babylonjs.com/#4G18GY#7

Advance usage

building Staircases:

https://www.babylonjs-playground.com/#RNCYVM#74

How to create a custom mesh in Babylon.js?

2 Answers2

Update 2019 PolygonMeshBuilder allows to create custom mesh from the collection of vertexes

Linked