# Coordinate conversion from scene units to pixels

**URL:** <https://discourse.threejs.org/t/coordinate-conversion-from-scene-units-to-pixels/86525>\
**Category:** Questions\
**Created:** [August 25, 2025, 4:25pm UTC](https://discourse.threejs.org/t/coordinate-conversion-from-scene-units-to-pixels/86525 "2025-08-25T16:25:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Atai\_Askarov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atai_askarov/32/56525_2.png) [@Atai\_Askarov](https://discourse.threejs.org/u/Atai_Askarov)\
**Post date:** [August 25, 2025, 4:25pm UTC](https://discourse.threejs.org/t/coordinate-conversion-from-scene-units-to-pixels/86525/1 "2025-08-25T16:25:31Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/c/7c6c9a2ca6ee7b2a85a49c2b507aada6023d090a.jpeg)  
Hi!  
I’m trying to dynamically display text on these paper grids. I pass the grid dimensions and their initial x and y values to my displaying function. The issue Is that I don’t know how to convert the values inherent to the scene to that of the viewport. I tried a conversion suggested by ChatGpt where essentially the vector with scene coordinates gets projected onto the camera and the result gets applied as follows:

const screenX = (vector.x + 1) / 2 \* window.innerWidth;

const screenY = (-vector.y + 1) / 2 \* window.innerHeight;

That’s why the bneofdk is randomly positioned here.

Can anyone please suggest a reliable way where I could for sure translate the scene coordinates to pixels?  
Thank you!

---

<div class="post-metadata">

**Author:** ![Atai\_Askarov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atai_askarov/32/56525_2.png) [@Atai\_Askarov](https://discourse.threejs.org/u/Atai_Askarov)\
**Post date:** [August 25, 2025, 4:26pm UTC](https://discourse.threejs.org/t/coordinate-conversion-from-scene-units-to-pixels/86525/2 "2025-08-25T16:26:39Z")

</div>

Also, don’t mind the text in white. The plan is to display that on the grids. It’s not super relevant to the issue at hand

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [August 25, 2025, 4:48pm UTC](https://discourse.threejs.org/t/coordinate-conversion-from-scene-units-to-pixels/86525/3 "2025-08-25T16:48:36Z")

</div>

You’ll need to use vector.project(camera) on the point to take into account the camera viewpoint.

> [@How to converting world coordinates to 2D mouse coordinates in ThreeJS](https://discourse.threejs.org/t/how-to-converting-world-coordinates-to-2d-mouse-coordinates-in-threejs/2251/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).