It seems like the issue may be arising in the constructor of the Square class, or possibly in the method drawSquare(). There is also a potential problem with the `lookAtZero()` method, as it appears to rotate the shape's normal to point towards zero, but the exact rotation mechanism is unclear.
When creating the squares, it is essential to ensure that one edge aligns with a line of latitude and the other with a line of longitude. Begin by setting the square's center at
var x0 = rayon * (Math.cos(lat) * Math.cos(long));
var y0 = rayon * (Math.cos(lat) * Math.sin(long));
var z0 = rayon * (Math.sin(lat));
The horizontal tangent would be
tx = -Math.sin(long)
ty = Math.cos(long)
tz = 0
and the tangent along the latitude line would be
ux = -Math.cos(lat) * Math.cos(long)
uy = -Math.cos(lat) * Math.cos(long)
uz = Math.sin(lat)
These are calculated by differentiating with respect to longitude and latitude, respectively. They should be unit vectors.
You can then define a rectangle with points
x0 +/- celW * tx +/- celH * ux
y0 +/- celW * ty +/- celH * uy
z0 +/- celW * tz +/- celH * uz
Alternatively, you can generate points by incrementing the latitude and longitude parameters
var x2 = rayon * (Math.cos(lat + lat_inc) * Math.cos(long + long_inc));
var y2 = rayon * (Math.cos(lat + lat_inc) * Math.sin(long + long_inc));
var z2 = rayon * (Math.sin(lat + lat_inc));
This method will result in a trapezium rather than a rectangle.