WebGL creates a rotating cube controlled by mouse events

Through mouse events, to control the rotation of the cube. The rotation of the cube is controlled by mouse click events, and the movement direction of the cube is controlled by keyboard keycode values. So in the demo of drawing cubes. Just add the following code.

1, the conventional way to achieve rotation

• ininitMethod to control the cube to move left, right, down, and up.

let rotate = false;
let xaxis = 0, yaxis = 0;
function init() {...document.addEventListener('keydown'.(event) = > {
        const keyCode = event.keyCode;
        switch (keyCode) {
            case 38:
                // Rotate up
                xaxis = 1;
                yaxis=0;
                break;
            case 40:
                // Rotate down
                xaxis = -1;
                yaxis=0;
                break;
            case 37:
                // Want to rotate left
                yaxis = -1;
                xaxis = 0;
                break;
            case 39:
                // Want to rotate right
                yaxis = 1;
                xaxis = 0;
                break; }})document.addEventListener('click'.() = >{
        rotate=!rotate;
        render(gl,program);
    })
}
Copy the code

• inrenderFunction to add animation

function render(gl, program, count = 36) {
    tranlate(gl, program);
    // Set the clear color to black.
    gl.clearColor(0.0.0.1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_SHORT, 0);
    if(! rotate)return;
    requestAnimationFrame(() = >{ render(gl, program, count); })}Copy the code

• Modify the rotation Angle in the rotation function

let angley = 30.0, anglex = 30;;
function tranlate(gl, program, unit = 1) {
    const radx = anglex * Math.PI / 180;
    const cosx = Math.cos(radx);
    const sinx = Math.sin(radx);
    const mx = gl.getUniformLocation(program, 'mx');
    const mxArr = new Float32Array([
        1.0.0.0.0, cosx, -sinx, 0.0, sinx, cosx, 0.0.0.0.1
    ])
    gl.uniformMatrix4fv(mx, false, mxArr);

    const rady = angley * Math.PI / 180;
    const cosy = Math.cos(rady);
    const siny = Math.sin(rady);
    const my = gl.getUniformLocation(program, 'my');
    const myArr = new Float32Array([
        cosy, 0, -siny, 0.0.1.0.0, siny, 0, cosy, 0.0.0.0.1
    ])
    gl.uniformMatrix4fv(my, false, myArr);
    angley += yaxis;
    anglex += xaxis;
}
Copy the code

2. Rotate the cube through the matrix

So here we need to create a matrix, and there are two ways to create a matrix, orthogonal projection and transmission projection. This is a orthographic projection. This is a little different from the code in the normal methods, namely vertex shaders,init and Translate. A matrix dependent library of matrix is used in the matrix operations below. The library is linked to

• Code in the vertex shader. Here we pass the multiplied matrix directly to the vertex shader.

<script id="vertexShader" type="x-shader/x-vertex">
    // Float is set to medium precision
    precision mediump float;
    attribute vec3 apos;
    attribute vec4 acolor;
    varying vec4 vcolor;
    //uniform mat4 mx;
    //uniform mat4 my;
    uniform mat4 proj;
    void main() {
        // Multiply two rotation matrices, vertex homogeneous coordinates
        //gl_Position = mx*my*vec4(apos, 1);
        gl_Position = proj*vec4(apos, 1);
        vcolor=acolor;
    }
</script>
Copy the code

• initDifferences in functions

let isrotate = false;
let xaxis = 0, yaxis = 0;
let projectionMatrix;
function init() {...// create the orthogonal projection matrix
    const aspect = canvas.width / canvas.height;
    projectionMatrix = matrix.ortho(-aspect * 1, aspect * 1, -1.1.200, -200); . }Copy the code

• rotateFunction, through matrix operations to achieve the rotation of the cube.

let angley = 30, anglex = 30;
// Identity matrix
let mvp = matrix.identity();
function rotate(gl, program) {
    // Rotate the matrix around the Y-axis.
    matrix.rotationY(angley * Math.PI / 180, mvp);
    // Rotate it around the X-axis
    matrix.multiply(
        mvp,
        matrix.rotationX(anglex * Math.PI / 180),
        mvp
    );
    // Matrix multiplication
    matrix.multiply(projectionMatrix, mvp, mvp);
    const proj = gl.getUniformLocation(program, 'proj');
    gl.uniformMatrix4fv(proj, false, mvp);
    angley += yaxis;
    anglex += xaxis;
}
Copy the code

The renderings are as follows: