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

**URL:** <https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251>\
**Category:** Questions\
**Tags:** screen-space\
**Created:** [March 28, 2018, 9:48am UTC](https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251 "2018-03-28T09:48:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![trymoremore](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trymoremore/32/1855_2.png) [@trymoremore](https://discourse.threejs.org/u/trymoremore)\
**Post date:** [March 28, 2018, 9:48am UTC](https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251/1 "2018-03-28T09:48:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Cambesa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cambesa/32/1413_2.png) [@Cambesa](https://discourse.threejs.org/u/Cambesa)\
**Post date:** [March 28, 2018, 10:51am UTC](https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251/2 "2018-03-28T10:51:49Z")

</div>

Maybe this helps? [https://manu.ninja/webgl-three-js-annotations/](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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 28, 2018, 11:44am UTC](https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251/3 "2018-03-28T11:44:27Z")

</div>

```auto
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:

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

---

<div class="post-metadata">

**Author:** ![duhaime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/duhaime/32/715_2.png) [@duhaime](https://discourse.threejs.org/u/duhaime)\
**Post date:** [September 3, 2018, 12:59am UTC](https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251/4 "2018-09-03T00:59:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 3, 2018, 8:10am UTC](https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251/5 "2018-09-03T08:10:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![duhaime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/duhaime/32/715_2.png) [@duhaime](https://discourse.threejs.org/u/duhaime)\
**Post date:** [September 3, 2018, 11:40am UTC](https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251/6 "2018-09-03T11:40:14Z")

</div>

Awesome explanation, thank you very much!