Jump to content

How to create a custom mesh in Babylon.js?


Recommended Posts

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?
Link to comment
Share on other sites

  • 10 months later...


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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...