How to create a custom mesh in Babylon.js?

[deni]

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.com/topic/4530-create-a-mesh-from-a-list-of-vertices-and-faces/

 

 - http://blogs.msdn.com/b/eternalcoding/archive/2013/06/27/babylon-js-a-complete-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?

[GameMonetize]

Hello this is something not yet supported but it was added to the roadmap

[deni]

 

Hello this is something not yet supported but it was added to the roadmap

What's about right now? Has such possibilities appeared in BabylonJs? 

[GameMonetize]

Yes sir:) http://doc.babylonjs.com/tutorials/Parametric_Shapes#extrusion

[Ahiru]

This link: http://www.babylonjs-playground.com/#295H7U#4  throws a compilation error: 

Compilation error

Cannot read property 'subtract' of undefined

[jerome]

mmhh..

 

It seems related to a temporary bug due to the new normal computation along the seam. I will fix it soon

[Ahiru]

So, I guess that in this Scene it's the same problem? http://www.babylonjs-playground.com/#RF9W9#4

[jerome]

yep

probably, everywhere where the ribbon is used with closePath set to true (I couldn't remember if it was the case on the extrusion, but maybe)

You could use ExtrudeShapeCustom meanwhile to get sure the closePath parameter is set to false.

 

I wished I could fix this today but I was too busy at work to find a little time to do it. Sorry.

I wish I can do it tomorrow.

[GameMonetize]

Jerome is back from holiday..Hurrah

[jerome]

mouarf

 

BTW, for french readers, an article about BJS in this pro magazine (nothing you don't already know actually) : http://www.programmez.com/magazine/article/la-3d-sur-le-web-avec-babylonjs

[adam]

Yes!  Jerome is back!