Update game.js

game.js

@@ -1195,17 +1195,19 @@ class Game {
     }
 
     setupScene() {
-        this.scene.background = new THREE.Color(0x87CEEB);
-        this.scene.fog = new THREE.Fog(0x87CEEB, 1000, 30000);
+        // 고급 하늘 설정
+        this.createSkybox();
+        this.scene.fog = new THREE.Fog(0xc0d8ff, 1000, 30000);
         
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        // 개선된 조명 설정
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
         this.scene.add(ambientLight);
         
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+        const directionalLight = new THREE.DirectionalLight(0xffffcc, 1.2);
         directionalLight.position.set(8000, 10000, 8000);
         directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 2048;
-        directionalLight.shadow.mapSize.height = 2048;
+        directionalLight.shadow.mapSize.width = 4096;
+        directionalLight.shadow.mapSize.height = 4096;
         directionalLight.shadow.camera.near = 0.5;
         directionalLight.shadow.camera.far = 20000;
         directionalLight.shadow.camera.left = -10000;
@@ -1214,41 +1216,274 @@ class Game {
         directionalLight.shadow.camera.bottom = -10000;
         this.scene.add(directionalLight);
         
+        // 보조 조명 추가
+        const fillLight = new THREE.DirectionalLight(0x88aaff, 0.4);
+        fillLight.position.set(-5000, 8000, -5000);
+        this.scene.add(fillLight);
+        
+        // 기본 지면 (field.glb 로딩 실패 시 폴백)
         const groundGeometry = new THREE.PlaneGeometry(GAME_CONSTANTS.MAP_SIZE, GAME_CONSTANTS.MAP_SIZE);
         const groundMaterial = new THREE.MeshLambertMaterial({ 
-            color: 0x8FBC8F,
+            color: 0x4a5d23,
             transparent: true,
-            opacity: 0.8
+            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.addClouds();
+        
+        // 대기 효과 추가
+        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 {
+            const fieldTileSize = 1000; // 각 field 타일의 크기
+            const tilesPerSide = Math.ceil(GAME_CONSTANTS.MAP_SIZE / fieldTileSize);
+            
+            // 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());
+            
+            // 맵 전체를 채우기 위해 타일 배치
+            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;
+                        }
+                    });
+                    
+                    this.scene.add(fieldClone);
+                }
+            }
+            
+            console.log(`Field terrain loaded: ${tilesPerSide}x${tilesPerSide} tiles`);
+            
+        } catch (error) {
+            console.error('Field terrain loading failed:', error);
+            // 폴백: 프로시저럴 지형 생성
+            this.createProceduralTerrain();
+        }
+    }
+    
+    createProceduralTerrain() {
+        // field.glb 로딩 실패 시 프로시저럴 지형 생성
+        const segments = 50;
+        const terrainGeometry = new THREE.PlaneGeometry(
+            GAME_CONSTANTS.MAP_SIZE, 
+            GAME_CONSTANTS.MAP_SIZE, 
+            segments, 
+            segments
+        );
+        
+        // 버텍스에 노이즈 추가하여 언덕 효과
+        const vertices = terrainGeometry.attributes.position.array;
+        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;
+        }
+        
+        terrainGeometry.computeVertexNormals();
+        
+        const terrainMaterial = new THREE.MeshLambertMaterial({
+            color: 0x3a5f3a,
+            flatShading: true
+        });
+        
+        const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
+        terrain.rotation.x = -Math.PI / 2;
+        terrain.receiveShadow = true;
+        this.scene.add(terrain);
+    }
+    
+    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
+            });
+            
+            const mountain = new THREE.Mesh(mountainGeometry, mountainMaterial);
+            mountain.position.set(
+                Math.cos(angle) * distance,
+                1500 + Math.random() * 500,
+                Math.sin(angle) * distance
+            );
+            mountain.rotation.y = Math.random() * Math.PI;
+            
+            this.scene.add(mountain);
+        }
     }
 
     addClouds() {
-        const cloudGeometry = new THREE.SphereGeometry(100, 8, 6);
-        const cloudMaterial = new THREE.MeshLambertMaterial({ 
-            color: 0xffffff, 
-            transparent: true, 
-            opacity: 0.5 
+        // 다층 구름 시스템
+        const cloudLayers = [
+            { count: 50, minHeight: 800, maxHeight: 1500, opacity: 0.7, scale: 1.5 },    // 낮은 구름
+            { count: 80, minHeight: 2000, maxHeight: 4000, opacity: 0.5, scale: 2.0 },   // 중간 구름
+            { count: 40, minHeight: 5000, maxHeight: 8000, opacity: 0.3, scale: 3.0 }    // 높은 구름
+        ];
+        
+        cloudLayers.forEach(layer => {
+            for (let i = 0; i < layer.count; i++) {
+                // 구름 그룹 생성 (여러 구체로 구성)
+                const cloudGroup = new THREE.Group();
+                
+                // 구름을 구성하는 구체 개수
+                const sphereCount = 5 + Math.floor(Math.random() * 8);
+                
+                for (let j = 0; j < sphereCount; j++) {
+                    const radius = 50 + Math.random() * 100;
+                    const cloudGeometry = new THREE.SphereGeometry(radius, 8, 6);
+                    const cloudMaterial = new THREE.MeshLambertMaterial({ 
+                        color: 0xffffff, 
+                        transparent: true, 
+                        opacity: layer.opacity * (0.7 + Math.random() * 0.3)
+                    });
+                    
+                    const cloudPart = new THREE.Mesh(cloudGeometry, cloudMaterial);
+                    
+                    // 구름 내 구체들의 위치를 랜덤하게 배치
+                    cloudPart.position.set(
+                        (Math.random() - 0.5) * 200,
+                        (Math.random() - 0.5) * 50,
+                        (Math.random() - 0.5) * 200
+                    );
+                    
+                    cloudGroup.add(cloudPart);
+                }
+                
+                // 구름 그룹 위치 설정
+                cloudGroup.position.set(
+                    (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE,
+                    layer.minHeight + Math.random() * (layer.maxHeight - layer.minHeight),
+                    (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE
+                );
+                
+                // 구름 크기 변화
+                const scale = layer.scale * (0.8 + Math.random() * 0.4);
+                cloudGroup.scale.set(scale, scale * 0.5, scale);
+                
+                // 구름 애니메이션을 위한 속성 추가
+                cloudGroup.userData = {
+                    driftSpeed: (Math.random() - 0.5) * 0.1,
+                    floatSpeed: Math.random() * 0.5 + 0.5,
+                    initialY: cloudGroup.position.y,
+                    time: Math.random() * Math.PI * 2
+                };
+                
+                this.scene.add(cloudGroup);
+                
+                // 구름 배열에 추가 (애니메이션용)
+                if (!this.clouds) this.clouds = [];
+                this.clouds.push(cloudGroup);
+            }
         });
         
-        for (let i = 0; i < 100; i++) {
-            const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
-            cloud.position.set(
+        // 안개 효과를 위한 낮은 구름층 추가
+        for (let i = 0; i < 30; i++) {
+            const fogGeometry = new THREE.BoxGeometry(500, 100, 500);
+            const fogMaterial = new THREE.MeshLambertMaterial({
+                color: 0xffffff,
+                transparent: true,
+                opacity: 0.2
+            });
+            
+            const fog = new THREE.Mesh(fogGeometry, fogMaterial);
+            fog.position.set(
                 (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE,
-                Math.random() * 4000 + 1000,
+                50 + Math.random() * 200,
                 (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE
             );
-            cloud.scale.set(
-                Math.random() * 3 + 1,
-                Math.random() * 2 + 0.5,
-                Math.random() * 3 + 1
-            );
-            this.scene.add(cloud);
+            
+            this.scene.add(fog);
         }
     }
 
@@ -2042,6 +2277,23 @@ class Game {
                 }
             }
             
+            // 구름 애니메이션
+            if (this.clouds) {
+                this.clouds.forEach(cloud => {
+                    cloud.userData.time += deltaTime;
+                    // 좌우 드리프트
+                    cloud.position.x += cloud.userData.driftSpeed;
+                    // 상하 부유
+                    cloud.position.y = cloud.userData.initialY + 
+                        Math.sin(cloud.userData.time * cloud.userData.floatSpeed) * 20;
+                    
+                    // 맵 경계 처리
+                    const mapLimit = GAME_CONSTANTS.MAP_SIZE / 2;
+                    if (cloud.position.x > mapLimit) cloud.position.x = -mapLimit;
+                    if (cloud.position.x < -mapLimit) cloud.position.x = mapLimit;
+                });
+            }
+            
             const targetCameraPos = this.fighter.getCameraPosition();
             const targetCameraTarget = this.fighter.getCameraTarget();