Been having a difficult time transforming 2D screen coordinates to 3D isometric space. This is the situation where I am working in 3D but I have an orthographic camera. Then my camera is positioned at (100, 200, 100), Where the xz plane is flat and y is up and down.

I've been able to get a sort of working solution, but I feel like there must be a better way.

Here's what I'm doing:

With my camera at (0, 1, 0) I can translate my screen coordinates directly to 3D coordinates by doing:

mouse2D.z = (( event.clientX / window.innerWidth ) * 2 - 1) * -(window.innerWidth /2);
mouse2D.x = (( event.clientY / window.innerHeight) * 2 + 1) * -(window.innerHeight);
mouse2D.y = 0;

Everything okay so far. Now when I change my camera back to (100, 200, 100) my 3D space has been rotated 45 degrees around the y axis and then rotated about 54 degrees around a vector Q that runs along the xz plane at a 45 degree angle between the positive z axis and the negative x axis.

So what I do to find the point is first rotate my point by 45 degrees using a matrix around the y axis. Now I'm close.

So then I rotate my point around the vector Q. But my point is closer to the origin than it should be, since the Y value is not 0 anymore. What I want is that after the rotation my Y value is 0. So now I exchange my X and Z coordinates of my rotated vector with the X and Z coordinates of my non-rotated vector. So basically I have my old vector but it's y value is at an appropriate rotated amount.

Now I use another matrix to rotate my point around the vector Q in the opposite direction, and I end up with the point where I clicked.

Is there a better way?

I feel like I must be missing something. Also my method isn't completely accurate. I feel like it's within 5-10 coordinates of where I click, maybe because of rounding from many calculations. Sorry for such a long question.

  • \$\begingroup\$ I'm not sure about the title but if you are usin gXNA there was a question in the 2 past weeks that was asking hte same thing. \$\endgroup\$
    – Ali1S232
    May 27, 2011 at 7:28
  • \$\begingroup\$ This question might help you, though the coordinate system was based on 2d screen to isometric: gamedev.stackexchange.com/questions/12362/… \$\endgroup\$
    – thedaian
    May 27, 2011 at 13:29
  • \$\begingroup\$ Hi, I don't think the 2d answer will help. I'm trying to convert a coordinate like (400, 0) from the screen to something like (280, 0, 280) that lives in 3D space. I saw the XNA question, gamedev.stackexchange.com/questions/7060/… but as far as I could tell it never got answered. I have my screen coordinates in a (-1.0, 1.0) range. Like described in that question, unproject doesn't work for me with orthographic perspective. I'm using Three.js btw. WebGL. \$\endgroup\$
    – Justin
    May 28, 2011 at 9:58
  • \$\begingroup\$ -1 anything wrong with using your debugger? also a google research would give you a proper code example in seconds \$\endgroup\$ Jun 27, 2011 at 21:54

1 Answer 1


I finally found the answer.


  • 2
    \$\begingroup\$ -1 do your research first! \$\endgroup\$ Jun 27, 2011 at 21:55
  • 3
    \$\begingroup\$ You can still do your research first and end up with nothing, no reason to shame him for finally finding his answer. \$\endgroup\$ Nov 18, 2015 at 3:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .