Update game.js

game.js

@@ -1297,10 +1297,7 @@ class Game {
     
     async loadFieldTerrain() {
         try {
-            const fieldTileSize = 1000; // 각 field 타일의 크기
-            const tilesPerSide = Math.ceil(GAME_CONSTANTS.MAP_SIZE / fieldTileSize);
-            
-            // field.glb를 한 번만 로드
+            // field.glb를 한 번만 로드하여 전체 맵 크기로 스케일
             const result = await this.loader.loadAsync('models/field.glb');
             const fieldModel = result.scene;
             
@@ -1308,36 +1305,29 @@ class Game {
             const box = new THREE.Box3().setFromObject(fieldModel);
             const size = box.getSize(new THREE.Vector3());
             
-            // 맵 전체를 채우기 위해 타일 배치
-            for (let x = 0; x < tilesPerSide; x++) {
-                for (let z = 0; z < tilesPerSide; z++) {
-                    const fieldClone = fieldModel.clone();
-                    
-                    // 위치 설정
-                    const posX = (x - tilesPerSide / 2) * fieldTileSize;
-                    const posZ = (z - tilesPerSide / 2) * fieldTileSize;
-                    fieldClone.position.set(posX, 0, posZ);
-                    
-                    // 크기 조정 (필요한 경우)
-                    const scale = fieldTileSize / Math.max(size.x, size.z);
-                    fieldClone.scale.set(scale, scale, scale);
-                    
-                    // 랜덤 회전으로 반복 패턴 방지
-                    fieldClone.rotation.y = Math.floor(Math.random() * 4) * Math.PI / 2;
-                    
-                    // 그림자 설정
-                    fieldClone.traverse((child) => {
-                        if (child.isMesh) {
-                            child.receiveShadow = true;
-                            child.castShadow = true;
-                        }
-                    });
+            // 전체 맵 크기에 맞게 스케일 계산
+            const scaleX = GAME_CONSTANTS.MAP_SIZE / size.x;
+            const scaleZ = GAME_CONSTANTS.MAP_SIZE / size.z;
+            const scale = Math.max(scaleX, scaleZ); // 맵을 완전히 채우도록 더 큰 스케일 사용
+            
+            fieldModel.scale.set(scale, scale, scale);
+            fieldModel.position.set(0, 0, 0);
+            
+            // 그림자 설정
+            fieldModel.traverse((child) => {
+                if (child.isMesh) {
+                    child.receiveShadow = true;
+                    child.castShadow = true;
                     
-                    this.scene.add(fieldClone);
+                    // 지형 머티리얼 개선
+                    if (child.material) {
+                        child.material.side = THREE.DoubleSide;
+                    }
                 }
-            }
+            });
             
-            console.log(`Field terrain loaded: ${tilesPerSide}x${tilesPerSide} tiles`);
+            this.scene.add(fieldModel);
+            console.log(`Field terrain loaded and scaled to ${scale}x`);
             
         } catch (error) {
             console.error('Field terrain loading failed:', error);
@@ -1379,27 +1369,209 @@ class Game {
     }
     
     addAtmosphericEffects() {
-        // 먼 산 실루엣 추가
-        const mountainCount = 20;
-        for (let i = 0; i < mountainCount; i++) {
-            const angle = (i / mountainCount) * Math.PI * 2;
-            const distance = GAME_CONSTANTS.MAP_SIZE * 0.7;
-            
-            const mountainGeometry = new THREE.ConeGeometry(2000 + Math.random() * 1000, 3000 + Math.random() * 2000, 8);
-            const mountainMaterial = new THREE.MeshLambertMaterial({
-                color: 0x4a5d6a,
-                fog: true
+        // 개선된 산 지형 시스템
+        this.createMountainRanges();
+        
+        // 대기 산란 효과
+        this.addAtmosphericScattering();
+    }
+    
+    createMountainRanges() {
+        // 산맥 생성을 위한 설정
+        const mountainRanges = [
+            { 
+                distance: GAME_CONSTANTS.MAP_SIZE * 0.6,
+                count: 25,
+                heightRange: { min: 2000, max: 5000 },
+                widthRange: { min: 1500, max: 3000 },
+                color: 0x5a6b7a
+            },
+            { 
+                distance: GAME_CONSTANTS.MAP_SIZE * 0.8,
+                count: 20,
+                heightRange: { min: 3000, max: 7000 },
+                widthRange: { min: 2000, max: 4000 },
+                color: 0x4a5b6a
+            },
+            { 
+                distance: GAME_CONSTANTS.MAP_SIZE * 1.0,
+                count: 15,
+                heightRange: { min: 4000, max: 9000 },
+                widthRange: { min: 3000, max: 5000 },
+                color: 0x3a4b5a
+            }
+        ];
+        
+        mountainRanges.forEach(range => {
+            for (let i = 0; i < range.count; i++) {
+                const angle = (i / range.count) * Math.PI * 2 + (Math.random() - 0.5) * 0.3;
+                const distance = range.distance + (Math.random() - 0.5) * 1000;
+                
+                // 산 그룹 생성 (여러 봉우리로 구성)
+                const mountainGroup = new THREE.Group();
+                
+                // 메인 봉우리
+                const mainPeakHeight = range.heightRange.min + Math.random() * (range.heightRange.max - range.heightRange.min);
+                const mainPeakWidth = range.widthRange.min + Math.random() * (range.widthRange.max - range.widthRange.min);
+                
+                // 개선된 산 형태 (팔각뿔 대신 더 자연스러운 형태)
+                const mainPeakGeometry = new THREE.ConeGeometry(mainPeakWidth, mainPeakHeight, 12);
+                const vertices = mainPeakGeometry.attributes.position.array;
+                
+                // 정점 변형으로 더 자연스러운 산 형태 만들기
+                for (let j = 0; j < vertices.length; j += 3) {
+                    const x = vertices[j];
+                    const y = vertices[j + 1];
+                    const z = vertices[j + 2];
+                    
+                    // 높이에 따른 랜덤 변형
+                    const heightFactor = (y + mainPeakHeight * 0.5) / mainPeakHeight;
+                    const noise = (Math.random() - 0.5) * mainPeakWidth * 0.3 * (1 - heightFactor);
+                    
+                    vertices[j] += noise;
+                    vertices[j + 2] += noise;
+                }
+                
+                mainPeakGeometry.computeVertexNormals();
+                
+                const mainPeakMaterial = new THREE.MeshLambertMaterial({
+                    color: range.color,
+                    flatShading: true,
+                    fog: true
+                });
+                
+                const mainPeak = new THREE.Mesh(mainPeakGeometry, mainPeakMaterial);
+                mountainGroup.add(mainPeak);
+                
+                // 주변 작은 봉우리들 추가
+                const subPeakCount = 2 + Math.floor(Math.random() * 3);
+                for (let j = 0; j < subPeakCount; j++) {
+                    const subPeakHeight = mainPeakHeight * (0.5 + Math.random() * 0.3);
+                    const subPeakWidth = mainPeakWidth * (0.6 + Math.random() * 0.3);
+                    
+                    const subPeakGeometry = new THREE.ConeGeometry(subPeakWidth, subPeakHeight, 8);
+                    const subPeak = new THREE.Mesh(subPeakGeometry, mainPeakMaterial);
+                    
+                    // 메인 봉우리 주변에 배치
+                    const offsetAngle = (j / subPeakCount) * Math.PI * 2;
+                    const offsetDistance = mainPeakWidth * (0.6 + Math.random() * 0.4);
+                    
+                    subPeak.position.set(
+                        Math.cos(offsetAngle) * offsetDistance,
+                        -mainPeakHeight * 0.3,
+                        Math.sin(offsetAngle) * offsetDistance
+                    );
+                    
+                    mountainGroup.add(subPeak);
+                }
+                
+                // 산 기반부 (더 자연스러운 경사)
+                const baseGeometry = new THREE.CylinderGeometry(
+                    mainPeakWidth * 1.5,
+                    mainPeakWidth * 2.5,
+                    mainPeakHeight * 0.3,
+                    12
+                );
+                const baseMaterial = new THREE.MeshLambertMaterial({
+                    color: new THREE.Color(range.color).multiplyScalar(0.8),
+                    flatShading: true,
+                    fog: true
+                });
+                const base = new THREE.Mesh(baseGeometry, baseMaterial);
+                base.position.y = -mainPeakHeight * 0.35;
+                mountainGroup.add(base);
+                
+                // 산 그룹 위치 설정
+                mountainGroup.position.set(
+                    Math.cos(angle) * distance,
+                    mainPeakHeight * 0.5,
+                    Math.sin(angle) * distance
+                );
+                
+                // 약간의 랜덤 회전
+                mountainGroup.rotation.y = Math.random() * Math.PI;
+                
+                // 거리에 따른 안개 효과를 위한 레이어 설정
+                mountainGroup.layers.set(0);
+                
+                this.scene.add(mountainGroup);
+            }
+        });
+        
+        // 가장 먼 거리에 거대한 산맥 실루엣 추가
+        this.createDistantMountainSilhouette();
+    }
+    
+    createDistantMountainSilhouette() {
+        // 원거리 산맥 실루엣 (2D 평면)
+        const silhouetteDistance = GAME_CONSTANTS.MAP_SIZE * 1.2;
+        const segments = 50;
+        
+        for (let side = 0; side < 4; side++) {
+            const curve = new THREE.CatmullRomCurve3([]);
+            
+            // 산맥 실루엣 곡선 생성
+            for (let i = 0; i <= segments; i++) {
+                const t = i / segments;
+                const x = (t - 0.5) * GAME_CONSTANTS.MAP_SIZE;
+                const baseHeight = 3000;
+                const variation = Math.sin(t * Math.PI * 3) * 2000 + 
+                                Math.sin(t * Math.PI * 7) * 1000 +
+                                Math.sin(t * Math.PI * 13) * 500;
+                const y = baseHeight + variation + Math.random() * 500;
+                
+                curve.points.push(new THREE.Vector3(x, y, 0));
+            }
+            
+            // 실루엣 메시 생성
+            const points = curve.getPoints(100);
+            const shape = new THREE.Shape();
+            
+            shape.moveTo(points[0].x, 0);
+            points.forEach(p => shape.lineTo(p.x, p.y));
+            shape.lineTo(points[points.length - 1].x, 0);
+            shape.lineTo(points[0].x, 0);
+            
+            const silhouetteGeometry = new THREE.ShapeGeometry(shape);
+            const silhouetteMaterial = new THREE.MeshBasicMaterial({
+                color: 0x2a3b4a,
+                side: THREE.DoubleSide,
+                fog: true,
+                transparent: true,
+                opacity: 0.7
             });
             
-            const mountain = new THREE.Mesh(mountainGeometry, mountainMaterial);
-            mountain.position.set(
-                Math.cos(angle) * distance,
-                1500 + Math.random() * 500,
-                Math.sin(angle) * distance
+            const silhouette = new THREE.Mesh(silhouetteGeometry, silhouetteMaterial);
+            
+            // 각 면에 배치
+            const angle = (side / 4) * Math.PI * 2;
+            silhouette.position.set(
+                Math.cos(angle) * silhouetteDistance,
+                0,
+                Math.sin(angle) * silhouetteDistance
             );
-            mountain.rotation.y = Math.random() * Math.PI;
+            silhouette.lookAt(0, 0, 0);
+            
+            this.scene.add(silhouette);
+        }
+    }
+    
+    addAtmosphericScattering() {
+        // 대기 산란 효과를 위한 반투명 구체들
+        const scatteringLayers = 5;
+        for (let i = 0; i < scatteringLayers; i++) {
+            const radius = 20000 + i * 5000;
+            const geometry = new THREE.SphereGeometry(radius, 32, 32);
+            const material = new THREE.MeshBasicMaterial({
+                color: 0x87CEEB,
+                transparent: true,
+                opacity: 0.02,
+                side: THREE.BackSide,
+                depthWrite: false
+            });
             
-            this.scene.add(mountain);
+            const atmosphere = new THREE.Mesh(geometry, material);
+            this.scene.add(atmosphere);
         }
     }