webGL入门（七）通过键盘控制物体运动

Ian1025

于 2024-10-04 16:21:44 发布

阅读量112

点赞数 5

文章标签： webgl javascript 开发语言前端

本文链接：https://blog.csdn.net/Ian1025/article/details/142704259

版权

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Example</title>
    <script>
        var webgl;
        var countX = 0;
        var countY = 0;

        var vsString = `
            attribute vec3 a_position;
            uniform float angleX;
            uniform float angleY;
            void main(){
                gl_Position = vec4(a_position.x + angleX, a_position.y + angleY, 0.0, 1.0);
            }
        `;

        var fsString = `
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        function init() {
            webgl = initWebgl();
            if (!webgl) {
                return;
            }
            initShader();
            initBuffer();
            initEvent();
            animationLoop();
        }

        function initWebgl() {
            let webglDiv = document.getElementById('webgl_canvas');
            webgl = webglDiv.getContext("webgl") || webglDiv.getContext("experimental-webgl");
            if (webgl) {
                webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
                return webgl;
            } else {
                alert("Failed to get WebGL context. Your browser or machine may not support it.");
                return null;
            }
        }

        function initShader() {
            let shaderVS = webgl.createShader(webgl.VERTEX_SHADER);
            let shaderFS = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(shaderVS, vsString);
            webgl.shaderSource(shaderFS, fsString);

            webgl.compileShader(shaderVS);
            webgl.compileShader(shaderFS);

            let program = webgl.createProgram();
            webgl.attachShader(program, shaderVS);
            webgl.attachShader(program, shaderFS);

            webgl.linkProgram(program);
            webgl.useProgram(program);
            webgl.program = program;
        }

        function initBuffer() {
            let arr = [
                0.1, 0.4, 0.0,
                0.1, 0.5, 0.0,
                0.2, 0.4, 0.0,
            ];
            let floatArr = new Float32Array(arr);
            let buffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, buffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, floatArr, webgl.STATIC_DRAW);

            let aPosition = webgl.getAttribLocation(webgl.program, "a_position");
            webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);
            webgl.enableVertexAttribArray(aPosition);

            let xAngle = webgl.getUniformLocation(webgl.program, "angleX");
            let yAngle = webgl.getUniformLocation(webgl.program, "angleY");
            webgl.uniform1f(xAngle, countX);
            webgl.uniform1f(yAngle, countY);
        }

        function initEvent() {
            document.onkeydown = handleKeyDown;
        }

        function handleKeyDown(event) {
            event.preventDefault(); // Prevent scrolling/other default behavior
            if (event.keyCode == 87) { // W
                countY += 0.1;
            } else if (event.keyCode == 83) { // S
                countY -= 0.1;
            } else if (event.keyCode == 65) { // A
                countX -= 0.1;
            } else if (event.keyCode == 68) { // D
                countX += 0.1;
            }
            draw();
        }

        function draw() {
            webgl.clearColor(0.0, 0.0, 1.0, 1.0); // Clear to blue
            webgl.clear(webgl.COLOR_BUFFER_BIT);

            let xAngle = webgl.getUniformLocation(webgl.program, "angleX");
            let yAngle = webgl.getUniformLocation(webgl.program, "angleY");
            webgl.uniform1f(xAngle, countX);
            webgl.uniform1f(yAngle, countY);

            webgl.drawArrays(webgl.TRIANGLES, 0, 3);
        }

        function animationLoop() {
            requestAnimationFrame(animationLoop);
            draw();
        }
    </script>
</head>
<body onload="init()">
    <canvas id="webgl_canvas" width="500" height="500"></canvas>
</body>
</html>