How to get a vector corresponding to a 90° angle ?

Hello,
Sorry if the question title might be unclear.
Basically I have the following sandcastle.
**In the sandcastle, there is a Green and a Red line and a Pink polygon. **

The Green and Red line, just represent the axes with which I draw the pink polygon. All of this should be 2D only and flat on the floor, I do not need any elevation.
The Green line is correct, and represent the axis X of a plan I am trying to draw.

The Red Line is wrong, I would like it to be rotated 90° counterclockwise based on the Green axe. It would represent the Y axes. The Red line should also be flat on the floor, right now it goes underground for some reason.
In the end, having my center point, and a point on the Green and Red line, I would be able to draw the Pink polygon. which is working if I had the correct coordinates.
But I struggle setting up the red line to be 90
°
**counterclockwise****based on the Green line and flat on the floor.****Can someone help me with the Cesium Maths ? **

You’re rotating the green vector to get the red vector in Cartesian3 space (which is ECEF) around the Y axis. This will not be aligned to the ground at most locations in the world which is why it comes out looking skewed compared to what you expect.

What you need to do instead is define an axis that is pointing up relative to the base of the green vector, and then rotate the vector around that. Getting the up axis at that location can be done by just normalizing the position vector for that point.

You can use some of CesiumJS’s built-in functions to help with some of this transformation. For example, once you define a rotation matrix you can apply it to a vector as shown in the code snippet in the documentation here:

https://cesium.com/docs/cesiumjs-ref-doc/Matrix3.html?classFilter=Matrix#.fromRotationX

You can also do what the 3D Models code example does to define a given point on the earth, and a heading/pitch/roll rotation relative to that:

https://sandcastle.cesium.com/index.html?src=3D%20Models.html

This produces a quaternion, which you can convert to a matrix to then to your vector:

https://cesium.com/docs/cesiumjs-ref-doc/Matrix3.html#.fromQuaternion

**Thank you, will look into it **

Hello again @Omar and sorry if I necropost this.

I was working on it, and ad some progress like the following Sandcastle

I used a different approach since The data I have is a bit different, but there is something I am missing.

var getEdges = function (area){
var origin = new Cesium.Cartesian2(area.ll.longitude, area.ll.latitude);
var xAxis = new Cesium.Cartesian2(area.dir.longitude - area.ll.longitude, area.dir.latitude - area.ll.latitude);
var yAxis = new Cesium.Cartesian2(
Math.cos(Math.PI /2) * xAxis.x - Math.sin(Math.PI /2) * xAxis.y,
Math.sin(Math.PI /2) * xAxis.x + Math.cos(Math.PI /2) * xAxis.y
);

    var originPoint = new Cesium.Cartesian3.fromDegrees(origin.x, origin.y, 0);
    var xVector = new Cesium.Cartesian3.fromDegrees(origin.x + xAxis.x, origin.y + xAxis.y, 0);
    var yVector = new Cesium.Cartesian3.fromDegrees(origin.x + yAxis.x, origin.y + yAxis.y, 0);

    var lrDir = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(xVector, originPoint, new Cesium.Cartesian3()), new Cesium.Cartesian3());
    var lrSum = Cesium.Cartesian3.multiplyByScalar(lrDir, area.lllr, new Cesium.Cartesian3());
    var lowerRight = Cesium.Cartesian3.add(originPoint, lrSum, new Cesium.Cartesian3());

    var ulDir = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(yVector, originPoint, new Cesium.Cartesian3()), new Cesium.Cartesian3());
    var ulSum = Cesium.Cartesian3.multiplyByScalar(ulDir, area.llul, new Cesium.Cartesian3());
    var upperLeft = Cesium.Cartesian3.add(originPoint, ulSum, new Cesium.Cartesian3());

    var upperRight = Cesium.Cartesian3.add(originPoint, lrSum, new Cesium.Cartesian3());
    Cesium.Cartesian3.add(upperRight, ulSum, upperRight);

    return [originPoint, lowerRight, upperRight, upperLeft];

};

``

In this function, if I take my Cartesian2 points, they are correct, they are correct (origin, xAxis and yAxis) are forming a 90degree angle

but when I switch to a Cartesian3, they are not doing 90degree, but slightly less>

Do you know where the problem might come from ?

BTW I tried to used Matrix and other, but I get really wierd result, so I just tried to do the same in a simpler way, It’s near working, but when converting to Cartesian3 it just breaks my 90* angle

https://gis.stackexchange.com/questions/346002/90-angle-between-coordinate-breaks-when-applied-to-world/346037#346037