Update game.js

game.js

@@ -1195,46 +1195,32 @@ class Game {
     }
 
     setupScene() {
-        // 고급 하늘 설정
-        this.createSkybox();
-        this.scene.fog = new THREE.Fog(0xc0d8ff, 1000, 30000);
+        // 기본 하늘 설정
+        this.scene.background = new THREE.Color(0x87CEEB);
+        this.scene.fog = new THREE.Fog(0x87CEEB, 1000, 30000);
         
-        // 개선된 조명 설정
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+        // 기본 조명 설정
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
         this.scene.add(ambientLight);
         
-        const directionalLight = new THREE.DirectionalLight(0xffffcc, 1.2);
-        directionalLight.position.set(8000, 10000, 8000);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+        directionalLight.position.set(5000, 8000, 5000);
         directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 4096;
-        directionalLight.shadow.mapSize.height = 4096;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
         directionalLight.shadow.camera.near = 0.5;
-        directionalLight.shadow.camera.far = 20000;
-        directionalLight.shadow.camera.left = -10000;
-        directionalLight.shadow.camera.right = 10000;
-        directionalLight.shadow.camera.top = 10000;
-        directionalLight.shadow.camera.bottom = -10000;
+        directionalLight.shadow.camera.far = 15000;
+        directionalLight.shadow.camera.left = -8000;
+        directionalLight.shadow.camera.right = 8000;
+        directionalLight.shadow.camera.top = 8000;
+        directionalLight.shadow.camera.bottom = -8000;
         this.scene.add(directionalLight);
         
-        // 보조 조명 추가
-        const fillLight = new THREE.DirectionalLight(0x88aaff, 0.4);
-        fillLight.position.set(-5000, 8000, -5000);
-        this.scene.add(fillLight);
+        // 프로시저럴 지형 생성
+        this.createProceduralTerrain();
         
-        // 기본 지면 (field.glb 로딩 실패 시 폴백)
-        const groundGeometry = new THREE.PlaneGeometry(GAME_CONSTANTS.MAP_SIZE, GAME_CONSTANTS.MAP_SIZE);
-        const groundMaterial = new THREE.MeshLambertMaterial({ 
-            color: 0x4a5d23,
-            transparent: true,
-            opacity: 0.9
-        });
-        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-        ground.rotation.x = -Math.PI / 2;
-        ground.receiveShadow = true;
-        this.scene.add(ground);
-        
-        // field.glb 모델로 지형 채우기
-        this.loadFieldTerrain();
+        // 초목 배치
+        this.addVegetation();
         
         // 개선된 구름 추가
         this.addClouds();
@@ -1243,102 +1229,9 @@ class Game {
         this.addAtmosphericEffects();
     }
     
-    createSkybox() {
-        // 그라데이션 하늘 생성
-        const skyGeo = new THREE.SphereGeometry(40000, 32, 32);
-        const skyMat = new THREE.ShaderMaterial({
-            uniforms: {
-                topColor: { value: new THREE.Color(0x0077ff) },
-                bottomColor: { value: new THREE.Color(0xffffff) },
-                offset: { value: 33 },
-                exponent: { value: 0.6 }
-            },
-            vertexShader: `
-                varying vec3 vWorldPosition;
-                void main() {
-                    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-                    vWorldPosition = worldPosition.xyz;
-                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-                }
-            `,
-            fragmentShader: `
-                uniform vec3 topColor;
-                uniform vec3 bottomColor;
-                uniform float offset;
-                uniform float exponent;
-                varying vec3 vWorldPosition;
-                void main() {
-                    float h = normalize(vWorldPosition + offset).y;
-                    gl_FragColor = vec4(mix(bottomColor, topColor, max(pow(max(h, 0.0), exponent), 0.0)), 1.0);
-                }
-            `,
-            side: THREE.BackSide
-        });
-        
-        const sky = new THREE.Mesh(skyGeo, skyMat);
-        this.scene.add(sky);
-        
-        // 태양 추가
-        const sunGeometry = new THREE.SphereGeometry(800, 32, 32);
-        const sunMaterial = new THREE.MeshBasicMaterial({
-            color: 0xffffaa,
-            emissive: 0xffffaa,
-            emissiveIntensity: 2
-        });
-        const sun = new THREE.Mesh(sunGeometry, sunMaterial);
-        sun.position.set(10000, 15000, 10000);
-        this.scene.add(sun);
-        
-        // 태양 광선 효과
-        const sunlight = new THREE.PointLight(0xffffaa, 0.5, 30000);
-        sunlight.position.copy(sun.position);
-        this.scene.add(sunlight);
-    }
-    
-    async loadFieldTerrain() {
-        try {
-            // field.glb를 한 번만 로드하여 전체 맵 크기로 스케일
-            const result = await this.loader.loadAsync('models/field.glb');
-            const fieldModel = result.scene;
-            
-            // 모델의 실제 크기 계산
-            const box = new THREE.Box3().setFromObject(fieldModel);
-            const size = box.getSize(new THREE.Vector3());
-            
-            // 전체 맵 크기에 맞게 스케일 계산
-            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;
-                    
-                    // 지형 머티리얼 개선
-                    if (child.material) {
-                        child.material.side = THREE.DoubleSide;
-                    }
-                }
-            });
-            
-            this.scene.add(fieldModel);
-            console.log(`Field terrain loaded and scaled to ${scale}x`);
-            
-        } catch (error) {
-            console.error('Field terrain loading failed:', error);
-            // 폴백: 프로시저럴 지형 생성
-            this.createProceduralTerrain();
-        }
-    }
-    
     createProceduralTerrain() {
-        // field.glb 로딩 실패 시 프로시저럴 지형 생성
-        const segments = 50;
+        // 지형 생성을 위한 세그먼트
+        const segments = 100;
         const terrainGeometry = new THREE.PlaneGeometry(
             GAME_CONSTANTS.MAP_SIZE, 
             GAME_CONSTANTS.MAP_SIZE, 
@@ -1348,32 +1241,319 @@ class Game {
         
         // 버텍스에 노이즈 추가하여 언덕 효과
         const vertices = terrainGeometry.attributes.position.array;
+        const heightMap = [];
+        
         for (let i = 0; i < vertices.length; i += 3) {
             const x = vertices[i];
             const y = vertices[i + 1];
-            const distance = Math.sqrt(x * x + y * y);
-            vertices[i + 2] = Math.sin(distance * 0.0003) * 50 + Math.random() * 20;
+            
+            // 다중 스케일 노이즈로 자연스러운 지형 생성
+            let height = 0;
+            
+            // 큰 스케일 언덕 (주요 지형)
+            height += Math.sin(x * 0.0001) * Math.cos(y * 0.0001) * 300;
+            
+            // 중간 스케일 언덕
+            height += Math.sin(x * 0.0003) * Math.cos(y * 0.0003) * 150;
+            
+            // 작은 스케일 디테일
+            height += Math.sin(x * 0.001) * Math.cos(y * 0.001) * 50;
+            
+            // 랜덤 노이즈
+            height += (Math.random() - 0.5) * 20;
+            
+            // 맵 가장자리로 갈수록 높이 감소 (경계 부드럽게)
+            const distanceFromCenter = Math.sqrt(x * x + y * y);
+            const maxDistance = GAME_CONSTANTS.MAP_SIZE * 0.4;
+            if (distanceFromCenter > maxDistance) {
+                const fade = 1 - (distanceFromCenter - maxDistance) / (GAME_CONSTANTS.MAP_SIZE * 0.1);
+                height *= Math.max(0, fade);
+            }
+            
+            vertices[i + 2] = height;
+            heightMap.push(height);
         }
         
         terrainGeometry.computeVertexNormals();
         
+        // 지형 머티리얼 - 높이에 따른 색상 변화
         const terrainMaterial = new THREE.MeshLambertMaterial({
-            color: 0x3a5f3a,
-            flatShading: true
+            vertexColors: true,
+            flatShading: false
         });
         
+        // 높이에 따른 색상 설정
+        const colors = [];
+        for (let i = 0; i < heightMap.length; i++) {
+            const height = heightMap[i];
+            let color;
+            
+            if (height < 50) {
+                // 낮은 지역 - 진한 초록
+                color = new THREE.Color(0x2d4a2b);
+            } else if (height < 150) {
+                // 중간 지역 - 일반 초록
+                color = new THREE.Color(0x3a5f3a);
+            } else if (height < 250) {
+                // 높은 지역 - 밝은 초록/갈색
+                color = new THREE.Color(0x4a6741);
+            } else {
+                // 매우 높은 지역 - 갈색/회색
+                color = new THREE.Color(0x5a5a4a);
+            }
+            
+            // 약간의 변화 추가
+            const variation = 0.1;
+            color.r += (Math.random() - 0.5) * variation;
+            color.g += (Math.random() - 0.5) * variation;
+            color.b += (Math.random() - 0.5) * variation;
+            
+            colors.push(color.r, color.g, color.b);
+        }
+        
+        terrainGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+        
         const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
         terrain.rotation.x = -Math.PI / 2;
         terrain.receiveShadow = true;
+        
+        // 지형 정보 저장 (초목 배치용)
+        this.terrain = terrain;
+        this.terrainGeometry = terrainGeometry;
+        this.heightMap = heightMap;
+        
         this.scene.add(terrain);
     }
     
+    addVegetation() {
+        if (!this.terrain || !this.heightMap) return;
+        
+        // 나무 종류별 설정
+        const treeTypes = [
+            {
+                name: 'pine',
+                count: 500,
+                minHeight: 50,
+                maxHeight: 200,
+                trunkColor: 0x4a3c28,
+                leavesColor: 0x1a4d1a,
+                trunkHeight: 20,
+                trunkRadius: 1.5,
+                leavesRadius: 8,
+                leavesHeight: 25
+            },
+            {
+                name: 'oak',
+                count: 300,
+                minHeight: 0,
+                maxHeight: 150,
+                trunkColor: 0x5c4033,
+                leavesColor: 0x2d5016,
+                trunkHeight: 15,
+                trunkRadius: 2,
+                leavesRadius: 12,
+                leavesHeight: 20
+            },
+            {
+                name: 'bush',
+                count: 800,
+                minHeight: 0,
+                maxHeight: 100,
+                trunkColor: 0x3a2f1a,
+                leavesColor: 0x3a5f3a,
+                trunkHeight: 3,
+                trunkRadius: 0.5,
+                leavesRadius: 5,
+                leavesHeight: 6
+            }
+        ];
+        
+        // 각 나무 타입별로 배치
+        treeTypes.forEach(treeType => {
+            for (let i = 0; i < treeType.count; i++) {
+                // 랜덤 위치 선택
+                const x = (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE * 0.8;
+                const z = (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE * 0.8;
+                
+                // 해당 위치의 지형 높이 계산
+                const terrainHeight = this.getTerrainHeightAt(x, z);
+                
+                // 높이 제한 확인
+                if (terrainHeight < treeType.minHeight || terrainHeight > treeType.maxHeight) {
+                    continue;
+                }
+                
+                // 나무 그룹 생성
+                const tree = new THREE.Group();
+                
+                // 몸통
+                const trunkGeometry = new THREE.CylinderGeometry(
+                    treeType.trunkRadius * 0.8,
+                    treeType.trunkRadius,
+                    treeType.trunkHeight,
+                    8
+                );
+                const trunkMaterial = new THREE.MeshLambertMaterial({ 
+                    color: treeType.trunkColor 
+                });
+                const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
+                trunk.position.y = treeType.trunkHeight / 2;
+                trunk.castShadow = true;
+                trunk.receiveShadow = true;
+                tree.add(trunk);
+                
+                // 잎 (구형 또는 원뿔형)
+                let leavesGeometry;
+                if (treeType.name === 'pine') {
+                    // 소나무는 원뿔형
+                    leavesGeometry = new THREE.ConeGeometry(
+                        treeType.leavesRadius,
+                        treeType.leavesHeight,
+                        8
+                    );
+                } else {
+                    // 다른 나무는 구형
+                    leavesGeometry = new THREE.SphereGeometry(
+                        treeType.leavesRadius,
+                        8,
+                        6
+                    );
+                }
+                
+                const leavesMaterial = new THREE.MeshLambertMaterial({ 
+                    color: treeType.leavesColor 
+                });
+                const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
+                leaves.position.y = treeType.trunkHeight + treeType.leavesHeight / 2;
+                leaves.castShadow = true;
+                leaves.receiveShadow = true;
+                tree.add(leaves);
+                
+                // 나무 위치 및 크기 설정
+                tree.position.set(x, terrainHeight, z);
+                
+                // 크기 변화
+                const scale = 0.7 + Math.random() * 0.6;
+                tree.scale.set(scale, scale, scale);
+                
+                // 랜덤 회전
+                tree.rotation.y = Math.random() * Math.PI * 2;
+                
+                this.scene.add(tree);
+            }
+        });
+        
+        // 바위 추가
+        this.addRocks();
+        
+        // 풀 추가
+        this.addGrass();
+    }
+    
+    addRocks() {
+        const rockCount = 200;
+        
+        for (let i = 0; i < rockCount; i++) {
+            const x = (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE * 0.9;
+            const z = (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE * 0.9;
+            const terrainHeight = this.getTerrainHeightAt(x, z);
+            
+            // 바위 생성
+            const rockSize = 3 + Math.random() * 10;
+            const rockGeometry = new THREE.DodecahedronGeometry(rockSize, 0);
+            
+            // 바위 형태 변형
+            const vertices = rockGeometry.attributes.position.array;
+            for (let j = 0; j < vertices.length; j += 3) {
+                vertices[j] += (Math.random() - 0.5) * rockSize * 0.3;
+                vertices[j + 1] += (Math.random() - 0.5) * rockSize * 0.3;
+                vertices[j + 2] += (Math.random() - 0.5) * rockSize * 0.3;
+            }
+            rockGeometry.computeVertexNormals();
+            
+            const rockMaterial = new THREE.MeshLambertMaterial({
+                color: new THREE.Color(0.4 + Math.random() * 0.2, 0.4 + Math.random() * 0.2, 0.4 + Math.random() * 0.2),
+                flatShading: true
+            });
+            
+            const rock = new THREE.Mesh(rockGeometry, rockMaterial);
+            rock.position.set(x, terrainHeight + rockSize * 0.3, z);
+            rock.rotation.set(
+                Math.random() * Math.PI,
+                Math.random() * Math.PI,
+                Math.random() * Math.PI
+            );
+            rock.castShadow = true;
+            rock.receiveShadow = true;
+            
+            this.scene.add(rock);
+        }
+    }
+    
+    addGrass() {
+        // 풀 패치 생성
+        const grassPatchCount = 100;
+        
+        for (let i = 0; i < grassPatchCount; i++) {
+            const centerX = (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE * 0.8;
+            const centerZ = (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE * 0.8;
+            const terrainHeight = this.getTerrainHeightAt(centerX, centerZ);
+            
+            // 낮은 지역에만 풀 배치
+            if (terrainHeight > 100) continue;
+            
+            const grassGroup = new THREE.Group();
+            const grassCountInPatch = 20 + Math.floor(Math.random() * 30);
+            
+            for (let j = 0; j < grassCountInPatch; j++) {
+                const offsetX = (Math.random() - 0.5) * 50;
+                const offsetZ = (Math.random() - 0.5) * 50;
+                
+                // 간단한 풀 블레이드
+                const grassHeight = 2 + Math.random() * 3;
+                const grassGeometry = new THREE.PlaneGeometry(0.5, grassHeight);
+                grassGeometry.translate(0, grassHeight / 2, 0);
+                
+                const grassMaterial = new THREE.MeshLambertMaterial({
+                    color: new THREE.Color(0.1 + Math.random() * 0.1, 0.4 + Math.random() * 0.2, 0.1),
+                    side: THREE.DoubleSide
+                });
+                
+                const grass = new THREE.Mesh(grassGeometry, grassMaterial);
+                grass.position.set(offsetX, 0, offsetZ);
+                grass.rotation.y = Math.random() * Math.PI;
+                
+                grassGroup.add(grass);
+            }
+            
+            grassGroup.position.set(centerX, terrainHeight, centerZ);
+            this.scene.add(grassGroup);
+        }
+    }
+    
+    getTerrainHeightAt(x, z) {
+        if (!this.terrainGeometry) return 0;
+        
+        // 지형 좌표를 정규화
+        const normalizedX = (x + GAME_CONSTANTS.MAP_SIZE / 2) / GAME_CONSTANTS.MAP_SIZE;
+        const normalizedZ = (z + GAME_CONSTANTS.MAP_SIZE / 2) / GAME_CONSTANTS.MAP_SIZE;
+        
+        // 가장 가까운 버텍스 인덱스 찾기
+        const segments = Math.sqrt(this.terrainGeometry.attributes.position.count);
+        const gridX = Math.floor(normalizedX * (segments - 1));
+        const gridZ = Math.floor(normalizedZ * (segments - 1));
+        
+        if (gridX < 0 || gridX >= segments - 1 || gridZ < 0 || gridZ >= segments - 1) {
+            return 0;
+        }
+        
+        const index = gridZ * segments + gridX;
+        return this.heightMap[index] || 0;
+    }
+    
     addAtmosphericEffects() {
         // 개선된 산 지형 시스템
         this.createMountainRanges();
-        
-        // 대기 산란 효과
-        this.addAtmosphericScattering();
     }
     
     createMountainRanges() {
@@ -1491,7 +1671,7 @@ class Game {
                 // 약간의 랜덤 회전
                 mountainGroup.rotation.y = Math.random() * Math.PI;
                 
-                // 거리에 따른 안개 효과를 위한 레이어 설정
+                // 거리별 색상: 멀리 있는 산일수록 더 푸른색으로 보이도록 설정
                 mountainGroup.layers.set(0);
                 
                 this.scene.add(mountainGroup);
@@ -1555,25 +1735,6 @@ class Game {
             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
-            });
-            
-            const atmosphere = new THREE.Mesh(geometry, material);
-            this.scene.add(atmosphere);
-        }
-    }
 
     addClouds() {
         // 다층 구름 시스템