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

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.

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.

``````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`).

4 Likes

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

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

4 Likes

Awesome explanation, thank you very much!