Perspective projection with 90 degrees between X-Y axis?

Question

I'm trying to create a game that mimics Tibia's projection style: ,

As you can see, a 3d point is mapped to 2d like this:

So I've downloaded Three.JS and a lib to create a Orthographic Camera. But I'm getting this:

Where, as you can see, the projection is like this:

Which is not what I want. What can I do to get the desired projection?

NOTE: I noticed the Orthographic Camera object is just a regular camera with camera.projectionMatrix changed, so I guess I could create my own kind of camera object, probably finding out the right projectionMatrix, but how?

Answer 1

What you'll need to do is create a sheared projection matrix that leaves the X and Y axes alone but bends the Z axis up and to the left. The matrix to do the shearing would generally look like this:

1 0 A 0
0 1 B 0
0 0 1 0
0 0 0 1

Or possibly the transpose of that, depending on whether your math library is using a column vector convention (as above) or a row vector convention. You'll probably need to multiply the above matrix with a regular 2D top-down projection matrix (which order they go in will also depend on the vector convention). Here, A and B are numbers that control how far the Z axis gets sheared along the X and Y axes respectively. I'd suggest trying values between -1 and +1 for these and tweaking to get the look you want.