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 '11 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 '11 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 '11 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\$ – Maik Semder Jun 27 '11 at 21:54

I finally found the answer.


| improve this answer | |
  • 2
    \$\begingroup\$ -1 do your research first! \$\endgroup\$ – Maik Semder Jun 27 '11 at 21:55
  • 2
    \$\begingroup\$ You can still do your research first and end up with nothing, no reason to shame him for finally finding his answer. \$\endgroup\$ – NiCk Newman Nov 18 '15 at 3:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.