I’m not quite sure how I can actually sketch 3d points clearly. I tried and I was unable to understand what I did myself. I tried doing a simple 3d visualization using the playground to help visualize it (I also added a “floor” just to help understanding the orientation)
Obviously, the shape can be anything and have any number of “corners”. The only thing we know for sure is that ALL of the points are on the same “plane” (but we don’t know how this plane is aligned…
I come from the easier 2d world. With a 2d canvas, we can do something like this to create a shape from its corners and then fill it. I thought I could do something similar (but in 3d, generating a mesh automatically as needed). Maybe I’m just not in the right mindset for this…
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.moveTo(0, 10);
ctx.moveTo(10, 5);
ctx.closePath();
ctx.fill();
As for the extrusion, it “simply” needs to be perpendicular to the polygon (so we have 90 degree angle everywhere)
Checking the documentation, and playing with it, I thought I could draw my “flat polygon” in 3d and then use its normal as the extrusion vector. For multiple reasons, it doesn’t work this way (firstly, the CreatePolygon cannot create a polygon with non-zero Y)
I don’t actually need the quad on which all points lie. I just thought that might be helpful in a way (at least to visualize the problem). That being said, if there’s an easy way to get the rotations needed to place a “virtual quad” on all of our points, that should allow me to draw the initial polygon on the ground (projecting/rotating all the points to the ground), extrude it as needed toward the sky and then rotate it back at its final position.
(Technically, I don’t need the real center for anything. But I need to use the first point in the array as the “transform center” of the final shape. I don’t know if it helps in any way.)
For reference, here’s what I had in mind initially (but that doesn’t work)
//Declare my vertices
var shape = [
new BABYLON.Vector3(0, 0, 0),
new BABYLON.Vector3(0, 10, 10),
new BABYLON.Vector3(10, 5, 10),
];
var extrusionDepth = 5;
//Polygon options as needed
var options = {
shape:shape,
sideOrientation: BABYLON.Mesh.DOUBLESIDE
}
//Generate polygon
var polygon = BABYLON.MeshBuilder.CreatePolygon("polygon", options);
//Get normal of a point
//I think this shoud work because my points are on a weird plane, so any normal should be in the right direction.
var normals = polygon.getVerticesData(BABYLON.VertexBuffer.NormalKind);
var positions = polygon.getVerticesData(BABYLON.VertexBuffer.PositionKind);
//Generate extrusion vector
var extrusionVector = BABYLON.Vector3.FromArray(positions[0], 0).add(BABYLON.Vector3.FromArray(normals, 0).scaleInPlace(extrusionDepth));
Then, I hoped I would be able to extrude my current polygon doing something like this
polygon.extrude(extrusionVector)
I don’t think something like that is doable. I think I need to create a new shape (using ExtrudeShape?)
var options = {
shape: shape,
path: extrusionVector,
sideOrientation: BABYLON.Mesh.DOUBLESIDE,
updatable: true
}
let extrudedPolygon = BABYLON.MeshBuilder.ExtrudeShape("ext", options);
(I find it a bit “wasteful” to create a shape just to get its normals - there’s probably a better way. I guess I can minimize the impact of this by doing a small mesh (using only 3 of the points maybe) because they should all generate a normal in the same direction.)
Thanks for your help.
