I'm trying to create a web application, to display 3D objects on canvas. To represent the 3D object I'm using an array of Points (from application's point of view, a Point - is just an object containing x, y and z coordinate values). Then I'm connecting the points with lines.

So. My task is to represent 3D points on 2D coordinate system. As I understand, what I need is to implement the projection of these points (to transform point from 3D representation into 2D). I spent few hours reading about projection types and I can't really understand which type is actually suits my needs.

I created an array of points to represent a cube. Then I implemented a central projection to display my cube on cavnas. As a result, it lost it's proportions (what I got is a paralelipiped).

I would like that my cube would look like a cube after projection. I guess, that I have to use a parallel projection, but there are a lot of subtypes of it.

So the question. Which projection I need to choose and maybe you can give me a peace of advice of what should I read to get a base mathematical background about this topic?

  • \$\begingroup\$ Are you trying to find the term "perspective projection"? Or are you looking for how to accomplish it? \$\endgroup\$ Dec 29, 2015 at 20:27
  • \$\begingroup\$ I would like to get a tip what kind of projection from variety of them suits my task the most and also, I'm looking for the literature which would help me to understand the implementation of projections from mathematical point of view. \$\endgroup\$ Dec 29, 2015 at 20:43
  • \$\begingroup\$ Your options are pretty much "parallel" and "perspective." You're either accounting for distance in which things get smaller the farther away they are, or you're not. There are several kinds of parallel projection (orthographic, isometric) but only one kind of perspective projection. Once you're in a perspective projection the question is "what's the field of view?" which is measured in degrees. Video games typically have a FOV between 85 and 120 degrees with most people finding it comfortable at 90-95 (very hardcore gamers will scoff at anything below 110, but that's their preference). \$\endgroup\$ Dec 29, 2015 at 20:54

1 Answer 1


You can project points to XY, YZ and XZ planes so simply by just changing the other value of Vector3 to "zero".

For example, assume you have 3 Vector3's as (1,2,3) (3,3,5) (9,8,7), and you want to project them to XY plane. Then you can simply make all Z values "0" and remaining vectors are your projected vectors.

An overview example of what i mean:

Original point vectors: (1,2,3), (3,3,5), (9,8,7)
Projected to XY plane: (1,2,0), (3,3,0), (9,8,0)
Projected to YZ plane: (0,2,3), (0,3,5), (0,8,7)
Projected to XZ plane: (1,0,3), (3,0,5), (9,0,7)

  • \$\begingroup\$ Thank you for your answer. In my case (I want to project the cube), If I will use your approach and will try to project the figure, for example, on XY plane by setting Z coordinate to 0, the result will be the square, right? It's not really what I want. I would like to get a figure which looks like a cube as a result. So it's like.. My "projection plane" is not perpendicular to any axis. It's custom. \$\endgroup\$ Dec 29, 2015 at 20:52
  • \$\begingroup\$ @DmitryPapka If your cube is not rotated, the result will be a square with 2 points overlapping each corner. But if your cube is rotated somehow, you will get 2 different squares connected from corresponding corners. (Edit: Take a look at this: nptel.ac.in/courses/112103019/module4/lec38/images/3.png) \$\endgroup\$ Dec 29, 2015 at 21:00
  • 1
    \$\begingroup\$ To clarify, Samed's approach is called an orthographic projection, and is commonly used for many applications in 3D rendering. What an orthographic projection lacks is an indication of depth. To achieve depth, you must use a perspective projection, which are covered in pretty much any bog-standard 3D rendering textbook, or Wikipedia. \$\endgroup\$ Jan 28, 2016 at 21:28

You must log in to answer this question.

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