02560 Web Graphics and Scientific Visualization

Week 2

To illustrate transformations, animation, and use of the camera, this lecture provides an example of a quaternion-based virtual trackball.

The webpage is developed in the following steps:

1. Drawing a cube in perspective (with the cube faces coloured by their normal directions).


2. Rotate the cube using standard rotation matrices modified by mouse input.


3. Replace rotation matrices by quaternions.


4. Enable camera initialization, spinning, panning, and dolly.

Press F12 in your browser to view the source behind each step. The final result with a more complete text follows below.

Trackball Example

Mouse control: orbit - left button, dolly - middle button, pan - right button.