Add diffrent camera modes

src/main.ts

@@ -1,5 +1,7 @@
 import { vec3, mat4 } from 'gl-matrix';
-import { Camera } from './Camera';
+import { ICamera } from './ICamera';
+import { OrbitalCamera } from './Camera';
+import { FPSCamera } from './FPSCamera';
 import { Grid } from './Grid';
 import { Skybox } from './Skybox';
 import { createProgram } from './Shader';
@@ -142,11 +144,17 @@ var keyboardRotationY = 0;
 var keyboardZoom = 0;
 var keysPressed: Set<string> = new Set();
 /** Objects and states*/
-var camera: Camera;
+var camera: ICamera;
+var orbitalCamera: OrbitalCamera;
+var fpsCamera: FPSCamera;
 var oceanGrid: Grid;
 var skybox: Skybox;
 var curRotX = Config.CAMERA_DEFAULT_ROT_X;
 var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
+/** Camera modes */
+var cameraMode: 'orbital' | 'fps' = 'fps';
+var moveSpeed = 0.15;
+var fastMoveSpeed = 0.4;
 function drawScene() {
     fps++;
     let now = new Date();
@@ -208,9 +216,26 @@ function drawScene() {
         mat4.identity(projection);
         mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE); //projection mode should actually be camera specific
 
-        camera.setOffset(Config.CAMERA_DEFAULT_OFFSET + keyboardZoom);
-        camera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
-        camera.setRotationY((curRotY += mouseXVel * Config.MOUSE_SENSITIVITY + keyboardRotationY));
+        // Handle camera movement and rotation based on mode
+        if (cameraMode === 'fps') {
+            // FPS camera - direct movement
+            camera = fpsCamera;
+            handleFPSCameraMovement();
+            
+            // Apply mouse rotation for FPS mode
+            if (mouseXVel !== 0 || mouseYVel !== 0) {
+                fpsCamera.rotate(mouseXVel, mouseYVel);
+                mouseXVel = 0;
+                mouseYVel = 0;
+            }
+        } else {
+            // Orbital camera - original behavior
+            camera = orbitalCamera;
+            orbitalCamera.setOffset(Config.CAMERA_DEFAULT_OFFSET + keyboardZoom);
+            orbitalCamera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
+            orbitalCamera.setRotationY((curRotY += mouseXVel * Config.MOUSE_SENSITIVITY + keyboardRotationY));
+        }
+        
         var view = camera.getViewMatrix();
         
         // Sun direction (matches the one in ocean shader)
@@ -260,6 +285,41 @@ function drawScene() {
     requestAnimationFrame(drawScene);
 }
 
+/** Handle FPS camera movement */
+function handleFPSCameraMovement() {
+    const speed = keysPressed.has('Shift') ? fastMoveSpeed : moveSpeed;
+    
+    // WASD for horizontal movement
+    if (keysPressed.has('w') || keysPressed.has('W')) {
+        fpsCamera.moveForward(speed);
+    }
+    if (keysPressed.has('s') || keysPressed.has('S')) {
+        fpsCamera.moveForward(-speed);
+    }
+    if (keysPressed.has('a') || keysPressed.has('A')) {
+        fpsCamera.moveRight(-speed);
+    }
+    if (keysPressed.has('d') || keysPressed.has('D')) {
+        fpsCamera.moveRight(speed);
+    }
+    
+    // Q/E for vertical movement
+    if (keysPressed.has('q') || keysPressed.has('Q')) {
+        fpsCamera.moveUp(-speed);
+    }
+    if (keysPressed.has('e') || keysPressed.has('E')) {
+        fpsCamera.moveUp(speed);
+    }
+    
+    // Space to go up, Ctrl to go down
+    if (keysPressed.has(' ')) {
+        fpsCamera.moveUp(speed);
+    }
+    if (keysPressed.has('Control')) {
+        fpsCamera.moveUp(-speed);
+    }
+}
+
 /** Handle keyboard input for camera controls */
 function handleKeyboardInput() {
     keyboardRotationX = 0;
@@ -328,25 +388,85 @@ function main() {
     // Keyboard controls
     window.addEventListener('keydown', (evt) => {
         keysPressed.add(evt.key);
-        handleKeyboardInput();
+        
+        // Toggle camera mode with 'C' key
+        if (evt.key === 'c' || evt.key === 'C') {
+            cameraMode = cameraMode === 'fps' ? 'orbital' : 'fps';
+            console.log(`Camera mode: ${cameraMode.toUpperCase()}`);
+            
+            // Update FPS display to show camera mode
+            if (fpsDisplay) {
+                const modeText = document.createElement('div');
+                modeText.id = 'camera-mode';
+                modeText.style.cssText = 'position: absolute; top: 40px; left: 10px; color: white; font-family: monospace;';
+                modeText.textContent = `Camera: ${cameraMode.toUpperCase()}`;
+                
+                const existingMode = document.getElementById('camera-mode');
+                if (existingMode) {
+                    existingMode.textContent = `Camera: ${cameraMode.toUpperCase()}`;
+                } else {
+                    document.body.appendChild(modeText);
+                }
+            }
+        }
         
         // Reset camera on 'R' key
         if (evt.key === 'r' || evt.key === 'R') {
-            curRotX = Config.CAMERA_DEFAULT_ROT_X;
-            curRotY = Config.CAMERA_DEFAULT_ROT_Y;
-            keyboardZoom = 0;
+            if (cameraMode === 'fps') {
+                fpsCamera = new FPSCamera(); // Reset to initial FPS position
+                camera = fpsCamera;
+                console.log('Camera reset to FPS default position');
+            } else {
+                curRotX = Config.CAMERA_DEFAULT_ROT_X;
+                curRotY = Config.CAMERA_DEFAULT_ROT_Y;
+                keyboardZoom = 0;
+                console.log('Camera reset to orbital default position');
+            }
+        }
+        
+        // Prevent default for space to avoid page scroll
+        if (evt.key === ' ' && cameraMode === 'fps') {
+            evt.preventDefault();
+        }
+        
+        // Handle orbital camera keyboard input
+        if (cameraMode === 'orbital') {
+            handleKeyboardInput();
         }
     });
     
     window.addEventListener('keyup', (evt) => {
         keysPressed.delete(evt.key);
-        handleKeyboardInput();
+        
+        if (cameraMode === 'orbital') {
+            handleKeyboardInput();
+        }
     });
 
     // Window resize handler
     window.addEventListener('resize', () => {
         updateCanvasSize(canvas);
     });
+    
+    // Camera mode toggle from UI controls
+    window.addEventListener('toggleCameraMode', () => {
+        cameraMode = cameraMode === 'fps' ? 'orbital' : 'fps';
+        camera = cameraMode === 'fps' ? fpsCamera : orbitalCamera;
+        console.log(`Camera mode switched to: ${cameraMode.toUpperCase()}`);
+        
+        // Update display
+        const modeText = document.createElement('div');
+        modeText.id = 'camera-mode';
+        modeText.style.cssText = 'position: absolute; top: 40px; left: 10px; color: white; font-family: monospace;';
+        modeText.textContent = `Camera: ${cameraMode.toUpperCase()}`;
+        
+        const existingMode = document.getElementById('camera-mode');
+        if (existingMode) {
+            existingMode.textContent = `Camera: ${cameraMode.toUpperCase()}`;
+        } else {
+            document.body.appendChild(modeText);
+        }
+    });
 
     initShaders();
     initGeometry();
@@ -358,7 +478,13 @@ function main() {
     skybox = new Skybox();
     skybox.initVAO(gl);
 
-    camera = new Camera();
+    // Initialize both cameras
+    orbitalCamera = new OrbitalCamera();
+    fpsCamera = new FPSCamera();
+    camera = fpsCamera; // Start with FPS camera
+    
+    console.log('Cameras initialized - Press C to toggle between FPS and Orbital modes');
+    
     //Check if any errors apeared during init.
     if (gl.getError() != gl.NO_ERROR) {
         console.log("OpenGL Error!: ");