webgl中通过键盘方向键，改变视图矩阵_webgl按键控制变换的方式-优快云博客

本文链接：https://blog.youkuaiyun.com/webMinStudent/article/details/122163289

这篇博客介绍了如何在WebGL环境中通过监听键盘事件，改变视图矩阵来实现视图的上下左右移动。作者提供了详细的JavaScript代码示例，展示了如何设置顶点着色器和片段着色器，以及如何更新和渲染场景。通过按下键盘的上、下、左、右箭头键，可以调整视角的位置，从而改变场景的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. webgl中通过键盘方向键，改变视图矩阵

这个很简单。

通过键盘监听事件，在相应的键位上修改视图矩阵的对应的分量。

document.onkeydown = function(e) {
            keydown(e);
        }
        let x = 0.20;
        let y = 0.25;
        const keydown = (e) => {

            if (e.keyCode === 38) {
                // 向上键
                x += 0.01;
            } else if (e.keyCode === 40) {
                // 向下键
                x -= 0.01;
            } else if (e.keyCode === 37) {
                // 左键
                y -= 0.01;
            } else if (e.keyCode === 39) {
                // 右键
                y += 0.01;
            }
            var viewMatrix = new Matrix4();
            viewMatrix.setLookAt(x, y, 0.25, 0, 0, 0, 0, 1, 0);
            gl.uniformMatrix4fv(u_ViewMaterix, false, viewMatrix.elements);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, 9)
        }

实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            height: 400px;
            width: 400px;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script src="../lib/cuon-matrix.js"></script>
    <script>
        const gl = canvas.getContext('webgl')
        // console.log(gl, 'gl')
        const VSHADHER_SOURCE =
            'attribute vec4 a_Position;\n' +
            'attribute vec4 a_Color;\n' +
            'varying vec4 c_Color;\n' +
            'uniform mat4 u_ViewMaterix;\n' +
            'void main(){' +
            '       gl_Position = u_ViewMaterix * a_Position;\n' +
            '       c_Color = a_Color;\n' +
            '}\n';
        const FSHADER_SOURCE =
            '#ifdef GL_ES\n' +
            'precision mediump float;\n' +
            '#endif\n' +
            'varying vec4 c_Color;\n' +
            'void main(){\n' +
            '   gl_FragColor = c_Color;\n' +
            '}\n';
        const createShader = (type, souce) => {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, souce);
            gl.compileShader(shader);
            const info = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!info) {
                const err = gl.getShaderInfoLog(shader);
                // alert(err === '');
                gl.deleteShader(shader)
                console.log('编译报错信息为' + err);
                return null;
            }
            return shader;
        }
        // console.log(createShader(gl.VERTEX_SHADER, VSHADHER_SOURCE))
        // console.log(createShader(gl.FRAGMENT_SHADER, FSHADER_SOURCE));
        const createProgram = (vshader, fshader) => {
            const vertexshader = createShader(gl.VERTEX_SHADER, vshader); //创建顶点着色器
            const fragmentShader = createShader(gl.FRAGMENT_SHADER, fshader); // 创建片着色器
            if (!vertexshader || !fragmentShader) {
                console.log('创建着色器失败');
                gl.deleteShader(fragmentShader);
                gl.deleteShader(vertexshader);
                return null;
            }
            const program = gl.createProgram();
            gl.attachShader(program, vertexshader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!linkState) {
                const err = gl.getProgramInfoLog(program);
                console.log('获取链接报错信息', err)
                gl.deleteShader(fragmentShader)
                gl.deleteShader(vertexshader)
                gl.deleteProgram(program);
                return null
            }
            return program;
        }
        const program = createProgram(VSHADHER_SOURCE, FSHADER_SOURCE)
        // console.log(program, 'program')
        gl.useProgram(program)
        gl.program = program;
        var viewMatrix = new Matrix4();
        viewMatrix.setLookAt(0.20, 0.25, 0.25, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0)
        const u_ViewMaterix = gl.getUniformLocation(gl.program, 'u_ViewMaterix');
        // console.log(u_ViewMaterix, 'u_ViewMaterix');
        gl.uniformMatrix4fv(u_ViewMaterix, false, viewMatrix.elements);
        const initBuffers = () => {
            var verticesColors = new Float32Array([
                // Vertex coordinates and color(RGBA)
                0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one
                -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
                0.5, -0.5, -0.4, 1.0, 0.4, 0.4,

                0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one
                -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
                0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

                0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // The front blue one 
                -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
                0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
            ]);
            const size = verticesColors.BYTES_PER_ELEMENT;
            const n = 9;
            const vertexColorbuffer = gl.createBuffer();
            const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            console.log(a_Position, 'a_Position')
            const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
            console.log(a_Color, 'a_Color')
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
            gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
            gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, size * 6, 0);
            gl.enableVertexAttribArray(a_Position);
            gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 6, size * 3)
            gl.enableVertexAttribArray(a_Color);
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, n)
            gl.bindBuffer(gl.ARRAY_BUFFER, null);

        }
        initBuffers();
        document.onkeydown = function(e) {
            keydown(e);
        }
        let x = 0.20;
        let y = 0.25;
        const keydown = (e) => {

            if (e.keyCode === 38) {
                // 向上键
                x += 0.01;
            } else if (e.keyCode === 40) {
                // 向下键
                x -= 0.01;
            } else if (e.keyCode === 37) {
                // 左键
                y -= 0.01;
            } else if (e.keyCode === 39) {
                // 右键
                y += 0.01;
            }
            var viewMatrix = new Matrix4();
            viewMatrix.setLookAt(x, y, 0.25, 0, 0, 0, 0, 1, 0);
            gl.uniformMatrix4fv(u_ViewMaterix, false, viewMatrix.elements);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, 9)
        }
    </script>
</body>

</html>