Update game.js

game.js

@@ -547,7 +547,7 @@ class Game {
         this.initialize();
     }
 
-    async initialize() {
+   async initialize() {
     try {
         // 안개 효과 제거
         this.scene.fog = null;
@@ -565,81 +565,60 @@ class Game {
         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
+        // ShaderMaterial 정의
+        const terrainShader = new THREE.ShaderMaterial({
+            uniforms: {
+                uHeightScale: { value: 15 }, // 높이 스케일
+                uColor: { value: new THREE.Color(0xD2B48C) }, // 기본 색상
+                uLineColor: { value: new THREE.Color(0x000000) }, // 선 색상
+                uLineFrequency: { value: 5.0 }, // 선 간격
+            },
+            vertexShader: `
+                varying float vHeight;
+                void main() {
+                    vHeight = position.z; // 높이 값 전달
+                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                }
+            `,
+            fragmentShader: `
+                uniform float uHeightScale;
+                uniform vec3 uColor;
+                uniform vec3 uLineColor;
+                uniform float uLineFrequency;
+                varying float vHeight;
+                void main() {
+                    // 등고선 계산
+                    float line = mod(vHeight * uLineFrequency / uHeightScale, 1.0);
+                    vec3 color = mix(uLineColor, uColor, step(0.1, line)); // 선 색상과 기본 색상 혼합
+                    gl_FragColor = vec4(color, 1.0);
+                }
+            `,
         });
-        
-        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+
+        // 지형 생성
+        const groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100);
+        const ground = new THREE.Mesh(groundGeometry, terrainShader);
         ground.rotation.x = -Math.PI / 2;
         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 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);
-
-            // 랜덤 노이즈 추가 (아주 작은 굴곡)
-            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;
+            const z = vertices[i + 1];
+            const height = Math.sin(x * baseFrequency) * Math.cos(z * baseFrequency) * heightScale;
+            vertices[i + 2] = height;
         }
-
         ground.geometry.attributes.position.needsUpdate = true;
         ground.geometry.computeVertexNormals();
-        this.ground = ground;
+
         this.scene.add(ground);
 
         // 사막 장식 ��가
         await this.addDesertDecorations();
-        
+
         // 탱크 초기화
         await this.tank.initialize(this.scene, this.loader);
         if (!this.tank.isLoaded) {
@@ -654,22 +633,22 @@ class Game {
             tankPosition.z - 30
         );
         this.camera.lookAt(tankPosition);
-        
+
         // 로딩 완료
         this.isLoading = false;
         document.getElementById('loading').style.display = 'none';
-        
+
         // 게임 시작
         this.animate();
         this.spawnEnemies();
         this.startGameTimer();
-
     } catch (error) {
         console.error('Game initialization error:', error);
         this.handleLoadingError();
     }
 }
 
+
     // 레이더 업데이트 메서드 추가
     updateRadar() {
         const currentTime = Date.now();