<p>For the rotation:</p>
<p>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.</p>
<p>To get the angle of the first rotation you can do something along the lines of:</p>
<pre><code>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);
</code></pre>
<p>The second rotation:</p>
<pre><code>vec4 forward_vec = normalize( camera_forward );
cosAngle = dot( forward_vec, eye_vec );
float rads_zy = acos( cosAngle );
mat4 zy_rotation_matrix = MakeRotationZYplane( rads_zy );
</code></pre>
<p>and finally:</p>
<pre><code>mat4 combined_rotations = xy_rotation_matrix * zy_rotation_matrix;
</code></pre>
<p>Rotation order could be an issue here, but so long as sphere is at the origin then it should be okay.</p>
<p>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.</p>

CC BY-SA 4.0
2021-11-13T15:09:47.520Z
2021-11-13T15:09:47.520Z
pmw1234
<p>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?</p>
<p>I've tried the next code that I've found -</p>
<pre><code>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,
   }
}
</code></pre>
<p><a href="https://i.sstatic.net/KZr7m.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KZr7m.jpg" alt="I’m attempting to find detected eye position on sphere and then rotate the sphere according to angle found" /></a></p>
<p>But I think I'm not getting the result I need</p>

<geometry><projections><uv-mapping><three.js>
Finding a texture pixel (X,Y) on a Sphere
nirhere
# Finding a texture pixel (X,Y) on a Sphere

(Asked by: username_0 on 2021-11-12)

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](https://i.sstatic.net/KZr7m.jpg)](https://i.sstatic.net/KZr7m.jpg)

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

**Tags:** geometry, projections, uv-mapping, three.js


---

## 1 answers

### Answer by username_1 on 2021-11-13. Score: 0 | Accepted answer

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.


---

