Update game.js

game.js

@@ -744,6 +744,8 @@ class Game {
         this.renderer = new THREE.WebGLRenderer({ antialias: true });
         this.renderer.setSize(window.innerWidth, window.innerHeight);
         this.renderer.shadowMap.enabled = true;
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 부드러운 그림자
+        this.renderer.outputEncoding = THREE.sRGBEncoding;     // 더 정확한 색상 표현
         document.getElementById('gameContainer').appendChild(this.renderer.domElement);
         
 
@@ -781,163 +783,188 @@ class Game {
     }
 
       async initialize() {
-        try {
-          // 시작 사운드 재생
+    try {
+        // 시작 사운드 재생
         const startSounds = ['sounds/start1.ogg', 'sounds/start2.ogg', 'sounds/start3.ogg'];
         const randomStartSound = startSounds[Math.floor(Math.random() * startSounds.length)];
         const startAudio = new Audio(randomStartSound);
         startAudio.volume = 0.5;
         startAudio.play();
-        // 안개 효과 제거
-        this.scene.fog = null;
+
+        // 렌더러 설정 개선
+        this.renderer.shadowMap.enabled = true;
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        this.renderer.outputEncoding = THREE.sRGBEncoding;
+
+        // 안개 효과
+        this.scene.fog = new THREE.FogExp2(0x87CEEB, 0.0008);
         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 = 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;
-      
-          // 지형 높이 설정
-          const vertices = ground.geometry.attributes.position.array;
-          const heightScale = 15;
-          const baseFrequency = 0.008;
-          
-          // 평지 영역 정의
-          const flatlandRadius = MAP_SIZE * 0.3; // 평지 영역의 반경
-          const transitionZone = MAP_SIZE * 0.1; // 평지와 언덕 사이의 전환 구역
-      
-          for (let i = 0; i < vertices.length; i += 3) {
-              const x = vertices[i];
-              const y = vertices[i + 1];
-              
-              // 중심점으로부터의 거리 계산
-              const distanceFromCenter = Math.sqrt(x * x + y * y);
-              
-              // 평지 영역이면 높이를 0으로 설정
-              if (distanceFromCenter < flatlandRadius) {
-                  vertices[i + 2] = 0;
-              }
-              // 전환 구역이면 부드럽게 높이 증가
-              else if (distanceFromCenter < flatlandRadius + transitionZone) {
-                  const transitionFactor = (distanceFromCenter - flatlandRadius) / transitionZone;
-                  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 * transitionFactor;
-              }
-              // 언덕 영역
-              else {
-                  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;
-              }
-          }
-      
-          ground.geometry.attributes.position.needsUpdate = true;
-          ground.geometry.computeVertexNormals();
-          this.ground = ground;
-          this.scene.add(ground);
-      
-          // 등고선 효과 (언덕 영역에만 적용)
-          const contourMaterial = new THREE.LineBasicMaterial({
-              color: 0x000000,
-              opacity: 0.15,
-              transparent: true
-          });
-      
-          const contourLines = new THREE.LineSegments(
-              new THREE.EdgesGeometry(groundGeometry),
-              contourMaterial
-          );
-          contourLines.rotation.x = -Math.PI / 2;
-          contourLines.position.y = 0.1;
-          this.scene.add(contourLines);
-      
-          // 격자 효과 (평지 영역에만 적용)
-          const gridHelper = new THREE.GridHelper(flatlandRadius * 2, 50, 0x000000, 0x000000);
-          gridHelper.material.opacity = 0.1;
-          gridHelper.material.transparent = true;
-          gridHelper.position.y = 0.1;
-          this.scene.add(gridHelper);
-      
-          // 사막 장식 추가
-          await this.addDesertDecorations();
-          
-          // 탱크 초기화
-          await this.tank.initialize(this.scene, this.loader);
-          if (!this.tank.isLoaded) {
-              throw new Error('Tank loading failed');
-          }
-      
-          // 스폰 위치 검증 및 재시작 로직 추가
-          const spawnPos = this.findValidSpawnPosition();
-          const heightAtSpawn = this.getHeightAtPosition(spawnPos.x, spawnPos.z);
-          const slopeCheckPoints = [
-              { x: spawnPos.x + 2, z: spawnPos.z },
-              { x: spawnPos.x - 2, z: spawnPos.z },
-              { x: spawnPos.x, z: spawnPos.z + 2 },
-              { x: spawnPos.x, z: spawnPos.z - 2 }
-          ];
-      
-          const slopes = slopeCheckPoints.map(point => {
-              const pointHeight = this.getHeightAtPosition(point.x, point.z);
-              return Math.abs(pointHeight - heightAtSpawn) / 2;
-          });
-      
-          const maxSlope = Math.max(...slopes);
-          if (maxSlope > 0.3) { // 경사가 너무 가파르면
-              location.reload(); // 게임 자동 재시작
-              return;
-          }
-      
-          // 카메라 초기 위치 설정
-          const tankPosition = this.tank.getPosition();
-          this.camera.position.set(
-              tankPosition.x,
-              tankPosition.y + 15,
-              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();
-      }
+        // 주변광 설정
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
+        this.scene.add(ambientLight);
+
+        // 메인 태양광 설정
+        const mainLight = new THREE.DirectionalLight(0xffffff, 1.0);
+        mainLight.position.set(100, 100, 50);
+        mainLight.castShadow = true;
+
+        // 그림자 품질 향상
+        mainLight.shadow.mapSize.width = 2048;
+        mainLight.shadow.mapSize.height = 2048;
+        mainLight.shadow.camera.near = 0.5;
+        mainLight.shadow.camera.far = 500;
+        mainLight.shadow.camera.left = -100;
+        mainLight.shadow.camera.right = 100;
+        mainLight.shadow.camera.top = 100;
+        mainLight.shadow.camera.bottom = -100;
+        mainLight.shadow.bias = -0.001;
+        mainLight.shadow.radius = 2;
+
+        this.scene.add(mainLight);
+
+        // 보조 태양광 추가
+        const secondaryLight = new THREE.DirectionalLight(0xffffff, 0.3);
+        secondaryLight.position.set(-50, 50, -50);
+        this.scene.add(secondaryLight);
+
+        // 환경광 추가
+        const hemisphereLight = new THREE.HemisphereLight(
+            0x87CEEB,  // 하늘색
+            0xFFE87C,  // 따뜻한 노란색
+            0.3
+        );
+        this.scene.add(hemisphereLight);
+
+        // 지형 생성 수정
+        const groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100);
+        const groundMaterial = new THREE.MeshStandardMaterial({
+            color: 0xD2B48C,
+            roughness: 0.8,
+            metalness: 0.2,
+            envMapIntensity: 1.0
+        });
+        
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+
+        // 지형 높이 설정
+        const vertices = ground.geometry.attributes.position.array;
+        const heightScale = 15;
+        const baseFrequency = 0.008;
+        
+        // 평지 영역 정의
+        const flatlandRadius = MAP_SIZE * 0.3;
+        const transitionZone = MAP_SIZE * 0.1;
+
+        for (let i = 0; i < vertices.length; i += 3) {
+            const x = vertices[i];
+            const y = vertices[i + 1];
+            
+            const distanceFromCenter = Math.sqrt(x * x + y * y);
+            
+            if (distanceFromCenter < flatlandRadius) {
+                vertices[i + 2] = 0;
+            }
+            else if (distanceFromCenter < flatlandRadius + transitionZone) {
+                const transitionFactor = (distanceFromCenter - flatlandRadius) / transitionZone;
+                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 * transitionFactor;
+            }
+            else {
+                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;
+            }
+        }
+
+        ground.geometry.attributes.position.needsUpdate = true;
+        ground.geometry.computeVertexNormals();
+        this.ground = ground;
+        this.scene.add(ground);
+
+        // 등고선 효과
+        const contourMaterial = new THREE.LineBasicMaterial({
+            color: 0x000000,
+            opacity: 0.15,
+            transparent: true
+        });
+
+        const contourLines = new THREE.LineSegments(
+            new THREE.EdgesGeometry(groundGeometry),
+            contourMaterial
+        );
+        contourLines.rotation.x = -Math.PI / 2;
+        contourLines.position.y = 0.1;
+        this.scene.add(contourLines);
+
+        // 격자 효과
+        const gridHelper = new THREE.GridHelper(flatlandRadius * 2, 50, 0x000000, 0x000000);
+        gridHelper.material.opacity = 0.1;
+        gridHelper.material.transparent = true;
+        gridHelper.position.y = 0.1;
+        this.scene.add(gridHelper);
+
+        // 사막 장식 추가
+        await this.addDesertDecorations();
+        
+        // 탱크 초기화
+        await this.tank.initialize(this.scene, this.loader);
+        if (!this.tank.isLoaded) {
+            throw new Error('Tank loading failed');
+        }
+
+        // 스폰 위치 검증 및 재시작 로직
+        const spawnPos = this.findValidSpawnPosition();
+        const heightAtSpawn = this.getHeightAtPosition(spawnPos.x, spawnPos.z);
+        const slopeCheckPoints = [
+            { x: spawnPos.x + 2, z: spawnPos.z },
+            { x: spawnPos.x - 2, z: spawnPos.z },
+            { x: spawnPos.x, z: spawnPos.z + 2 },
+            { x: spawnPos.x, z: spawnPos.z - 2 }
+        ];
+
+        const slopes = slopeCheckPoints.map(point => {
+            const pointHeight = this.getHeightAtPosition(point.x, point.z);
+            return Math.abs(pointHeight - heightAtSpawn) / 2;
+        });
+
+        const maxSlope = Math.max(...slopes);
+        if (maxSlope > 0.3) {
+            location.reload();
+            return;
+        }
+
+        // 카메라 초기 위치 설정
+        const tankPosition = this.tank.getPosition();
+        this.camera.position.set(
+            tankPosition.x,
+            tankPosition.y + 15,
+            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();
+    }
 }
 
     // 레이더 업데이트 메서드 추가