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:

• /

• .aspx

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?

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:

• http://www.html5gamedevs./topic/4530-create-a-mesh-from-a-list-of-vertices-and-faces/

• http://blogs.msdn./b/eternalcoding/archive/2013/06/27/babylon-js-a-plete-javascript-framework-for-building-3d-games-with-html-5-and-webgl.aspx

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?

• javascript
• 3d
• three.js
• babylonjs

2 Answers 2

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./tutorials/parametric_shapes#extrusion

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./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./#4G18GY#7

Advance usage

building Staircases:

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