Coordinate conversion from scene units to pixels

[Atai_Askarov]

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!

[Atai_Askarov]

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

[manthrax]

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

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