Isometric screen to 3D world coordinates efficiently
- by Justin
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.
