P2 Project Prototype

Satisfies milestone 2 requirements:

1. One canvas. Your application should use at least one canvas HTML element to render the 3D world
2. Two 3D geometric shapes. Define a model of at least 2 3D geometric shapes that can then be converted into vertices of two 3D geometries such as cubes, pyramids, cones, cylinders, spheres, etc. Render these geometric shapes on a canvas
3. One perspective projection. Implement perspective projection by calculating the various transformation matrices. You can implement the matrix multiplication either in the shader or in JavaScript
4. One camera. Implement at least one camera from where the 3D world can be viewed
5. One lighting source. Implement one of the lighting strategies listed below and how they affect 3D objects and meshes around them
   a. Directional lightning
   b. Point lightning
   c. Spot lightning
6. User interactions. Implement at least one user interactions with the 3D world. These can be mouse, trackball, keyboard, and/or any of several UI elements such as buttons, input fields, drop downs, sliders, etc. Choose an interaction from any of the following three options.
   a. Mouse or trackball
   b. Keyboard
   c. UI elements such as buttons, input fields, drop downs, sliders, etc