There are two classes for implementing rotation of a 3D WebGL scene
by mouse (or touchscreen): SimpleRotator, defined in
simple-rotator.js, and TrackballRotator, defined in
trackball-rotator.js. The main difference is that a TrackballRotator
allows completely free rotation, but with a SimpleRotator, the
projection of the y-axis on the screen always points upward.
The rotation in a SimpleRotator consists of a rotation about the
y-axis, followed by a rotation about the x-axis, and the
rotation about the x-axis is restricted to the range -85 to 85 degrees.
The demo lets the user compare the two kinds of rotators.
There are two canvases on which cubes are drawn using WebGL.
The user can rotate the cube in either canvas by dragging the mouse
on that canvas. The canvas on the left uses a SimpleRotator
while the one on the right uses a TrackballRotator.