Currently, I am utilizing the Babylonjs 3D WebGL library and finding it to be a fantastic tool. However, I am facing a challenge in replicating a feature that exists in the THREE.JS library.
My scenario involves 2D polygons stored in a database. I retrieve the polygon data and proceed to create a customized mesh by extruding it.
When working with THREE.JS, the process is quite straightforward. I can simply add points to an 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 );
Recreating this in BabylonJS has proven to be a challenge. I have come across some helpful information, though:
One example I found (from the MSDN link) demonstrates creating a mesh from 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;
Although this method works, it involves manually calculating the index buffer, which is not required in THREE.JS. Furthermore, the sample provided deals with a plane and does not address extrusion specifically.
My quest now is to explore if there are simpler ways in BabylonJS to achieve the same functionality effortlessly.