How to do a 3d rotation to a 2d point in JavaScript (Azure Face Rotation)

Viewed 128

I am using the Azure Face API to get the landmarks and rotation angle of a given face. The problem is that all of those points are 2d objects, and I need to rotate them in a 2d space using the yaw, roll and pitch angles of the face.

I have tried to rotate them in the roll angle using this function:

  const rotatePoint = (pivotPoint, point, angle) => {
    const { x: px, y: py } = pivotPoint;
    const { x, y } = point;

    var radians = (Math.PI / 180) * angle,
      cos = Math.cos(radians),
      sin = Math.sin(radians),
      nx = cos * (x - px) + sin * (y - py) + px,
      ny = cos * (y - py) - sin * (x - px) + py;

    return { x: nx, y: ny };
  };

Using the center of the FaceRectangle (here you can see it: https://docs.microsoft.com/es-es/azure/cognitive-services/face/images/face.detection.jpg) as pivot point. But I think that the pivot point will only work with a roll rotation. Just imagine a 3d object which is rotated in 3d dimensions. If you have the vertices of this object in a 2d plane, to fully remove the rotation you will need to rotate it in the 3 angles. Correct me if i'm wrong.

Is there any formula to rotate the 2d points in the 3 angles?

0 Answers
Related