Update game.js

game.js

@@ -4,14 +4,14 @@ import { PointerLockControls } from 'three/addons/controls/PointerLockControls.j
 
 // 게임 상수
 const GAME_DURATION = 180;
-const MAP_SIZE = 400;
+const MAP_SIZE = 1000;
 const TANK_HEIGHT = 0.5;
 const ENEMY_GROUND_HEIGHT = 0;
 const ENEMY_SCALE = 1;
 const MAX_HEALTH = 1000;
 const ENEMY_MOVE_SPEED = 0.1;
 const ENEMY_COUNT_MAX = 3;
-const PARTICLE_COUNT = 5;
+const PARTICLE_COUNT = 15;
 const BUILDING_COUNT = 30;
 const ENEMY_CONFIG = {
     ATTACK_RANGE: 100,
@@ -160,15 +160,6 @@ class TankPlayer {
 
     async initialize(scene, loader) {
     try {
-        // 그림자 평면 먼저 생성
-        const shadowPlaneGeometry = new THREE.PlaneGeometry(8, 8);
-        const shadowPlaneMaterial = new THREE.ShadowMaterial({
-            opacity: 0.3
-        });
-        this.shadowPlane = new THREE.Mesh(shadowPlaneGeometry, shadowPlaneMaterial);
-        this.shadowPlane.receiveShadow = true;
-        this.shadowPlane.rotation.x = -Math.PI / 2;
-        
         const bodyResult = await loader.loadAsync('/models/abramsBody.glb');
         this.body = bodyResult.scene;
         
@@ -179,14 +170,7 @@ class TankPlayer {
         this.turretGroup.add(this.turret);
         this.body.add(this.turretGroup);
         
-        // 탱크 위치 높이 조정
-        this.body.position.y = 1.5;
-        
-        // 그림자 평면 위치 조정 (body가 생성된 후에)
-        this.shadowPlane.position.y = -1.0;
-        this.body.add(this.shadowPlane);
-        
-        // 그림자 설정
+        // 그림자 설정은 그대로 유지
         this.body.traverse((child) => {
             if (child.isMesh) {
                 child.castShadow = true;
@@ -205,15 +189,68 @@ class TankPlayer {
             }
         });
 
-        // 스폰 위치 설정
+        // 그림자 평면
+        const shadowPlaneGeometry = new THREE.PlaneGeometry(8, 8);
+        const shadowPlaneMaterial = new THREE.ShadowMaterial({
+            opacity: 0.3
+        });
+        this.shadowPlane = new THREE.Mesh(shadowPlaneGeometry, shadowPlaneMaterial);
+        this.shadowPlane.receiveShadow = true;
+        this.shadowPlane.rotation.x = -Math.PI / 2;
+        this.shadowPlane.position.y = 0.1;
+        this.body.add(this.shadowPlane);
+
+        // 간단한 스폰 위치 설정
         const spawnPosition = new THREE.Vector3(
-            (Math.random() - 0.5) * (MAP_SIZE * 0.8),
-            TANK_HEIGHT,
+            (Math.random() - 0.5) * (MAP_SIZE * 0.8), // MAP_SIZE의 80%만 사용
+            TANK_HEIGHT, // 고정된 높이 사용
             (Math.random() - 0.5) * (MAP_SIZE * 0.8)
         );
         
         this.body.position.copy(spawnPosition);
 
+        // 폭발 이펙트 메서드 추가
+        this.createExplosionEffect = (scene, position) => {
+            // 폭발 파티클
+            for (let i = 0; i < 15; i++) {
+                const size = Math.random() * 0.2 + 0.1;
+                const geometry = new THREE.SphereGeometry(size);
+                const material = new THREE.MeshBasicMaterial({
+                    color: Math.random() < 0.5 ? 0xff4500 : 0xff8c00
+                });
+                const particle = new THREE.Mesh(geometry, material);
+                particle.position.copy(position);
+
+                const speed = Math.random() * 0.3 + 0.2;
+                const angle = Math.random() * Math.PI * 2;
+                const elevation = Math.random() * Math.PI - Math.PI / 2;
+
+                particle.velocity = new THREE.Vector3(
+                    Math.cos(angle) * Math.cos(elevation) * speed,
+                    Math.sin(elevation) * speed,
+                    Math.sin(angle) * Math.cos(elevation) * speed
+                );
+
+                particle.gravity = -0.01;
+                particle.life = Math.random() * 20 + 20;
+                particle.fadeRate = 1 / particle.life;
+
+                scene.add(particle);
+                window.gameInstance.particles.push({
+                    mesh: particle,
+                    velocity: particle.velocity,
+                    gravity: particle.gravity,
+                    life: particle.life,
+                    fadeRate: particle.fadeRate
+                });
+            }
+
+            // 충돌 사운드 재생
+            const explosionSound = new Audio('sounds/explosion.ogg');
+            explosionSound.volume = 0.3;
+            explosionSound.play();
+        };
+
         scene.add(this.body);
         this.isLoaded = true;
         this.updateAmmoDisplay();
@@ -608,7 +645,6 @@ class Enemy {
             this.mesh = result.scene;
             this.mesh.position.copy(this.position);
             this.mesh.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
-            this.mesh.position.y = 1.5; // 적 탱크도 같은 높이로 조정
             
             this.mesh.traverse((child) => {
                 if (child.isMesh) {
@@ -919,8 +955,6 @@ class Game {
         this.enemyLabels = new Map(); // 적 라벨을 추적하기 위한 Map 추가
         this.raycaster = new THREE.Raycaster();
         this.crosshair = document.getElementById('crosshair');
-        // 성능 관련 설정 추가
-        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 픽셀 비율 제한
         document.getElementById('gameContainer').appendChild(this.renderer.domElement);
         
 
@@ -966,7 +1000,7 @@ class Game {
         
         // 렌더러 설정
         this.renderer.shadowMap.enabled = true;
-        this.renderer.shadowMap.type = THREE.PCFShadowMap; // PCFSoftShadowMap에서 변경
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
         this.renderer.setPixelRatio(window.devicePixelRatio);
         
         // 카메라 초기 설정
@@ -1009,13 +1043,13 @@ class Game {
         // 기본 씬 설정
         this.setupScene();
         
-        // 안개 효과 (도시 환경에 맞게 조정)
-        this.scene.fog = new THREE.FogExp2(0x888888, 0.002);
-        this.scene.background = new THREE.Color(0x888888);
+        // 안개 효과
+        this.scene.fog = new THREE.FogExp2(0x87CEEB, 0.0008);
+        this.scene.background = new THREE.Color(0x87CEEB);
 
         // 조명 설정
         // 주변광
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // 도시 환경을 위해 밝기 증가
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
         this.scene.add(ambientLight);
 
         // 메인 태양광
@@ -1024,8 +1058,8 @@ class Game {
         mainLight.castShadow = true;
 
         // 그림자 설정
-        mainLight.shadow.mapSize.width = 2048;  // 4096에서 축소
-        mainLight.shadow.mapSize.height = 2048;
+        mainLight.shadow.mapSize.width = 4096;
+        mainLight.shadow.mapSize.height = 4096;
         mainLight.shadow.camera.near = 0.5;
         mainLight.shadow.camera.far = MAP_SIZE * 2;
         mainLight.shadow.camera.left = -MAP_SIZE;
@@ -1038,34 +1072,52 @@ class Game {
 
         this.scene.add(mainLight);
 
-        // 보조 조명 (도시 환경에 맞게 조정)
-        const secondaryLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        // 보조 태양광
+        const secondaryLight = new THREE.DirectionalLight(0xffffff, 0.3);
         secondaryLight.position.set(-50, 50, -50);
         this.scene.add(secondaryLight);
 
-        // 도시 맵 로드
-        try {
-    const cityMap = await this.loader.loadAsync('/models/map.glb');
-    cityMap.scene.scale.set(3, 3, 3); // 스케일을 3배로 증가
-    cityMap.scene.traverse((child) => {
-        if (child.isMesh) {
-            child.castShadow = true;
-            child.receiveShadow = true;
-            child.material.needsUpdate = true;
-            
-            // 충돌 처리를 위해 obstacles 배열에 추가
-            if (child.geometry) {
-                // 스케일이 적용된 상태로 충돌 박스 생성
-                child.geometry.computeBoundingBox();
-                this.obstacles.push(child);
-            }
+        // 환경광
+        const hemisphereLight = new THREE.HemisphereLight(
+            0x87CEEB,
+            0xFFE87C,
+            0.3
+        );
+        this.scene.add(hemisphereLight);
+        // 지형 생성
+        const groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100);
+        const groundMaterial = new THREE.MeshStandardMaterial({
+            color: 0xD2B48C,
+            roughness: 0.8,
+            metalness: 0.2,
+            envMapIntensity: 1.0
+        });
+        
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+        
+        // 지형 높이 설정
+        const vertices = ground.geometry.attributes.position.array;
+        for (let i = 0; i < vertices.length; i += 3) {
+            vertices[i + 2] = 0;  // 모든 높이를 0으로 설정
         }
-    });
-    this.scene.add(cityMap.scene);
-} catch (error) {
-    console.error('Error loading city map:', error);
-}
-
+        
+        ground.geometry.attributes.position.needsUpdate = true;
+        ground.geometry.computeVertexNormals();
+        this.ground = ground;
+        this.scene.add(ground);
+        
+        // 격자 효과 추가
+        const gridHelper = new THREE.GridHelper(MAP_SIZE, 50, 0x000000, 0x000000);
+        gridHelper.material.opacity = 0.1;
+        gridHelper.material.transparent = true;
+        gridHelper.position.y = 0.1;
+        this.scene.add(gridHelper);
+        
+        // 사막 장식 추가
+        await this.addDesertDecorations();
+        
         // 탱크 초기화
         await this.tank.initialize(this.scene, this.loader);
         if (!this.tank.isLoaded) {
@@ -1111,11 +1163,11 @@ class Game {
         this.spawnEnemies();
         this.startGameTimer();
         
-    } catch (error) {
-        console.error('Game initialization error:', error);
-        this.handleLoadingError();
-    }
-}
+        } catch (error) {
+            console.error('Game initialization error:', error);
+            this.handleLoadingError();
+        }
+      }
 
     // 레이더 업데이트 메서드 추가
     updateRadar() {