Creating non-horizontal shapes with CreatePolygon | Move a mesh center to a particular point

Questions
1

Hello there !

I’m trying to use MeshBuilder.CreatePolygon() for the user to create some custom flat polygon on a plane.
So let’s :

  • create a face
  • records the points
  • when 4 points are recorded :
  • attach the points to the plane
  • make the plane horizontal ('cause MeshBuilder.CreatePolygon() only works in 2D !)
  • create the polygon
  • attach it to the plane
  • straightened it to the old plane position
    And there is a problem : the polygon is at the right angle, but not the right position !

https://playground.babylonjs.com/#Q9VZS9#40

I think there’s something to add at line 112, juste before the straightening, but what ? :thinking:

2

The center of the plane will be at (0, 0, 0) so that the easiest way to sort out the position for your polygon is to ensure the coordinates of its vertices are referenced to the center of the plane, i.e. the origin of the polygon is the center of the plane. This way setting the positions of the plane and the polygon to the same value will place the origin of the polygon at the center of the plane.

You could also look at Pivots | Babylon.js Documentation

3

Thanks !

True that I’ve read other parts of the docs but the one about Pivots … will remedy to that !

https://playground.babylonjs.com/#Q9VZS9#41
So I’ve added polygon.position = plane.position. I’m close, but something is again wrong :

  • 4 clicks and the shape appears, but misplaced
  • > 4 clicks, it is placed correctly

Surely something about a .computeWorldMatrix()

4

From the docs

All vectors for shape and holes are Vector3 and should be in the xz plane, ie of the form BABYLON.Vector3(x, 0, z) and in counter clockwise order. You just list all the vertices of the polygon and CreatePolygon closes the shape.

Have you fully digested the order part of the information? When you create first, second, third, fourth and fifth points with the fifth point between say the first and second points you would need point order to be first, fifth, second, third, fourth and in correct direction to create a polygon.

For correct positioning have a look to see if you can find the screen coords of the center the of the plane and reference the picked points to this point as origin.

If I have more time I will have another look tomorrow.

5

Yup, I’ve seen the order part, but if you try to list them clockwisely, it works too.

For correct positioning have a look to see if you can find the screen coords of the center the of the plane and reference the picked points to this point as origin.

I’ve commented a section where I calculated the centerBox : the boundingBox of all points to align with the polygon boundindBox, but without success…

I think a solution is hidden in the Pivot part of the doc I haven’t read yet :slight_smile:

But don’t you find it weird the polygon is correctly placed the fifth time you click on the plane ?
Which part of the code is doing this ? … :thinking:

EDIT : just saw that polygon.position = plane.position moves the plane to a wrong position …

6

Have done some simplification of the code. Plane now created with center at origin and parenting of boxes removed.

Added an angle formed about origin from x axis to order the points each time one is added.

https://playground.babylonjs.com/#Q9VZS9#44

Hope that I am achieving what you want albeit in a simplified situation and it is useful to build on.

7

Mmh, not really I’m afraid…
But I’ll reuse your code for sorting points in clockwise order, thanks :stuck_out_tongue:

And I finally did it !! :dancing_women:

https://playground.babylonjs.com/#Q9VZS9#51

2 Likes