can you add camera options and reduce the size of my character?

index.html

@@ -188,7 +188,7 @@
             </div>
         </div>
     </div>
-<!-- Game UI -->
+    <!-- Game UI -->
     <div id="game-ui" class="fixed inset-0 pointer-events-none z-20 opacity-0 transition-all">
         <div class="absolute bottom-4 left-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg">
             <div class="flex items-center space-x-2">
@@ -207,10 +207,16 @@
                 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                 <span>Near NPC: Talk (Space)</span>
             </div>
+            <div class="flex items-center space-x-2">
+                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                <span>C: Camera Mode</span>
+            </div>
+        </div>
+        <div class="absolute top-4 right-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg">
+            <div class="text-white font-semibold">Camera: <span id="camera-mode-display">Follow</span></div>
         </div>
     </div>
-
-    <!-- Dialog Box -->
+<!-- Dialog Box -->
     <div id="dialog-box" class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 p-6 rounded-t-2xl transform translate-y-full transition-all duration-300 z-50 max-w-4xl mx-auto">
         <div class="flex items-start space-x-4">
             <div id="dialog-character" class="w-16 h-16 rounded-full bg-gray-700 flex-shrink-0"></div>
@@ -242,6 +248,7 @@
             nearbyNpc: null,
             isRunning: false,
             isJumping: false,
+            cameraMode: 'follow', // 'follow', 'orbit', 'first-person'
             keys: {
                 w: false,
                 a: false,
@@ -251,7 +258,7 @@
                 space: false
             }
         };
-        // Sample character data with free models from Three.js examples
+// Sample character data with free models from Three.js examples
         const characterData = [
             { id: 1, name: "Robot", modelUrl: "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", color: "#EF4444", dialog: ["Beep boop! I am a robot.", "Processing your request...", "01010100 01101000 01110010 01100101 01100101"] },
             { id: 2, name: "Fox", modelUrl: "https://threejs.org/examples/models/gltf/Fox/Fox.glb", color: "#3B82F6", dialog: ["What does the fox say?", "The forest is my home.", "Sly as a fox!"] },
@@ -274,12 +281,17 @@
             document.getElementById('confirm-character').addEventListener('click', showWorldSelection);
             document.getElementById('start-world').addEventListener('click', startGame);
             document.getElementById('close-dialog').addEventListener('click', closeDialog);
-
             // Keyboard event listeners
             window.addEventListener('keydown', handleKeyDown);
             window.addEventListener('keyup', handleKeyUp);
 
-            // Populate character selection
+            // Camera controls listener
+            window.addEventListener('keydown', (event) => {
+                if (event.key.toLowerCase() === 'c') {
+                    cycleCameraMode();
+                }
+            });
+// Populate character selection
             populateCharacterSelection();
         });
 
@@ -450,11 +462,15 @@
             
             // Add some environment objects
             addEnvironmentObjects();
-            
+            // Initialize OrbitControls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            controls.enabled = false; // Start with controls disabled for follow camera
+
             // Load player character
             loadPlayerCharacter();
-            
-            // Load NPC characters
+// Load NPC characters
             loadNPCCharacters();
             
             // Start animation loop
