Pixel coordinate to world coordinate (orthographic cam)

Questions
3

Hello, thanks for your answer, I found the solution :smile:

My calculation was not good at all.

Full explanation below

Important note, my 0,0 coordinate on three.js is always at the center of my screen in my case. Also, I use an orto camera, so I don’t need to mind z.

To translate the coordinates of a point from view A (where 0,0 is at the top left, so our screen) to view B (where 0,0 is at the center, the threejs view), we need to perform two transformations:

  1. Horizontal translation (x-axis)
  2. Vertical translation (y-axis)

Horizontal Translation (x-axis)

In view A, the origin (0,0) is at the top left. In view B, the origin (0,0) is at the center. To translate the x-coordinate of a point from view A to view B, we need to move the origin of view A to the center of view B.

  • If (Xa, Ya) are the coordinates of a point in view A, the new coordinate Xb in view B is obtained by subtracting half of the width (W/2) from Xa.

Formula: Xb = Xa - (W/2)

Vertical Translation (y-axis)

Similarly, for the y-coordinate, we also need to move the origin of view A to the center of view B. However, note that the y-coordinates increase downwards in view A, but in view B, they increase upwards from the center.

  • To translate the y-coordinate, we need to subtract Ya from half of the height (H/2).

Formula: Yb = (H/2) - Ya

And I use the coordinate like that without unproject or project.

const calcx = pixelX - (window.innerWidth / 2) ;
const calcy = (window.innerHeight / 2) - pixelY;
  
for (let i = 0; i < 50; i++) {
    const emojiMesh = new THREE.Mesh(emojiGeometry, emojiMaterial);
    emojiMesh.position.set(calcx, calcy, -1);
    .......
}
1 Like