Polygon from 2d to 3d

Questions
1

I am coming from 2d world, trying now to learn 3d, first thing I found was babylon.js, could someone please explain how a polygon is created in babylon? For example in 2d I can create a shape with points

let points = [
{x: 150, y: 50},
{x: 250, y: 50},
{x: 250, y: 150},
{x: 150, y: 50},
{x: 150, y: 150},
{x: 50, y: 250}
]

I understand that I have to add z point in my points array, but I am a bit confused about x,y, could someone please help me to understand how can I create above 2d points polygon to 3d polygon and create an extrude, lets say z=10? an example code or playground will be big help.

I tried to create here but it doesn’t show anything https://www.babylonjs-playground.com/#PTTMVI#157

Thanks

2

Hi @Dshah_H and welcoming me to the forum. You may find this way more straightforward Create Parametric Shapes - Babylon.js Documentation

If you prefer to stick to PolygonMeshBuilder Use PolygonMeshBuilder - Babylon.js Documentation

Note carefully the difference between construction methods and parameters. The first uses Vec3s the second Vec2s.

1 Like
3 
        var polygon = this.createPolygon(0, pointList2D, material);
        polygon.parent = this.regions;
        polygon.position = new BABYLON.Vector3(0,0,0);
        polygon.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);

createPolygon: function( _id, _points, _material )
{
    var corners = [];
    for(var i = 0, l = _points.length; i < l; i++)
        corners.push(new BABYLON.Vector2(_points[i].x, _points[i].y));
    var mb = new BABYLON.PolygonMeshBuilder("polygon" + _id, corners, this.scene);
    var polygon = mb.build();
    polygon.material = _material;
    return polygon;
},

I use this, it creates flat polygons (no extrusions) with the shape determined by the 2d point list.
When the shape is created I parent it to another mesh and spin it to face the camera.

Hope this helps a little!

1 Like
4

@JohnK Thank you for welcoming and linking to resources, and @pjbaron thanks for the snippet. , while I am understanding a bit on how all this is working I am still a bit confused on how I could convert my 2d points to BABYLON.Vector3 points, The above points I wrote:
let points = [
{x: 150, y: 50},
{x: 250, y: 50},
{x: 250, y: 150},
{x: 150, y: 50},
{x: 150, y: 150},
{x: 50, y: 250}
]

creates this image in 2d : Screenshot 2020-02-26 at 1.32.45 PM

Now I need to take the same points and add extrude for 3d, so I thought I could just divide all x,y to 100 and gets a point like this

let points = [
        { x: 150, y: 50, z: 1 },
        { x: 250, y: 50, z: 1 },
        { x: 250, y: 150, z: 1 },
        { x: 150, y: 50, z: 2 },
        { x: 150, y: 150, z: 1 },
        { x: 50, y: 250, z: 1 }
    ];
    var shape = [];
    points.forEach(function (point, i) {
     // dividing by 100
        shape.push(new BABYLON.Vector3((point.x / 100), (point.y / 100), point.z));
    });

but the shape is being created is not same, I am confused on how I can use the same points array and move into 3d, Here is a playground example https://playground.babylonjs.com/##WP4T1H , could you please update the playground ? Thanks

edit: I also tried to move y,z positions Babylon.js Playground, it gave a bit similar 2d image look.

5

ok, I think I get it now, this is the correct shape https://playground.babylonjs.com/#GD5WQ0#2

I just moved the camera distant and also switched y position with z,

shape.push(new BABYLON.Vector3((point.x ), point.z, (point.y )));

hopefully it is the right way?

6

A couple of problems.

Here hopefully is as you want it Babylon.js Playground

In Babylon.js Y axis increases upwards not downwards

From the Docs

All vectors for shape and holes are Vector3 and should be in the XoZ plane, ie of the form BABYLON.Vector3(x, 0, z) y should be zero

in counter clockwise order (see line 23, shape.reverse()

2 Likes
7

Thank you so so much, Now it all has started to make sense to me, I just started with babylon.js yesterday and already falling in love with it, and the supporting guy like yourself, made it easier to adopt. I will start reading docs and practice.

Thanks once again.

8

Keep playing with babylon.js and keep asking questions. Have fun.

1 Like