Hi!
I have a goldberg poly and I want to place tiles on hexagon but it’s not center on hexagon.
PG: https://playground.babylonjs.com/#CA1VTF#1
So how to I can put the tiles in the center and scaling to fill of the hexagon?
Hi @Demon.Era and welcome to the community. You can see more clearly the issue with this PG where the number of faces of the Goldberg poly has been reduced and the background colour of the face where your hex tiles are. The hex tiles are definitely offcenter with regard to the faces.
As the numbers in calculating the Goldberg Poly become quite small this might be down to the difference between the center of each hex face been calculated as close to zero rather than zero itself or it could be an error in assigning the center of a face, I will need to check.
By the way you have not set size correctly when creating the Goldberg poly.
EDIT Missing PG https://playground.babylonjs.com/#CA1VTF#2
Thanks for your answer! Because I’m building a globe with a large number of tiles, so I have to set a rather large size. I really look forward to your next reply after you have checked it.
@Demon.Era Unfortunately even trying an alternative way to construct face centers based on the vertices of a hexagonal face (which although gave slightly different values for the coordinates +/- 0.05 for size 1) did not solve the issue of precisely placing a hexagon mesh on a face.
However on examination of the code I did find that placeOnGoldbergFaceAt did not take into account size when it is not 1. Will submit a PR to correct that. This means that the vector used to position a mesh on a face will be, as the docs say, be in respect to the face center.
In terms of scaling when you know the radius of the imported mesh you can find a scaling factor using
const centFaceBase = goldberg.goldbergData.faceCenters[12];
let adjIdx = 0;
let adjToBase = goldberg.goldbergData.adjacentFaces[12][adjIdx];
while (adjToBase < 12) { // rejects pentagon;
adjToBase = goldberg.goldbergData.adjacentFaces[12][++adjIdx]
}
const adjFace = goldberg.goldbergData.faceCenters[adjToBase];
const dist = centFaceBase.subtract(adjFace).length() / 2
const hexRadius = dist * Math.sqrt(3);
const scaling = hexRadius / meshRadius
I obtained the radius of the imported mesh using the bounding sphere radius. As you can see in the next PG I had to apply a factor of 0.8 to get the bounding sphere closer to the hexagon.
This image
was produced using the corrected version for the Goldberg poly and a scaling factor calculated as above. As I said, unfortunately this does not solve your hexagon tile placement issue.
Having thought about it more, there is a reason for this and why it cannot work. Consider the 6 green hexagons surrounding the blue hexagon below
If all the hexagons were regular and the same size the only way they could fit together would be on a flat surface. SInce they are on a curved surface they cannot be regular and may be of different sizes.
Thanks for your detailed answer. Also quite sad because the results weren’t what I was expecting. Anyway thanks for taking the time to check it out.