WebGL camera that works

glCamera.js

class Camera {
    constructor(gl ,vMU, pMU) {
        this.viewMatrix = mat4.create()
        this.projMatrix = mat4.create()

        this.gl = gl
        this.viewMatrixUniform = vMU
        this.projectionMatrixUniform = pMU

        this.speed
        this._speed = 0.3
        this.fov
        this._fov = 90
        this.sensivity
        this._sense = 80

        this.near
        this._near = 0.30
        this.far
        this._far = 100
        
        this.pos = vec3.create()
        this.forward = vec3.create()
        this.camR = vec3.create()
        
        this.mouse = {x:0, y:0}

        this.lookAt = vec3.create()
        /* only with BooleanicKeys
        this.keys = new BooleanicKeys({
            KeyW: function () {
                this.pos[0] -= +Math.cos(this.mouse.x) * this._speed //Forward
                this.pos[2] -= +Math.sin(this.mouse.x) * this._speed
            }.bind(this),
            KeyS: function () {
                this.pos[0] += +Math.cos(this.mouse.x) * this._speed//Backward
                this.pos[2] += +Math.sin(this.mouse.x) * this._speed
            }.bind(this),
            KeyA: function () {
                this.camR[0] = Math.cos(this.mouse.x) * this._speed//Left
                this.camR[2] = Math.sin(this.mouse.x) * this._speed
                vec3.rotateY(this.camR, this.camR, [0, 1, 0], 90 * Math.PI / 180)
                this.pos[0] -=  this.camR[0]
                this.pos[2] -=  this.camR[2]
            }.bind(this),
            KeyD: function () {
                this.camR[0] = Math.cos(this.mouse.x) * this._speed//Right
                this.camR[2] = Math.sin(this.mouse.x) * this._speed
                vec3.rotateY(this.camR, this.camR, [0, 1, 0], 90 * Math.PI / 180)
                this.pos[0] += this.camR[0]
                this.pos[2] += this.camR[2]
            }.bind(this),
            Space: function () {
                this.pos[1] += 1 * this._speed//Up
            }.bind(this),
            ShiftLeft: function () {
                this.pos[1] -= 1 * this._speed//Down
            }.bind(this)
        })
        */
    }
    updateViewMatrix() {
        //Strange values, needs revision (-3.1 -0.0001)
        this.mouse.y < -3.1 && this.mouse.y = -3.1
        this.mouse.y > -0.0001 && this.mouse.y = -0.0001
        this.forward[0] = +Math.sin(this.mouse.y) * Math.cos(this.mouse.x )
        this.forward[1] = -Math.cos(this.mouse.y);
        this.forward[2] = +Math.sin(this.mouse.y) * Math.sin(this.mouse.x )
        vec3.add(this.lookAt, this.pos, this.forward)
        mat4.lookAt(this.viewMatrix, this.pos, this.lookAt, [0, 1, 0])
        this.gl.uniformMatrix4fv(this.viewMatrixUniform, false, this.viewMatrix)
    }
    onMouseMove(e) {
        this.mouse.x += e.movementX / this._sense
        this.mouse.y += e.movementY / this._sense
    }

    onResize() {
        this.gl.useProgram(program)
        let w = window.innerWidth
        let h = window.innerHeight
        //The canvas dont care about the size of canvas
        /*
        this.gl.canvas.width = w
        this.gl.canvas.height = h
        this.gl.viewport(0, 0, w, h)
        */
        mat4.perspective(this.projMatrix, glMatrix.toRadian(this._fov), w / h, this._near, this._far);
        //Do outside of state 
        //this.gl.uniformMatrix4fv(this.projectionMatrixUniform, false, this.projMatrix);
    }
    updateMovement() {
    //    this.keys.update() only with BooleanicKeys
    }
    set fov(v) {
        this._fov = v
        this.onResize()
    }
    get fov(){
        return this._fov
    }
    set sensivity (v){
        this._sense = v
    }
    get sensivity(){
        return this._sense
    }
    set speed(v){
        this._speed = v
    }
    get speed(){
        return this._speed
    }
    set near(v){
        this._near = v
        this.onResize()
    }
    get near(){
        return this._near
    }
    set far(v){
        this._far = v
        this.onResize()
    }
    get far(){
        return this._far
    }
}