Select Page

Three.js WebGL coursework

As part of the second year of my Course I have a unit called Foundations of Visual Computing. We have covered a lot of what's going on behind the scenes of graphics in computers both in 2D and 3D, the buffer, transformations and many more. As part of the course we had a coursework to fulfil a number of tasks to illustrate our understanding of the process.

These are screenshots are part of the report of the demo. A lot can be read about the background of the work and its implementation in the actual pdf!

Demo of the project implemented using Three.js.


  • WASD to pan camera
  • Z X to zoom in and out
  • E F V to change render modes for Edges, Faces and Vertices accordingly
  • P toggle button to make the cube rotate
  • L toggle button to make the inside mesh rotate
  • Arrow Keys to orbit the camera about the center of the scene. On each key press you add acceleration, and negate it by pressing opposing key. Holding down an arrow key is not recommended.
  • H toggles whether the cube should be rendered or not (to allow better view of the inside mesh)

This document includes the 10 requirements that needed to be completed for the coursework and explanations concerning my understanding of underlying maths, along with details of my implementations together with screenshots and design choices.