# Perspective projection with 90 degrees between X-Y axis?

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?

-
I'm fairly certain the image you have posted is a pure 2D perspective, with sprites that make it look as if you have an isometric view. Games like Diablo did something similar, it's generally referred to as 2.5D or isometric. The perspective for the camera is no different than a 2D game, the sprites give the illusion of depth through their look and layering. – Nic Foster Feb 9 '12 at 5:16

## 1 Answer

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.

-