Finding a texture pixel (X,Y) on a Sphere

Question

I'm using three.js combined with face recognition, I want to rotate a sphere that displays my input video according to the detected eye location, the face recognition gives me a X,Y on the texture mapped to the sphere, what is the right way to find the matching angles on the sphere?

I've tried the next code that I've found -

function convert2d3d(r1, r2, x, y) {
 // r1 - texture size ?
 // r2 - sphere size
 // x,y - position I want to reach on the sphere

 let z = -1 + 2 * x / r1;
 let phi = 2 * Math.PI * y / r1;
 let theta = Math.asin(z);
   return {
    x: r2 * Math.cos(theta) * Math.cos(phi),
    y: r2 * Math.cos(theta) * Math.sin(phi),
    z: r2 * z,
   }
}

But I think I'm not getting the result I need

Answer 1

For the rotation:

It looks like this will be the combination of two rotations. Assuming Z is the up direction then the first rotation is in the XY plane and the second rotation is in the ZY plane.

To get the angle of the first rotation you can do something along the lines of:

vec4 eye_vec = normalize( sphere_center - eye_position);
vec4 camera_vec = normalize( sphere_ceneter - camera_position );
float cosAngle = dot( camera_vec, eye_vec );
float rads_xy = acos( cosAngle );
mat4 xy_rotation_matrix = MakeRotationXYplane( rads_xy);

The second rotation:

vec4 forward_vec = normalize( camera_forward );
cosAngle = dot( forward_vec, eye_vec );
float rads_zy = acos( cosAngle );
mat4 zy_rotation_matrix = MakeRotationZYplane( rads_zy );

and finally:

mat4 combined_rotations = xy_rotation_matrix * zy_rotation_matrix;

Rotation order could be an issue here, but so long as sphere is at the origin then it should be okay.

To test this part of the code I recommend picking a known eye location on the sphere. Even mark it to help visualize the rotations. I didn't include code for the actual construction of the rotation matrices but that is easy to find.