Modernized WASD control scheme

README.md

@@ -12,8 +12,9 @@ https://github.com/antimatter15/splat/assets/30054/878d5d34-e0a7-4336-85df-111ff
 
 
 
-## controls
 
+## controls
+This was the main feature of this fork, just game-like controls. 
 movement (arrow keys)
 
 - left/right arrow keys to strafe side to side

index.html

@@ -191,30 +191,28 @@
 		<script>
 			if(location.host.includes('hf.space')) document.body.classList.add('nohf');
 		</script>
-		<div id="info">
-			<h3 class="nohf">WebGL 3D Gaussian Splat Viewer</h3>
-			<p>
-			<small class="nohf">
-				By <a href="https://twitter.com/antimatter15">Kevin Kwok</a>.
-				Code on
-				<a href="https://github.com/antimatter15/splat">Github</a
-				>.
-			</small>
+		<div id="info"><h3 class="nohf">WebGL 3D Gaussian Splat Viewer</h3>
+		<p>
+		    <small class="nohf">
+		        By <a href="https://twitter.com/antimatter15">Kevin Kwok</a>.
+		        Code on <a href="https://github.com/antimatter15/splat">Github</a>.
+		        <br>
+		        Forked by Jeremy Jiao. Code on 
+		        <a href="https://github.com/Chieken-Nug/splat">Github</a>.
+		    </small>
 		</p>
-
 			<details>
-			<summary>Use mouse or arrow keys to navigate.</summary>
+			<summary>Use arrow keys (recommneded) or mouse to navigate.</summary>
 
-<div id="instructions">movement (arrow keys)
-- left/right arrow keys to strafe side to side
-- up/down arrow keys to move forward/back
-- space to jump
+<div id="instructions">movement (WASD)
+- A and D to strafe side to side
+- W and S arrow keys to move forward/back
+- space to jump / move up
+
+camera angle (arrow keys and QE)
+- left and right arrow to turn camera left/right
+- top and bottom arrow to tilt camera up/down
 
-camera angle (wasd)
-- a/d to turn camera left/right
-- w/s to tilt camera up/down
-- q/e to roll camera counterclockwise/clockwise
-- i/k and j/l to orbit
 
 trackpad
 - scroll up/down/left/right to orbit
@@ -226,6 +224,10 @@ <h3 class="nohf">WebGL 3D Gaussian Splat Viewer</h3>
 - click and drag to orbit
 - right click (or ctrl/cmd key) and drag up/down to move
 
+advanced: 
+- q/e to roll camera counterclockwise/clockwise
+- i/k and j/l to orbit
+
 touch (mobile)
 - one finger to orbit
 - two finger pinch to move forward/back

main.js

@@ -184,15 +184,6 @@ function getViewMatrix(camera) {
     ].flat();
     return camToWorld;
 }
-// function translate4(a, x, y, z) {
-//     return [
-//         ...a.slice(0, 12),
-//         a[0] * x + a[4] * y + a[8] * z + a[12],
-//         a[1] * x + a[5] * y + a[9] * z + a[13],
-//         a[2] * x + a[6] * y + a[10] * z + a[14],
-//         a[3] * x + a[7] * y + a[11] * z + a[15],
-//     ];
-// }
 
 function multiply4(a, b) {
     return [
@@ -1186,32 +1177,25 @@ async function main() {
             activeKeys.includes("ShiftLeft") ||
             activeKeys.includes("ShiftRight");
 
-        if (activeKeys.includes("ArrowUp")) {
-            if (shiftKey) {
-                inv = translate4(inv, 0, -0.03, 0);
-            } else {
-                inv = translate4(inv, 0, 0, 0.1);
-            }
-        }
-        if (activeKeys.includes("ArrowDown")) {
-            if (shiftKey) {
-                inv = translate4(inv, 0, 0.03, 0);
-            } else {
-                inv = translate4(inv, 0, 0, -0.1);
-            }
-        }
-        if (activeKeys.includes("ArrowLeft"))
-            inv = translate4(inv, -0.03, 0, 0);
-        //
-        if (activeKeys.includes("ArrowRight"))
-            inv = translate4(inv, 0.03, 0, 0);
-        // inv = rotate4(inv, 0.01, 0, 1, 0);
-        if (activeKeys.includes("KeyA")) inv = rotate4(inv, -0.01, 0, 1, 0);
-        if (activeKeys.includes("KeyD")) inv = rotate4(inv, 0.01, 0, 1, 0);
-        if (activeKeys.includes("KeyQ")) inv = rotate4(inv, 0.01, 0, 0, 1);
-        if (activeKeys.includes("KeyE")) inv = rotate4(inv, -0.01, 0, 0, 1);
-        if (activeKeys.includes("KeyW")) inv = rotate4(inv, 0.005, 1, 0, 0);
-        if (activeKeys.includes("KeyS")) inv = rotate4(inv, -0.005, 1, 0, 0);
+        // WASD - First person movement
+        if (activeKeys.includes("KeyW")) inv = translate4(inv, 0, 0, 0.1);  // Forward
+        if (activeKeys.includes("KeyS")) inv = translate4(inv, 0, 0, -0.1); // Backward
+        if (activeKeys.includes("KeyA")) inv = translate4(inv, -0.03, 0, 0); // Strafe left
+        if (activeKeys.includes("KeyD")) inv = translate4(inv, 0.03, 0, 0);  // Strafe right
+
+        // Space/Shift - Up/Down movement
+        if (activeKeys.includes("Space")) inv = translate4(inv, 0, -0.03, 0); // Up
+        if (shiftKey) inv = translate4(inv, 0, 0.03, 0); // Down
+
+        // Arrow keys - Camera rotation (look around)
+        if (activeKeys.includes("ArrowLeft")) inv = rotate4(inv, -0.01, 0, 1, 0);  // Look left
+        if (activeKeys.includes("ArrowRight")) inv = rotate4(inv, 0.01, 0, 1, 0);  // Look right
+        if (activeKeys.includes("ArrowUp")) inv = rotate4(inv, 0.01, 1, 0, 0);     // Look up
+        if (activeKeys.includes("ArrowDown")) inv = rotate4(inv, -0.01, 1, 0, 0);  // Look down
+
+        // Q/E - Roll camera (optional) modified from original inverted roll. 
+        if (activeKeys.includes("KeyE")) inv = rotate4(inv, 0.01, 0, 0, 1);
+        if (activeKeys.includes("KeyQ")) inv = rotate4(inv, -0.01, 0, 0, 1);
 
         const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];
         let isJumping = activeKeys.includes("Space");
@@ -1482,3 +1466,12 @@ main().catch((err) => {
     document.getElementById("spinner").style.display = "none";
     document.getElementById("message").innerText = err.toString();
 });
+
+window.addEventListener('mousedown', () => {
+    window.focus();
+});
+
+// This helps when the mouse enters the iframe
+window.addEventListener('mouseenter', () => {
+    window.focus();
+});