In this game, we will try to understand how the simplest 3D graphics work, using a cube as an example. Modeling these shapes can be divided into 3 parts:

Let's look at each of these parts.

Assume that the cube is positioned exactly at the point (0, 0, 0) and has an edge length of 2. Then each of its points can be described as follows: This gives us 8 vertices. The edges are the following segments:
(C1, C2)
(C2, C3)
(C3, C4)
(C4, C1)
(C5, C6)
(C6, C7)
(C7, C8)
(C8, C5)
(C1, C5)
(C2, C6)
(C3, C7)
(C4, C8)

If the cube edge has length $h$, then to calculate the coordinates of vertex $i$, each coordinate should be multiplied by $\frac{h}{2}$. For example, for vertex $1$ with coordinates $C_1(-1, -1, -1)$, the corresponding vertex of a cube with edge length $h$ will be $C_1(-\frac{h}{2},-\frac{h}{2},-\frac{h}{2})$.

First, let us consider cube rotation. A cube can rotate around each of its axes. Let us look at the case where the cube rotates around the $y$ axis. It looks like this: In this illustration, you can see that when rotating around the $y$ axis, the $y$ coordinate of each vertex does not change. So we can project the cube onto the $xz$ plane. Here, $\alpha$ is the angle of rotation relative to the vertex's initial position, and $\gamma$ is the initial angle of vertex $C$ relative to the $x$ axis. $C'(x',z')$ is the new position of the vertex after rotation. Let $O$ be the center of the square and also the origin. Then it is clear that $OC=OC'=r$. Hence:

Using trigonometric formulas, we can rewrite $x'$ and $z'$ a little:

Expanding the parentheses:

Knowing the formulas for the original coordinates, we substitute:

Then, by changing the angle $\alpha$, for example with mouse movement, we can calculate the coordinates of every point of the square using this formula.

In the same way, we can calculate rotation around the $x$ axis:

Here, $\alpha$ is already the angle of rotation around the $x$ axis.

Rotation around the $z$ axis can be calculated in exactly the same way, but since on the screen the mouse can only move in two directions, we will not need it. You can do this calculation as homework 😊.

Next, to implement translation, it is enough to simply add the shift along each axis to each coordinate obtained after rotation. We will not go into detail here.

To display a 3D cube on a 2D screen, we need to define 2 things: the position of the screen or projection plane in space, and the position of the camera, which is the point from which we look at the screen. Suppose we have a point $P(x_p,y_p,z_p)$ defined in space. We need to find the point $(x_s,y_s)$ defined in screen coordinates. Let us look at the image below:

Here, $S_2(x_s, 0)$ is the projection of point $P$ onto the screen's $x$ axis. Consider the 2 triangles $(CS_1S_2)$ and $(CP_1P_2)$; they are similar. From triangle similarity:

$P_1(0,0,z_p)$ is the projection of $P$ onto the $z$ axis, and $(x_p,0,0)$ is the projection of $P$ onto the $x$ axis. Point $C$ (the camera) has coordinates $(0, 0, z_c)$. Therefore, $(CP_1)=z_p-z_c$. The focal length of the camera is $(CS_1)=f$. So the ratio above can be written as:

Hence:

Similarly, we obtain:

The values of $z_c$ (the camera position) and $f$ (the camera focal length) are chosen manually.

Now you know how to move and rotate a cube in space, how to project it, and how to render it. The next step is implementation. Take this challenge on yourself 💪. Good luck!