This is a demonstration of how we make our 2D screen look like it contains 3D objects. It will handle the simplest aspects of this subject.
These aspects are:
1 How to define the wire frame points that make up the vertices of the 3D object. See simple functional definitions in drawAll.js.
2.How to rotate the wire frame points to a desired viewing angle. Standard 3D rotation matrix multMV(M,v).
3.How to construct polygon facets from the wire frame points.
Choose clockwise consecutive points including repeating the first point, draw lines between them and then fill the closed coutour.
4.How to hide the facets of an opaque solid that should not be visible to the viewer. See below.
Another important visual cue for 3D viewing is the variation in brightness across the object but that will not be addressed here.
First, the nominal coordinate system is chosen so that z points upward, y points to the right, and x points toward the viewer
which for us means that it points outward normal to the screen.
To demonstrate the results I have implemented a regular tetrahedron, a 6 sided parallepiped, a cylinder with variable numbers of sides,
and a sphere.
The most general way to describe the surface is to split the entire outer surface into triangles.
That process is called tesselation and is a convenient way to achieve accurate variation of brightness across the surface.
Interested viewers may hit the F12 key and examine the earcut.js source file which is not used here.
I have elected to use either triangles or quadrilaterals when convenient.
The tetrahedron has only 4 points and 4 sides. The one used here has a vertex on the z axis.
The parallepiped has 2 ends and 4 sides and its long axis is along the x axis.
The cylinder has 2 ends and a variable n sides and its long axis is along the x axis. With n=4 sides it becomes the sams as
the parallelepiped.
The sphere has 24 meridians (longitudes) and 18 lines of latitude and its polar axis is along the z axis.
All of these are animated to be rotated about the z axis.
Hiding facets that should not be seen:
Since the x axis is the one facing the viewer,the facets that have positive normal x component should be visible and ones
with a negative x component should not be visible. To get the facet normal, we need to have 3 clockwise consecutive points, (a,b,c), of the facet.
Then the normal is described as crossProduct((c-b),(b-a)) where c-b is the vector from b to c and b-a is the vector from a to b.