Вопрос WebGL 2.0 - Как я могу вращать и переводить?

Question

Я пытаюсь использовать WebGL впервые и пытаюсь нарисовать вертолет.Я столкнулся с несколькими ошибками и понемногу понимаю принципы, чтобы найти здесь решение этой ошибки.

Я хочу, чтобы пропеллер вертолета вращался сам и применял вращение и движение тела, когданабрав на клавиатуре.Я искал много информации в Google, но я не знаю, как применить ее к моему коду ниже.

// Vertex shader
var _vertexShader = `
    attribute vec4 _position;
    uniform vec4 _translation;
    void main() {
        gl_Position = _position + _translation;
    }
`

// Fragment shader
var _fragmentShader = `
    precision mediump float;
    uniform vec4 _color;
    void main() {
        gl_FragColor = _color;
    }
`

// Create shader
function createShader(gl, type, source) {
    var shader = gl.createShader(type)
    gl.shaderSource(shader, source)
    gl.compileShader(shader)
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
    if (success) {
        return shader
    } else {
        console.log(gl.getShaderInfoLog(shader))
        gl.deleteShader(shader)
        // return false
    }
}

// Linking shader by program
function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram()
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)
    gl.linkProgram(program)
    var success = gl.getProgramParameter(program, gl.LINK_STATUS)
    if (success) {
        return program
    } else {
        console.log(gl.getProgramInfoLog(program))
        gl.deleteProgram(program)
        // return false
    }
}

function main() {
    // Get a WebGL context.
    var canvas = document.getElementById('canvas')
    var gl = canvas.getContext('webgl2')
    if (!gl) {
        alert('Not support WebGL.')
        return false
    }

    // Get the strings for our GLSL shaders.
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, _vertexShader)
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, _fragmentShader)
    // Link the two shaders into a program.
    var program = createProgram(gl, vertexShader, fragmentShader)
    // Look up where the vertex data need to go.
    var positionLoc = gl.getAttribLocation(program, '_position')
    // Look up uniform locations.
    var uniformColorPositionLoc = gl.getUniformLocation(program, '_color')
    var uniformTranslationPositionLoc = gl.getUniformLocation(program, '_translation')
    var body_positions = new Float32Array([
        // Body triangle (Right)
        -0.25,  0,
        0.25,  0,
        0, 0.5,
        // Body triangle (Left) 
        -0.15, 0,
        0.15, 0,
        0.15, -0.25,
        // Body square
        -0.15, 0,
        -0.15, -0.25,
        0.15, -0.25,
    ])

    var roter_positions = new Float32Array([
        0, 0,
        0.3, 0,
        0, -0.1,

        0, 0,
        0, 0.1,
        -0.3, 0,
    ])

    // Create a buffer and put the three 2d clip space points in it.
    var body_positionBuf = gl.createBuffer()
    // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = body_positionBuf).
    gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
    gl.bufferData(gl.ARRAY_BUFFER, body_positions, gl.STATIC_DRAW)
    
    // Create a buffer and put the three 2d clip space points in it.
    var roter_positionBuf = gl.createBuffer()
    // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = roter_positionBuf).
    gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf)
    gl.bufferData(gl.ARRAY_BUFFER, roter_positions, gl.STATIC_DRAW)

    // Code above this line is initialization code.
    // Code below this line is rendering code.
    function drawScene() {
        // webglUtils.resizeCanvasToDisplaySize(gl.canvas)
        // Tell WebGL how to convert from clip space to pixels.
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

        // Clear the canvas.
        gl.clearColor(0, 0, 0, 0)
        gl.clear(gl.COLOR_BUFFER_BIT)
        
        // Tell it to use our program (pair of shaders).
        gl.useProgram(program)
        // Turn on the attribute.
        gl.enableVertexAttribArray(positionLoc)
        // Set random color for body shape.
        gl.uniform4f(uniformColorPositionLoc, Math.random(), Math.random(), Math.random(), 1)
        // Bind the position buffer.
        gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
        gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)
        // Draw.
        gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2)
        // Set random color for roter shape.
        gl.uniform4f(uniformColorPositionLoc, Math.random(), Math.random(), Math.random(), 1)
        // Bind the position buffer.
        gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf)
        gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)
        // Draw.
        gl.drawArrays(gl.TRIANGLES, 0, roter_positions.length / 2)

        // var size = 2
        // var type = gl.FLOAT
        // var normalize = false
        // var stride = 0
        // var offset = 0 
    }

    drawScene()

    // Event listener
    window.addEventListener('keypress', checkKeyPressed, false)

    function checkKeyPressed(event) {
        if (event.charCode == '119') {

        }
        if (event.charCode == '115') {
            alert('S')
        }
        if (event.charCode == '97') {

        }
        if (event.charCode == '100') {
            
        }
    }
}

Какой совет я могу вам дать?Также моя программа показана ниже.