JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body onresize="resizeFOV()">
        <canvas style="left:0;top:0;position:fixed;/*cursor:none;*/"id="cnv"></canvas>
        <div id="fps"style="position:absolute;left:0;top:0;">fps</div>
        <div id="coo"style="position:absolute;left:0;top:20;">coo</div>
        <div id="tes"style="position:absolute;left:0;top:100;"></div>
        <div id="ins"style="position:absolute;left:30%;text-align:center;top:0;width:40%;">WASD to move, L/R arrow keys rotate, E/Q change fov, 1 for jitter and 2 for shatter, U/I J/K N/M rotate debug</div>
    </body>
</html>

JavaScript

//Key controls
    let Key = {
        //KEYBINDS----------------------------------------------------
        jump: " ",
        rotateLeft: "ArrowLeft",
        rotateRight: "ArrowRight",
        rotateUp: "ArrowUp",
        rotateDown: "ArrowDown",
        crouch: "Control",
        sprint: "Shift",
        forward: "w",
        backward: "s",
        left: "a",
        right: "d",
        fovUp: "e",
        fovDown: "q",
        attack: "g",
        //all keybinds. you can declare other variables for the same keys if you want to make it more readable.
        //kind of organized in the layout of a keyboard
        escape: "Escape", f1: "F1", f2: "F2", f3: "F3", f4: "F4", f5: "F5", f6: "F6", f7: "F7", f8: "F8", f9: "F9", f10: "F10", f11: "F11", f12: "F12", scrollLock: "ScrollLock", pause: "Pause", 
        tilde: "~", exclamation: "!", at: "@", hash: "#", dollar: "$", percent: "%", carrot: "^", and: "&", asterisk: "*", leftParen: "(", rightParen: ")", score: "_", plus: "+",
        backtick: "`",one: "1", two: "2", three: "3", four: "4", five: "5", six: "6", seven: "7", eight: "8", nine: "9", zero: "0", minus: "-", equals: "=", backspace: "Backspace",
        insert: "Insert", home: "Home", pageup: "PageUp", delete: "Delete", end: "End", pagedown: "PageDown", numLock: "NumLock",
        tab: "Tab", q: "q", w: "w", e: "e", r: "r", t: "t", y: "y", u: "u", i: "i", o: "o", p: "p", leftSquare: "[", rightSquare: "]", leftBracket: "{", rightBracket: "}",
        capsLock: "CapsLock", a: "a", s: "s", d: "d", f: "f", g: "g", h: "h", j: "j", k: "k", l: "l", semicolon: ";", colon: ":", singleQuote: "'", doubleQuote: "\"", bar: "|", backslash: "\\", enter: "Enter",
        shift: "Shift", z: "z", x: "x", c: "c", v: "v", b: "b", n: "n", m: "m", comma: ",", period: ".",  leftCarrot: "<", rightCarrot: ">", slash: "/", question: "?",
        control: "Control", meta: "Meta", alt: "Alt", space: " ", menu: "ContextMenu", arrowLeft: "ArrowLeft", arrowRight: "ArrowRight",...