📗 let renderer = new THREE.WebGLRender({canvas : canvas}) creates the 3D "context" for the Canvas canvas: Doc.
📗 let scene = new THREE.Scene(); creates the root of the tree: a container for objects: Doc.
📗 let geometry = new THREE.BoxGeometry(1, 1, 1); produces a collection of triangles that form a cube or box. Every geometry is made up of triangles: Doc
📗 let material = new THREE.MeshStandardMaterial({ color: "green" }); creates the material (what the object is made out of). Materials include surface properties and how it interacts with light: Doc.
📗 let mesh = new THREE.Mesh(geometry, materials); creates a THREE graphics object: Doc.
➩ Note: unfortunate naming, in computer graphics, a "Mesh" usually means a collection of triangles (which is "Geometry" in THREE.js).
📗 scene.add(mesh) addes the mesh into the scene.
📗 let camera = new THREE.PerspectiveCamera(); creates a camera that projects the scene onto the screen. Camera is a viewing transformation from the scene coordinates to the screen coordinates: Doc.
📗 renderer.render(scene, camera); draws everything (takes a picture of the scene using the camera). Animation loop can be used if the scene or the camera is updated every frame.
📗 Orthographic camera uses orthographic projection: Wikipedia.
📗 Orthographic camera in THREE is OrthographicCamera(left, right, top, bottom, near, far) specifies the box it sees. The objects inside the box (called camera frustum) are visible to the camera: Doc.
📗 Perspective camera uses perspective projection: Wikipedia.
📗 Perspective camera in THREE is PerspectiveCamera(fov, aspect, near, far) specifies the (vertical) field of view in degrees, the aspect ratio (should match the canvas), and the distance of the near and far planes (the volumn between the two planes is the camera frustum): Doc.
Math Notes:
The camera transformation (in homogeneous coordinates) is linear with the transformation matrix, \(\begin{bmatrix} d & 0 & 0 & 0 \\ 0 & d & 0 & 0 \\ 0 & 0 & 0 & 1 \\ 0 & 0 & 1 & 0 \end{bmatrix}\), when when applied (multiplied) by a point in 3D in homogeneous coordinates \(\begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix}\), the resulting point in 2D is given by \(\begin{bmatrix} d \dfrac{x}{z} \\ d \dfrac{y}{z} \end{bmatrix}\).