Vector4

We transform a vector by dotting it with the rows of a matrix. Since each row has four elements, so must the vector. Our Vector3 class only has three. There are several ways we could address this incompatibility. One reasonable fix is to define a Vector4 class and switch to it when performing transformations in TypeScript. Define Vector4 by copying your Vector3 class, renaming it Vector4, and applying the following changes.

Add a getter and setter for w just like your getters and setters for the other components. Update the other methods to include the new w component. Also, delete the cross method. The cross product is meaningful in three dimensions, but not in four.

Often we will have a Vector3 in hand and find that we want to transform it. Instead of changing the original type in the data source, let's make bridge methods that convert between the two types on the fly. First we add a method Vector3 to append a homogeneous coordinate.

If you have a position to transform, convert it with a call to toVector4(1). If a vector, with toVector4(0). To convert back to a Vector3, we add a method to Vector4.

Finally, we need a method in Matrix4 to transform a Vector4.