How to converting world coordinates to 2D mouse coordinates in ThreeJS

Questions
1

i know how to converting 2D mouse coordinates to world coordinates,but whether the world coordinates convert into a 2D mouse coordinates if i know the world position ,uv,and the normal of the face.

1 Like
2

Maybe this helps? https://manu.ninja/webgl-three-js-annotations/ If this link dies, it’s about using vector.project(camera); to convert a 3D world position to screen coordinates.

3 
vector.project( camera );

This only converts a vector to normalized device space. You still have to map the vector to 2D screen space. Something like:

vector.x = ( vector.x + 1) * width / 2;
vector.y = - ( vector.y - 1) * height / 2;
vector.z = 0;

width and height represent the dimensions of the canvas (renderer.domElement).

6 Likes
4

@Mugen87 thanks very much for this. Why do you add 1 to the x coordinate and subtract one from the y coordinate?

5

After the call of Vecto3.project(), the components of vector are in the range of [ - 1, + 1 ] (assuming the vector originally was inside the view frustum). The mentioned calculation will then convert this range to [ 0, 1 ] and then multiply the values with the respective dimensions (width or height). The y-coordinate is handled in a special way because in screen space the origin of the coordinate system is top left (and not bottom left).

5 Likes
6

Awesome explanation, thank you very much!