Could someone help me figure out why these planes are not aligned along the Y-axis?

Hello!

I’m a beginner to BabylonJS and I think it is an amazing library! I love the clean source code and detailed documentation. It looks like the community is super friendly too!

Example of the problem I’m running into: https://www.babylonjs-playground.com/#LXZPJK#181

I was trying to draw a map using images of a region as a texture for a plane. The coordinates are the values from element.getBBox() call on SVG elements that I initially drew from a GeoJSON file.

I understand that the plane.position.x and plane.position.y are the center point of a plane, so I used the center coordinate of the SVG elements to position the planes.

However, as you can see in the example playground code, Alabama and Georgia are misaligned. If I move Alabama plane down or move Georgia plane along the Y-Axis, they become aligned perfectly, which means that the X-Axis does not have the misalignment problem. Only Y-Axis is misaligned for some reason. Why is this happening only along the Y-axis and what can I do to fix it?

Thank you for your help!

Hi Niam, nice to meet you :slightly_smiling_face:

Y-Axis problems are usually because in some places the y-axis direction goes in the opposite direction, which seems to be the case here, since this looks ok:

https://www.babylonjs-playground.com/#LXZPJK#182

2 Likes

Hello Gijs!

Wow thank you so much for help! That worked perfectly! I will keep that in mind from now on.

You are awesome!

1 Like