Update index.html

index.html

@@ -162,13 +162,13 @@
     function init() {
       scene = new THREE.Scene();
       scene.background = new THREE.Color(0x1a1a2e);
-      scene.fog = new THREE.Fog(0x1a1a2e, 100, 300);
+      scene.fog = new THREE.Fog(0x1a1a2e, 5, 50);
 
       camera = new THREE.PerspectiveCamera(
         75,
         window.innerWidth / window.innerHeight,
-        0.1,
-        1000
+        0.01,
+        50
       );
 
       renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -200,7 +200,15 @@
         garage.traverse((child) => {
           child.castShadow = true;
           child.receiveShadow = true;
+          // Add physics to garage objects
+          if (child.geometry) {
+            child.userData.isCollider = true;
+          }
         });
+        // Spawn at saved point
+        playerPos.x = spawnPoint.x;
+        playerPos.y = spawnPoint.y;
+        playerPos.z = spawnPoint.z;
         document.getElementById('loading').style.display = 'none';
         console.log('✅ Garage loaded!');
       }, undefined, (error) => {
@@ -306,20 +314,49 @@
       document.getElementById('coordZ').textContent = playerPos.z.toFixed(2);
     }
 
+    function checkCollisions(newPos) {
+      if (!garage) return newPos;
+
+      const raycaster = new THREE.Raycaster();
+      const sphere = new THREE.Sphere(new THREE.Vector3(newPos.x, newPos.y, newPos.z), 0.6);
+
+      let hasCollision = false;
+      garage.traverse((child) => {
+        if (child.geometry && child.userData.isCollider) {
+          const box = new THREE.Box3().setFromObject(child);
+          if (box.containsPoint(sphere.center) || box.distanceToPoint(sphere.center) < sphere.radius) {
+            hasCollision = true;
+          }
+        }
+      });
+
+      return hasCollision ? playerPos : newPos;
+    }
+
     function animate() {
       requestAnimationFrame(animate);
 
       // Update player position
-      playerPos.x += moveDirection.x * moveSpeed;
-      playerPos.z += moveDirection.z * moveSpeed;
-
+      const newPos = { 
+        x: playerPos.x + moveDirection.x * moveSpeed,
+        y: playerPos.y,
+        z: playerPos.z + moveDirection.z * moveSpeed
+      };
+      
+      playerPos = checkCollisions(newPos);
       playerCube.position.set(playerPos.x, playerPos.y, playerPos.z);
 
-      // Update camera (third person)
+      // Update camera (third person) - Fixed: camera stays behind, doesn't move with movement
       const cameraX = playerPos.x + Math.sin(cameraRotation.y) * cameraDistance * Math.cos(cameraRotation.x);
       const cameraY = playerPos.y + cameraHeight + Math.sin(cameraRotation.x) * cameraDistance;
       const cameraZ = playerPos.z + Math.cos(cameraRotation.y) * cameraDistance * Math.cos(cameraRotation.x);
       camera.position.set(cameraX, cameraY, cameraZ);
+      
+      // Clamp camera inside garage bounds
+      const camClamp = 2;
+      camera.position.x = Math.max(-40, Math.min(40, camera.position.x));
+      camera.position.z = Math.max(-40, Math.min(40, camera.position.z));
+      
       camera.lookAt(playerPos.x, playerPos.y + 0.5, playerPos.z);
 
       updateCoordinates();