Exercise	Solution
Part 1 Simple orbiting Pick one of your previous solutions where you draw in 3D. Use the mouse events from the WebGL Programming Guide (“Rotate and Object with the Mouse”) to set mouse events that modify your view matrix when a mouse button is down.	Please use a browser supporting HTML5
Part 2 Quaternion rotation Switch to using quaternions for the orbit rotation instead of Euler angle. In this way, you can avoid the gimbal lock. Get x- and y-coordinates for your mouse position that are in [−1,1]. Project these coordinates to a spherical surface of radius 2. Normalize the resulting vector and build a quaternion that rotates from the previous to the current of these vectors to find the rotation corresponding to the mouse movement. To solve this part, you need a quaternion math library. This is available in quaternion.js, which has been uploaded to File Sharing in the “code and data” folder.	Please use a browser supporting HTML5
Part 3 + 4 Dolly and panning + spinning Set up interaction modes (using either webpage buttons or mouse buttons) for orbiting, dolly, and panning. Store distance to the eye point from the look-at point and the xy-displacement of the look-at point together with the quaternions used for orbiting. In dolly mode, the difference in the y- coordinate of the mouse position is used to update the distance to the eye from the look-at point. In panning mode, the differences in x- and y- coordinates of the mouse position are used for displacement of both look-at and eye points along the world space basis vectors of the image plane. To do spinning, continue to update the quaternion rotation of the view using another quaternion representing the last incremental rotation recorded in the onmousemove function. Stop the spinning by resetting the incremental rotation to an identity quaternion when the mouse is released at the same position as the one last recorded in the onmousemove function.	Please use a browser supporting HTML5