1. Mouse Input

2. For Further Reading Learning WebGL, Lesson 11:

3. Rotating Cube by Mouse Input

4. Summary Adding handlers for mouse events.
Note that the mouse click may start on canvas but finish outside of canvas.
canvas.onmousedown = handleMouseDown;
document.onmouseup = handleMouseUp;
document.onmousemove = handleMouseMove;

5. Rotating Cube (JavaScript code)
// handlers for mouse input (borrowed from "Learning WebGL" lesson 11) var mouseDown = false; var lastMouseX = null; var lastMouseY = null; var moonRotationMatrix = mat4(); function handleMouseDown(event) { mouseDown = true; lastMouseX = event.clientX; lastMouseY = event.clientY; } function handleMouseUp(event) { mouseDown = false;

6. function handleMouseMove(event) { if (
function handleMouseMove(event) { if (!mouseDown) { return; } var newX = event.clientX; var newY = event.clientY; var deltaX = newX - lastMouseX; var newRotationMatrix = rotate( deltaX/10, 0, 1, 0 ); var deltaY = newY - lastMouseY; newRotationMatrix = mult( rotate( deltaY/10, 1, 0, 0 ), newRotationMatrix); moonRotationMatrix = mult(newRotationMatrix, moonRotationMatrix); lastMouseX = newX lastMouseY = newY;

7. window. onload = function init() { var canvas = document
window.onload = function init() { var canvas = document.getElementById( "gl-canvas" ); ... //event listeners for buttons document.getElementById( "xButton" ).onclick = rotateX; document.getElementById( "yButton" ).onclick = rotateY; document.getElementById( "zButton" ).onclick = rotateZ; // event handlers for mouse input canvas.onmousedown = handleMouseDown; document.onmouseup = handleMouseUp; document.onmousemove = handleMouseMove; render(); };

8. Notice! The rotation is defined in object space.
It works well only if the viewing direction is along the Z axis.
Change the eye position in lookAt() and see what happens!

9. Lab Time! Change the eye position and see what happens.
Use the mouse input to rotate the light position instead of the object.
Hints:
Apply the mouse-controlled rotation to the light position, either at the JavaScript or at the GLSL shader.
If you choose the former, then you need a matrix-vector multiplication in JS.
If you choose the latter, then an additional mat4 is needed.