Update game.js

game.js

@@ -549,69 +549,97 @@ class Game {
 
     async initialize() {
     try {
-        // 배경 및 안개 설정
+        // 안개 효과 제거
         this.scene.fog = null;
         this.scene.background = new THREE.Color(0x87CEEB);
 
-        // 주변광 추가
+        // 주변광 설정 - 더 밝게
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
         this.scene.add(ambientLight);
 
-        // 태양광(직사광) 추가 및 그림자 설정
+        // 태양광 설정
         const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
         directionalLight.position.set(100, 100, 50);
-        directionalLight.castShadow = true; // 그림자 활성화
-        directionalLight.shadow.mapSize.width = 2048; // 그림자 해상도 증가
-        directionalLight.shadow.mapSize.height = 2048;
-        directionalLight.shadow.camera.near = 0.5;
-        directionalLight.shadow.camera.far = 500;
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 1024;
+        directionalLight.shadow.mapSize.height = 1024;
         this.scene.add(directionalLight);
 
-        // 지형 생성
+        // 지형 생성 수정
         const groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100);
         const groundMaterial = new THREE.MeshStandardMaterial({
             color: 0xD2B48C,
             roughness: 0.8,
             metalness: 0.2,
+            wireframe: false
         });
+        
         const ground = new THREE.Mesh(groundGeometry, groundMaterial);
         ground.rotation.x = -Math.PI / 2;
-        ground.receiveShadow = true; // 지형이 그림자를 받도록 설정
-        this.scene.add(ground);
+        ground.receiveShadow = true;
+        
+        // 격자 효과를 위한 라인 추가
+        const gridSize = 50; // 격자 크기
+        const gridHelper = new THREE.GridHelper(MAP_SIZE, gridSize, 0x000000, 0x000000);
+        gridHelper.material.opacity = 0.1;
+        gridHelper.material.transparent = true;
+        gridHelper.position.y = 0.1; // 지면보다 약간 위에 배치
+        this.scene.add(gridHelper);
+        
+        // 등고선 효과를 위한 지형 컨투어
+        const contourLines = new THREE.LineSegments(
+            new THREE.EdgesGeometry(groundGeometry),
+            new THREE.LineBasicMaterial({ 
+                color: 0x000000, 
+                opacity: 0.15, 
+                transparent: true 
+            })
+        );
+        contourLines.rotation.x = -Math.PI / 2;
+        contourLines.position.y = 0.1;
+        this.scene.add(contourLines);
 
-        // 지형의 높이 수정 (노이즈 추가)
+        // 더 다양한 지형 생성
         const vertices = ground.geometry.attributes.position.array;
         const heightScale = 15; // 높이 스케일
         const baseFrequency = 0.008; // 기본 주파수
+        
         for (let i = 0; i < vertices.length; i += 3) {
             const x = vertices[i];
-            const z = vertices[i + 1];
-            let height = Math.sin(x * baseFrequency) * Math.cos(z * baseFrequency) * heightScale;
-
-            // 추가적인 굴곡 및 노이즈
-            height += Math.sin(x * baseFrequency * 2) * Math.cos(z * baseFrequency * 2) * (heightScale * 0.5);
-            height += Math.random() * heightScale * 0.1;
+            const y = vertices[i + 1];
+            
+            // 여러 주파수를 조합한 지형 생성
+            let height = 0;
+            
+            // 큰 언덕 (기본 지형)
+            height += Math.sin(x * baseFrequency) * Math.cos(y * baseFrequency) * heightScale;
+            
+            // 중간 크기 지형
+            height += Math.sin(x * baseFrequency * 2) * Math.cos(y * baseFrequency * 2) * (heightScale * 0.5);
+            
+            // 작은 굴곡
+            height += Math.sin(x * baseFrequency * 4) * Math.cos(y * baseFrequency * 4) * (heightScale * 0.25);
 
-            vertices[i + 2] = height;
+            // 랜덤 노이즈 추가 (아주 작은 굴곡)
+            const noise = (Math.random() - 0.5) * heightScale * 0.1;
+            height += noise;
+            
+            // 맵 가장자리로 갈수록 높이를 부드럽게 감소
+            const distanceFromCenter = Math.sqrt(x * x + y * y) / (MAP_SIZE * 0.5);
+            const edgeFactor = Math.pow(Math.max(0, 1 - distanceFromCenter), 2); // 부드러운 감쇠
+            
+            // 최종 높이 설정
+            vertices[i + 2] = height * edgeFactor;
         }
+
         ground.geometry.attributes.position.needsUpdate = true;
         ground.geometry.computeVertexNormals();
-
-        // 지형 컨투어 라인 생성
-        const edgesGeometry = new THREE.EdgesGeometry(ground.geometry);
-        const lineMaterial = new THREE.LineBasicMaterial({
-            color: 0x000000,
-            linewidth: 1,
-            transparent: true,
-            opacity: 0.5,
-        });
-        const contourLines = new THREE.LineSegments(edgesGeometry, lineMaterial);
-        contourLines.rotation.x = -Math.PI / 2;
-        this.scene.add(contourLines);
+        this.ground = ground;
+        this.scene.add(ground);
 
         // 사막 장식 추가
         await this.addDesertDecorations();
-
+        
         // 탱크 초기화
         await this.tank.initialize(this.scene, this.loader);
         if (!this.tank.isLoaded) {
@@ -626,11 +654,11 @@ class Game {
             tankPosition.z - 30
         );
         this.camera.lookAt(tankPosition);
-
+        
         // 로딩 완료
         this.isLoading = false;
         document.getElementById('loading').style.display = 'none';
-
+        
         // 게임 시작
         this.animate();
         this.spawnEnemies();