Update game.js

game.js

@@ -1594,7 +1594,7 @@ class Game {
         this.obstacles = [];
     }
 
-    const BUILDING_COUNT = 50; // 바위 대신 건물로 변경
+    const BUILDING_COUNT = 50;
     const buildingModels = [
         'models/house1.glb',
         'models/house2.glb',
@@ -1602,23 +1602,20 @@ class Game {
         'models/house4.glb'
     ];
 
-    // 충돌 박스 시각화용 재질 (디버깅용)
-    const collisionBoxMaterial = new THREE.MeshBasicMaterial({
+    // 충돌 박스 시각화를 위한 재질
+    const collisionBoxMaterial = new THREE.LineBasicMaterial({
         color: 0xff0000,
-        wireframe: true,
-        visible: false // 필요시 true로 변경하여 충돌 박스 확인
+        linewidth: 2
     });
 
     for (let i = 0; i < BUILDING_COUNT; i++) {
         try {
-            // 무작위로 건물 모델 선택
             const modelPath = buildingModels[Math.floor(Math.random() * buildingModels.length)];
             const result = await this.loader.loadAsync(modelPath);
             const building = result.scene;
             
-            // 건물 위치 설정 - 맵 가장자리에 더 많이 배치
             let x, z;
-            const edgeSpawn = Math.random() < 0.7; // 70% 확률로 가장자리에 생성
+            const edgeSpawn = Math.random() < 0.7;
 
             if (edgeSpawn) {
                 if (Math.random() < 0.5) {
@@ -1634,11 +1631,7 @@ class Game {
             }
 
             building.position.set(x, 0, z);
-            
-            // 랜덤 회전
             building.rotation.y = Math.random() * Math.PI * 2;
-            
-            // 스케일 설정 (플레이어 탱크와 동일하게)
             building.scale.set(1, 1, 1);
             
             // 그림자 설정
@@ -1649,26 +1642,35 @@ class Game {
                 }
             });
 
-            // 충돌 박스 생성
+            // 충돌 박스 생성 및 시각화
             const boundingBox = new THREE.Box3().setFromObject(building);
             const boxSize = boundingBox.getSize(new THREE.Vector3());
-            const collisionGeometry = new THREE.BoxGeometry(boxSize.x, boxSize.y, boxSize.z);
-            const collisionMesh = new THREE.Mesh(collisionGeometry, collisionBoxMaterial);
-            
-            collisionMesh.position.copy(building.position);
-            collisionMesh.position.y += boxSize.y / 2; // 충돌 박스를 건물 중심에 맞춤
-            collisionMesh.rotation.copy(building.rotation);
-            
+
+            // 충돌 박스의 와이어프레임 생성
+            const boxGeometry = new THREE.BufferGeometry();
+            const positions = new Float32Array([
+                // 바닥 사각형
+                -boxSize.x/2, 0.1, -boxSize.z/2,
+                -boxSize.x/2, 0.1, boxSize.z/2,
+                boxSize.x/2, 0.1, boxSize.z/2,
+                boxSize.x/2, 0.1, -boxSize.z/2,
+                -boxSize.x/2, 0.1, -boxSize.z/2
+            ]);
+
+            boxGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            const collisionBoxLine = new THREE.Line(boxGeometry, collisionBoxMaterial);
+            collisionBoxLine.position.copy(building.position);
+            collisionBoxLine.rotation.y = building.rotation.y;
+
             // 충돌 데이터 설정
             building.userData.isCollidable = true;
             building.userData.type = 'building';
-            building.userData.collisionMesh = collisionMesh;
-            
-            // 다른 건물들과의 거리 체크
+            building.userData.collisionBox = collisionBoxLine;
+
             let tooClose = false;
             for (const obstacle of this.obstacles) {
                 const distance = building.position.distanceTo(obstacle.position);
-                if (distance < 20) { // 최소 거리 설정
+                if (distance < 20) {
                     tooClose = true;
                     break;
                 }
@@ -1677,7 +1679,7 @@ class Game {
             if (!tooClose) {
                 this.obstacles.push(building);
                 this.scene.add(building);
-                this.scene.add(collisionMesh);
+                this.scene.add(collisionBoxLine); // 충돌 박스 라인 추가
             }
 
         } catch (error) {
@@ -1685,6 +1687,7 @@ class Game {
         }
     }
 
+
     // 선인장 추가 (기존 코드 유지)
     const cactusGeometry = new THREE.CylinderGeometry(0.5, 0.7, 4, 8);
     const cactusMaterial = new THREE.MeshStandardMaterial({