🎨 change m4 method names and organized code

src/App.tsx

@@ -1,7 +1,7 @@
 import './App.css'
 import { useEffect, useRef, useState } from 'react'
 import { createWebglRenderer } from './webgl'
-
+import { UserInputHandler } from './UserInputHandler'
 
 // const renderer = createWebglRenderer()
 
@@ -14,30 +14,32 @@ function App() {
   const [renderer, setRenderer] = useState<ReturnType<typeof createWebglRenderer> | null>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
+  const userInputHandler = new UserInputHandler()
+  userInputHandler.on("w", () => { console.log("asdasd") })
   useEffect(() => {
     if (canvasRef.current) {
       const newRenderer = createWebglRenderer(canvasRef.current)
       setTimeout(() => setRenderer(newRenderer), 200)
     }
   }, [])
+
+  const a = async (e: MouseEvent) => await canvasRef.current?.requestPointerLock()
+  const b = (e: MouseEvent) => {
+    console.log("e", e.movementX, e.movementY)
+    setRotation(val => ({ x: val.x - e.movementY, y: val.y - e.movementX, z: val.z }))
+  }
+
   useEffect(() => {
-    const a = async (e: MouseEvent) => {
-      console.log("e", e)
-      await canvasRef.current?.requestPointerLock()
-    };
     canvasRef.current?.addEventListener("click", a);
-
-    const b: (this: Document, ev: MouseEvent) => any = e => {
-      console.log("e", e.movementX, e.movementY)
-      setRotation(val => { return { x: val.x - e.movementY, y: val.y - e.movementX, z: val.z } })
-    }
     document.addEventListener("mousemove", b);
 
     return () => {
       canvasRef.current?.removeEventListener("click", a)
       document.removeEventListener("mousemove", b)
     }
   }, [canvasRef])
+
+
   useEffect(() => {
     if (!renderer) return
     console.log("scale, translation, rotation, originTranslation", scale, translation, rotation, originTranslation)

src/m4.ts

@@ -1,6 +1,11 @@
 
 /* HELPER FUNCTIONS */
 const m4 = {
+	scale: (m4x4: Float32Array, sx: number, sy: number, sz: number) => m4x4 = m4.dot(m4.scaling(sx, sy, sz), m4x4),
+	translate: (m4x4: Float32Array, tx: number, ty: number, tz: number) => m4x4 = m4.dot(m4.translation(tx, ty, tz), m4x4),
+	rotateX: (m4x4: Float32Array, degreeX: number) => m4x4 = m4.dot(m4.rotationX(degreeX), m4x4),
+	rotateY: (m4x4: Float32Array, degreeY: number) => m4x4 = m4.dot(m4.rotationY(degreeY), m4x4),
+	rotateZ: (m4x4: Float32Array, degreeZ: number) => m4x4 = m4.dot(m4.rotationZ(degreeZ), m4x4),
 	identity: () => {
 		return new Float32Array([
 			1, 0, 0, 0,
@@ -9,7 +14,7 @@ const m4 = {
 			0, 0, 0, 1
 		])
 	},
-	scale: (scaleX: number, scaleY: number, scaleZ: number) => {
+	scaling: (scaleX: number, scaleY: number, scaleZ: number) => {
 		return new Float32Array([
 			scaleX, 0, 0, 0,
 			0, scaleY, 0, 0,