get area edges with a point, a vector and 2 distance

Question

I am doing an app where I have to draw a zone where I an object can flight.

I need to draw that zone using Cesium (a JS library for world-class 3D globes) under the shape of a polygon, so only extremity points.

At the moment, my flight area are all Squares, and they are defined as follow

LL => LowerLeft Coordinate (POINT in lat/long) Dir => Direction from LowerLeft (Vector director) LLLR => Distance to LowerRight (Distance in meter) LLUL => Distance to UpperLeft (Distance in meter)

So I have to draw a polygon that rotate based on the the dir like this

I tried various implementations, but I keep failing and not drawing the correct values. What I am doing is

 LowerLeft = {LL.x, LL.y, LL.z}
 LowerRight = {LL.x + LLLR , LL.y, LL.z}
 ProjectedLowerRight = Project LowerRight onto Dir
 UpperLeft = {LL.x, LL.y + LLUL, LL.z}
 ProjectedUpperLeft = Project UpperLeft onto Dir rotated of 90°
 UpperRight = {LL.x + LLLR , LL.y + LLUL, LL.z}
 ProjectedUpperRight = Project UpperRight onto Dir rotated of 45°

then use those 4 coord

{
lowerLeft 
ProjectedLowerRight
ProjectedUpperLeft  
ProjectedUpperRight 
} 

But I think my logic is wrong. What is the correct way to rotate an area, or to draw the area correctly ?

Answer 1

With the clarification, what you need to use is easy. If the length of Dir is the distance from LL to LR, (that is, $(\text{Dir.x})^2 + (\text{Dir.y})^2 + (\text{Dir.z})^2 = (\text{LLLR})^2$) you need to define just two new points:

NewLR = LL + Dir
NewUR = UL + Dir

That is,

NewLR = (LL.x + Dir.x, LL.y + Dir.y, LL.z + Dir.z)
NewUR = (UL.x + Dir.x, UL.y + Dir.y, UL.z + Dir.z)

And your 4 corners are:

LL, UL, NewLR, NewUR