@@ -504,12 +520,10 @@ function addEnvironmentObjects() {
         function loadPlayerCharacter() {
             loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
                 const model = gltf.scene;
-                
-                // Scale and position the model
-                model.scale.set(1, 1, 1);
+                // Scale and position the model - reduced size
+                model.scale.set(0.6, 0.6, 0.6);
                 model.position.set(0, 0, 0);
-                
-                // Enable shadows for all children
+// Enable shadows for all children
                 model.traverse((child) => {
                     if (child.isMesh) {
                         child.castShadow = true;
@@ -606,7 +620,6 @@ function addEnvironmentObjects() {
             rightLeg.position.set(0.2, -0.4, 0);
             rightLeg.castShadow = true;
             group.add(rightLeg);
-            
             group.position.y = 0;
             scene.add(group);
             
@@ -624,8 +637,7 @@ function addEnvironmentObjects() {
                 },
                 currentAnimation: null
             };
-            
-            // Add a simple animation mixer for the player
+// Add a simple animation mixer for the player
             mixer = new THREE.AnimationMixer(group);
             createPlayerAnimations();
             setPlayerAnimation('idle');
@@ -727,6 +739,8 @@ function loadNPCCharacters() {
                 head.position.y = 1.6;
                 head.castShadow = true;
                 group.add(head);
+                // Scale down NPCs to match player size
+                group.scale.set(0.6, 0.6, 0.6);
                 
                 // Position NPCs in a circle around the center
                 const angle = (index / gameState.selectedWorldCharacters.length) * Math.PI * 2;
@@ -738,8 +752,7 @@ function loadNPCCharacters() {
                 
                 // Make NPC face center
                 group.lookAt(0, 0, 0);
-                
-                scene.add(group);
+scene.add(group);
                 
                 gameState.npcs.push({
                     model: group,
@@ -765,6 +778,14 @@ function loadNPCCharacters() {
             // Check for nearby NPCs
             checkForNearbyNPCs();
             
+            // Update camera based on mode
+            updateCamera(delta);
+            
+            // Update OrbitControls if enabled
+            if (controls.enabled) {
+                controls.update();
+            }
+            
             renderer.render(scene, camera);
         }
 function handlePlayerMovement(delta) {
@@ -872,11 +893,58 @@ function handlePlayerMovement(delta) {
                 player.isMoving = moving;
                 updatePlayerAnimation();
             }
+            // Update camera position based on camera mode
+            updateCamera(delta);
+        }
+
+        function updateCamera(delta) {
+            if (!gameState.player) return;
+            
+            const player = gameState.player;
             
-            // Update camera position to follow player with smooth interpolation
-            const targetCameraPosition = player.model.position.clone().add(new THREE.Vector3(0, 5, 10));
-            camera.position.lerp(targetCameraPosition, 0.1 * delta * 60);
-            camera.lookAt(player.model.position);
+            switch (gameState.cameraMode) {
+                case 'follow':
+                    // Follow camera - smooth follow behind player
+                    const targetCameraPosition = player.model.position.clone().add(new THREE.Vector3(0, 3, 8));
+                    camera.position.lerp(targetCameraPosition, 0.1 * delta * 60);
+                    camera.lookAt(player.model.position);
+                    break;
+                    
+                case 'orbit':
+                    // Orbit camera - let OrbitControls handle positioning
+                    // Set the target to player position
+                    controls.target.copy(player.model.position);
+                    break;
+                    
+                case 'first-person':
+                    // First-person camera - attach to player's head
+                    const headPosition = player.model.position.clone();
+                    headPosition.y += 1.2; // Eye level
+                    camera.position.copy(headPosition);
+                    
+                    // Make camera face same direction as player
+                    camera.rotation.y = player.model.rotation.y;
+                    break;
+            }
+        }
+
+        function cycleCameraMode() {
+            const modes = ['follow', 'orbit', 'first-person'];
+            const currentIndex = modes.indexOf(gameState.cameraMode);
+            const nextIndex = (currentIndex + 1) % modes.length;
+            gameState.cameraMode = modes[nextIndex];
+            
+            // Update UI display
+            document.getElementById('camera-mode-display').textContent = 
+                gameState.cameraMode.charAt(0).toUpperCase() + gameState.cameraMode.slice(1);
+            
+            // Enable/disable OrbitControls based on mode
+            controls.enabled = (gameState.cameraMode === 'orbit');
+            
+            // Reset camera position for first-person mode
+            if (gameState.cameraMode === 'first-person') {
+                camera.rotation.set(0, 0, 0);
+            }
         }
 function updatePlayerAnimation() {
             if (gameState.isJumping) return;
@@ -989,7 +1057,10 @@ function showDialog(npc) {
                         showDialog(gameState.nearbyNpc);
                     }
                     break;
-            }
+                case 'c':
+                    // Camera mode switching is handled separately
+                    break;
+}
         }
         function handleKeyUp(event) {
             // Ignore key repeats