i think the render loop is not working

index.html

@@ -290,7 +290,6 @@
                 container.appendChild(card);
             });
         }
-
         function initThreeJS() {
             // Set up Three.js scene
             scene = new THREE.Scene();
@@ -301,9 +300,15 @@
             camera.position.set(0, 5, 10);
             
             // Renderer
-            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true });
+            const canvas = document.getElementById('canvas');
+            renderer = new THREE.WebGLRenderer({ 
+                canvas: canvas,
+                antialias: true,
+                alpha: true
+            });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             
             // Clock for animations
             clock = new THREE.Clock();
@@ -312,14 +317,20 @@
             loader = new THREE.GLTFLoader();
             
             // Add lights
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
             scene.add(ambientLight);
             
             const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(5, 10, 7);
+            directionalLight.position.set(10, 20, 15);
             directionalLight.castShadow = true;
             directionalLight.shadow.mapSize.width = 2048;
             directionalLight.shadow.mapSize.height = 2048;
+            directionalLight.shadow.camera.near = 0.5;
+            directionalLight.shadow.camera.far = 50;
+            directionalLight.shadow.camera.left = -20;
+            directionalLight.shadow.camera.right = 20;
+            directionalLight.shadow.camera.top = 20;
+            directionalLight.shadow.camera.bottom = -20;
             scene.add(directionalLight);
             
             // Create ground
@@ -353,8 +364,7 @@
                 renderer.setSize(window.innerWidth, window.innerHeight);
             });
         }
-
-        function addEnvironmentObjects() {
+function addEnvironmentObjects() {
             // Add some trees
             const treeGeometry = new THREE.ConeGeometry(1, 3, 8);
             const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x2e7d32 });
@@ -468,44 +478,39 @@
             // Set initial animation
             setPlayerAnimation('idle');
         }
