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,

I’m attempting to find detected eye position on sphere and then rotate the sphere according to angle found

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


1 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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.