About this demo...

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.