-
         function createPlayerAnimations() {
             // In a real app, these would come from the GLTF model
-            // For this example, we'll create simple animations
+            // For this example, we'll create simple animations using NumberKeyframeTrack
             
             // Idle animation (slight bounce)
-            const idleTrack = new THREE.VectorKeyframeTrack(
-                '.position',
+            const idleTrack = new THREE.NumberKeyframeTrack(
+                '.position[y]',
                 [0, 0.5, 1],
-                [
-                    0, 0, 0, // Start position
-                    0, 0.05, 0, // Up position
-                    0, 0, 0 // Back to start
-                ]
+                [0, 0.1, 0]
             );
             const idleClip = new THREE.AnimationClip('idle', 1, [idleTrack]);
             gameState.player.animations.idle = idleClip;
             
             // Walk animation (arm and leg movement)
-            const leftArmTrack = new THREE.VectorKeyframeTrack(
+            const leftArmTrack = new THREE.NumberKeyframeTrack(
                 '.children[2].rotation[z]',
                 [0, 0.5, 1],
-                [0.5, -0.5, 0.5]
+                [0.3, -0.3, 0.3]
             );
-            const rightArmTrack = new THREE.VectorKeyframeTrack(
+            const rightArmTrack = new THREE.NumberKeyframeTrack(
                 '.children[3].rotation[z]',
                 [0, 0.5, 1],
-                [-0.5, 0.5, -0.5]
+                [-0.3, 0.3, -0.3]
             );
-            const leftLegTrack = new THREE.VectorKeyframeTrack(
+            const leftLegTrack = new THREE.NumberKeyframeTrack(
                 '.children[4].position[y]',
                 [0, 0.5, 1],
-                [-0.4, -0.2, -0.4]
+                [-0.4, -0.3, -0.4]
             );
-            const rightLegTrack = new THREE.VectorKeyframeTrack(
+            const rightLegTrack = new THREE.NumberKeyframeTrack(
                 '.children[5].position[y]',
                 [0, 0.5, 1],
-                [-0.2, -0.4, -0.2]
+                [-0.3, -0.4, -0.3]
             );
             const walkClip = new THREE.AnimationClip('walk', 0.5, [
                 leftArmTrack, rightArmTrack, leftLegTrack, rightLegTrack
@@ -519,15 +524,14 @@
             gameState.player.animations.run = runClip;
             
             // Jump animation
-            const jumpTrack = new THREE.VectorKeyframeTrack(
+            const jumpTrack = new THREE.NumberKeyframeTrack(
                 '.position[y]',
                 [0, 0.2, 0.4, 0.6, 0.8, 1],
-                [0, 2, 1.5, 0.5, 0, 0]
+                [0, 1.5, 1, 0.3, 0, 0]
             );
             const jumpClip = new THREE.AnimationClip('jump', 1, [jumpTrack]);
             gameState.player.animations.jump = jumpClip;
         }
-
         function setPlayerAnimation(name) {
             if (gameState.player.currentAnimation === name) return;
             
@@ -538,14 +542,14 @@
                 if (clip) {
                     const action = mixer.clipAction(clip);
                     action.setLoop(THREE.LoopRepeat);
+                    action.clampWhenFinished = false;
                     action.play();
                 }
                 
                 gameState.player.currentAnimation = name;
             }
         }
-
-        function loadNPCCharacters() {
+function loadNPCCharacters() {
             gameState.selectedWorldCharacters.forEach((character, index) => {
                 // In a real app, we would load the GLTF model from the URL
                 // For this example, we'll create a simple placeholder
@@ -593,7 +597,6 @@
                 });
             });
         }
-
         function animate() {
             requestAnimationFrame(animate);
             
@@ -612,47 +615,62 @@
             
             renderer.render(scene, camera);
         }
-
         function handlePlayerMovement(delta) {
             if (!gameState.player) return;
             
             const player = gameState.player;
             let moving = false;
+            let moveDirection = new THREE.Vector3();
             
             // Forward/backward movement
             if (gameState.keys.w) {
-                player.model.translateZ(-player.speed * (gameState.keys.shift ? player.runSpeed / player.speed : 1));
+                moveDirection.z = -1;
                 moving = true;
             }
             if (gameState.keys.s) {
-                player.model.translateZ(player.speed);
+                moveDirection.z = 1;
                 moving = true;
             }
             
             // Left/right movement
             if (gameState.keys.a) {
-                player.model.translateX(-player.speed);
+                moveDirection.x = -1;
                 moving = true;
             }
             if (gameState.keys.d) {
-                player.model.translateX(player.speed);
+                moveDirection.x = 1;
                 moving = true;
             }
             
-            // Rotation
+            // Normalize direction vector if moving diagonally
             if (moving) {
-                // Calculate target rotation based on movement direction
-                const targetRotation = Math.atan2(
-                    (gameState.keys.a ? -1 : 0) + (gameState.keys.d ? 1 : 0),
-                    (gameState.keys.w ? -1 : 0) + (gameState.keys.s ? 1 : 0)
-                );
+                moveDirection.normalize();
+                
+                // Calculate speed
+                const speed = gameState.keys.shift ? player.runSpeed : player.speed;
+                
+                // Apply movement relative to player's rotation
+                const forward = new THREE.Vector3(0, 0, -1);
+                forward.applyQuaternion(player.model.quaternion);
+                forward.y = 0;
+                forward.normalize();
+                
+                const right = new THREE.Vector3(1, 0, 0);
+                right.applyQuaternion(player.model.quaternion);
+                right.y = 0;
+                right.normalize();
                 
-                // Smoothly rotate towards target
-                player.model.rotation.y = THREE.MathUtils.lerp(
-                    player.model.rotation.y,
-                    targetRotation,
-                    player.rotationSpeed
-                );
+                const moveVector = new THREE.Vector3();
+                moveVector.addScaledVector(forward, moveDirection.z * speed);
+                moveVector.addScaledVector(right, moveDirection.x * speed);
+                
+                player.model.position.add(moveVector);
+                
+                // Update rotation only if moving significantly
+                if (moveDirection.length() > 0.1) {
+                    const targetRotation = Math.atan2(moveDirection.x, moveDirection.z);
+                    player.model.rotation.y = targetRotation;
+                }
             }
             // Jumping - only trigger when not showing dialog and not already jumping
             if (gameState.keys.space && !gameState.isJumping && !document.getElementById('dialog-box').classList.contains('translate-y-full')) {
@@ -671,12 +689,10 @@
             
             // Update camera position to follow player
             const cameraOffset = new THREE.Vector3(0, 5, 10);
-            cameraOffset.applyQuaternion(player.model.quaternion);
             camera.position.copy(player.model.position.clone().add(cameraOffset));
             camera.lookAt(player.model.position);
         }
-
-        function updatePlayerAnimation() {
+function updatePlayerAnimation() {
             if (gameState.isJumping) return;
             
             if (!gameState.player.isMoving) {