webGL+JS鼠標事件

1.在onload（）函數中

        //按下鬆開按鈕
        //document
        canvas.onmousedown = handleMouseDown;
        canvas.onmouseup  = handleMouseUp;
        canvas.onmousemove  = handleMouseMove;
        canvas.onmouseout = handleMouseOut;

2.down up out

var mouseDown = false;
    var lastMouseX = null;
    var lastMouseY = null;
    var boxRotationMatrix = mat4.create();
    mat4.identity(boxRotationMatrix);
    function handleMouseDown(event) {
        mouseDown = true;
        lastMouseX = event.clientX;
        lastMouseY = event.clientY;
    }
    function handleMouseUp() {
        mouseDown = false;
    }
    function handleMouseOut() {
        mouseDown = false;
    }

3.move

function handleMouseMove(event) {
        if(!mouseDown){
            return;
        }
        var newX = event.clientX;
        var newY = event.clientY;
        var deltaX = newX - lastMouseX;
        var newRotationMatrix = mat4.create();
        mat4.identity(newRotationMatrix);
        mat4.rotate(newRotationMatrix, degToRad(deltaX / 10), [0, 1, 0]);

        var deltaY = newY - lastMouseY;
        mat4.rotate(newRotationMatrix, degToRad(deltaY / 10), [1, 0, 0]);

        mat4.multiply(newRotationMatrix, boxRotationMatrix, boxRotationMatrix);

        lastMouseX = newX;
        lastMouseY = newY;

    }

4.drawscene中寫入

 mat4.multiply(mvMatrix,boxRotationMatrix);