Since coordinates in OpenGL are in arbitrary units, how do we define what units we want to use in our code?

You don't have to tell Threejs or WebGL or any other software. Just use them.

Make sure that if you are working with others (e.g. pair programming) have all agreed. We don't need any Mars Climate Orbiter catastrophes.

In the readings it says that we can also define vectors with three numbers as the difference between two points (P-Q):

P = (1, 5, 3)
Q = (4, 2, 8)
v = P-Q = (-3, 3, -5)

However, if:

P = (2, 6, 4)
Q= (5, 3, 9)

then v will still have the same value, but the points P an Q exist in a different place on the x-y-z plane, so the vector should technically exist in a different place.

How does it choose which value of P and Q to take? "

What a fantastic question! Very thoughtful.

The answer is that vectors don't have a location. "North" means north, whereever you are.

Mathematically, a vector like (1,0,0) always means "increase X" and can be applied to whatever vertex you want, maybe all of them.

Just trying to develop my intuition, when we move the barn, are we're essentially recomputing the vertices/math, and redrawing (rendering) the figure? So it gives an illusion of movement, but the intuition behind it, is that we're redrawing like animations.

Yes. Very soon (two weeks), we are going to learn about the instance transform, which will make the computations a bit more modular and efficient, but your intuition is good.

Can you explain more about combining a geometry object and a material to create a mesh?

Sure. Imagine a wooden cube and a wooden ball and a steel cube and a steel ball.

Clearly, we can create two pairs that have a lot in common:

Their shape (geometry): the vertices and triangular faces that make up the shape, and
Their material: the way the surfaces interact with light and appear to the viewer

Computer Graphics has modularized things that way. To actually draw something, we need to know both its geometry and its material. The combination is called a mesh and our scene graph comprises a bunch of meshes.

It would be nice if we could go over how the animation frame works. Also rendering in general and time.

Let's put that off for a bit, if you would. But I'll give a preview:

When the browser is idle, and there is an animation frame function defined, it will call that function.
That function (typically) draws the entire scene.
Optionally, it might adjust some parameters (e.g. the location and orientation of something) before drawing the scene.
Once the drawing is done, the browser is idle and calls the function again.

The result is an endless series of frames, creating an animation.

Let's look at the code here: creating a scene