Update game.js

game.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 
 // 게임 상수
@@ -117,7 +118,7 @@ async function init() {
         const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
         dirLight.position.set(100, 100, 50);
         dirLight.castShadow = true;
-        dirLight.shadow.mapSize.width = 1024;  // 그림자 해상도 감소
+        dirLight.shadow.mapSize.width = 1024;
         dirLight.shadow.mapSize.height = 1024;
         scene.add(dirLight);
 
@@ -127,6 +128,9 @@ async function init() {
         // 이벤트 리스너
         setupEventListeners();
 
+        // 모델 테스트 먼저 실행
+        await testModelLoading();
+        
         // 게임 요소 초기화
         await Promise.all([
             createTerrain(),
@@ -134,10 +138,15 @@ async function init() {
         ]);
 
         document.getElementById('loading').style.display = 'none';
-        gameLoop();
+        console.log('Game initialized successfully');
     } catch (error) {
         console.error('Initialization error:', error);
-        document.getElementById('loading').textContent = 'Error loading game. Please refresh.';
+        document.getElementById('loading').innerHTML = `
+            <div class="loading-text" style="color: #ff0000;">
+                Error loading models. Please check console and file paths.
+            </div>
+        `;
+        throw error;
     }
 }
 
@@ -148,10 +157,22 @@ function setupEventListeners() {
     window.addEventListener('resize', onWindowResize);
 }
 
+async function testModelLoading() {
+    const loader = new GLTFLoader();
+    try {
+        const modelPath = 'models/enemy1.glb';
+        console.log('Testing model loading:', modelPath);
+        const gltf = await loader.loadAsync(modelPath);
+        console.log('Test model loaded successfully:', gltf);
+    } catch (error) {
+        console.error('Test model loading failed:', error);
+        throw error;
+    }
+}
+
 function createTerrain() {
     return new Promise((resolve) => {
-        // 최적화된 지형 생성
-        const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100); // 해상도 감소
+        const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100);
         const material = new THREE.MeshStandardMaterial({
             color: 0xD2B48C,
             roughness: 0.8,
@@ -171,7 +192,6 @@ function createTerrain() {
         terrain.receiveShadow = true;
         scene.add(terrain);
 
-        // 최적화된 장애물 추가
         addObstacles();
         resolve();
     });
@@ -184,7 +204,6 @@ function addObstacles() {
         roughness: 0.9
     });
 
-    // 장애물 수 감소
     for (let i = 0; i < OBSTACLE_COUNT; i++) {
         const rock = new THREE.Mesh(rockGeometry, rockMaterial);
         rock.position.set(
@@ -203,7 +222,9 @@ function addObstacles() {
     }
 }
 
-function createEnemies() {
+async function createEnemies() {
+    console.log('Creating enemies...');
+    const loader = new GLTFLoader();
     const enemyCount = Math.min(3 + currentStage, ENEMY_COUNT_MAX);
     
     for (let i = 0; i < enemyCount; i++) {
@@ -215,32 +236,59 @@ function createEnemies() {
             Math.sin(angle) * radius
         );
 
-        const enemy = createSimpleEnemy(position);
-        enemies.push(enemy);
+        // 임시 적 생성
+        const tempEnemy = createTemporaryEnemy(position);
+        scene.add(tempEnemy.model);
+        enemies.push(tempEnemy);
+
+        // GLB 모델 로드
+        try {
+            const modelIndex = i % 4 + 1;
+            const modelPath = `models/enemy${modelIndex}.glb`;
+            console.log(`Loading model: ${modelPath}`);
+
+            const gltf = await loader.loadAsync(modelPath);
+            const model = gltf.scene;
+            
+            // 모델 설정
+            model.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
+            model.position.copy(position);
+            
+            // 모델 재질 및 그림자 설정
+            model.traverse((node) => {
+                if (node.isMesh) {
+                    node.castShadow = true;
+                    node.receiveShadow = true;
+                    node.material.metalness = 0.2;
+                    node.material.roughness = 0.8;
+                }
+            });
+
+            // 임시 모델 교체
+            scene.remove(tempEnemy.model);
+            scene.add(model);
+            enemies[enemies.indexOf(tempEnemy)].model = model;
+
+            console.log(`Successfully loaded enemy model ${modelIndex}`);
+        } catch (error) {
+            console.error(`Error loading enemy model:`, error);
+        }
     }
 }
 
-function createSimpleEnemy(position) {
-    // 간단한 적 모델 생성
+function createTemporaryEnemy(position) {
     const geometry = new THREE.BoxGeometry(5, 10, 5);
     const material = new THREE.MeshPhongMaterial({ 
         color: 0xff0000,
-        emissive: 0x441111,
-        emissiveIntensity: 0.5
+        transparent: true,
+        opacity: 0.8
     });
     
     const model = new THREE.Mesh(geometry, material);
     model.position.copy(position);
     model.castShadow = true;
     model.receiveShadow = true;
-    
-    // 적 주변에 빛 추가
-    const light = new THREE.PointLight(0xff0000, 1, 10);
-    light.position.set(0, 5, 0);
-    model.add(light);
-    
-    scene.add(model);
-    
+
     return {
         model: model,
         health: 100,
@@ -277,7 +325,6 @@ function createExplosion(position) {
     explosionLight.position.copy(position);
     scene.add(explosionLight);
 
-    // 최적화된 애니메이션
     let opacity = 1;
     const animate = () => {
         opacity -= 0.05;
@@ -351,7 +398,7 @@ function shoot() {
     
     gunSound.createGunshot();
 
-    // 최적화된 총구 화염 효과
+    // 총구 화염 효과
     const muzzleFlash = new THREE.PointLight(0xffff00, 3, 10);
     muzzleFlash.position.copy(camera.position);
     scene.add(muzzleFlash);
@@ -359,7 +406,6 @@ function shoot() {
 }
 
 function createBullet() {
-    // 최적화된 총알 생성
     const bullet = new THREE.Mesh(
         new THREE.SphereGeometry(0.5),
         new THREE.MeshBasicMaterial({ 
@@ -457,7 +503,6 @@ function updateEnemyBullets() {
 
         enemyBullets[i].position.add(enemyBullets[i].velocity);
         
-        // 플레이어와의 충돌 검사
         if (enemyBullets[i].position.distanceTo(camera.position) < 3) {
             playerHealth -= 10;
             updateHealthBar();
@@ -471,7 +516,6 @@ function updateEnemyBullets() {
             continue;
         }
 
-        // 범위 벗어난 총알 제거
         if (enemyBullets[i].position.distanceTo(camera.position) > 1000) {
             scene.remove(enemyBullets[i]);
             enemyBullets.splice(i, 1);
@@ -510,6 +554,12 @@ function updateEnemies() {
             
             enemyBullets.push(createEnemyBullet(enemy));
             enemy.lastAttackTime = currentTime;
+
+            // 공격 시 발광 효과
+            const attackFlash = new THREE.PointLight(0xff0000, 2, 20);
+            attackFlash.position.copy(enemy.model.position);
+            scene.add(attackFlash);
+            setTimeout(() => scene.remove(attackFlash), 100);
         }
     });
 }
@@ -588,7 +638,6 @@ function checkGameStatus() {
 }
 
 function cleanupResources() {
-    // 리소스 정리
     bullets.forEach(bullet => scene.remove(bullet));
     bullets = [];
     
@@ -634,32 +683,6 @@ function gameLoop(timestamp) {
     renderer.render(scene, camera);
 }
 
-// 디버깅을 위한 전역 접근
-window.debugGame = {
-    scene,
-    camera,
-    enemies,
-    gunSound,
-    reloadEnemies: createEnemies
-};
-
-// 게임 시작
-window.addEventListener('load', async () => {
-    try {
-        await init();
-        console.log('Game started');
-        console.log('Active enemies:', enemies.length);
-        gameLoop(performance.now());
-    } catch (error) {
-        console.error('Game initialization error:', error);
-        document.getElementById('loading').innerHTML = `
-            <div class="loading-text" style="color: #ff0000;">
-                Error loading game. Please refresh.
-            </div>
-        `;
-    }
-});
-
 // 성능 모니터링
 let lastFpsUpdate = 0;
 let frameCount = 0;
@@ -678,4 +701,29 @@ function updateFPS(timestamp) {
     requestAnimationFrame(updateFPS);
 }
 
-updateFPS(performance.now());
+// 게임 시작
+window.addEventListener('load', async () => {
+    try {
+        await init();
+        console.log('Game started');
+        console.log('Active enemies:', enemies.length);
+        gameLoop(performance.now());
+        updateFPS(performance.now());
+    } catch (error) {
+        console.error('Game initialization error:', error);
+        document.getElementById('loading').innerHTML = `
+            <div class="loading-text" style="color: #ff0000;">
+                Error loading game. Please check console and file paths.
+            </div>
+        `;
+    }
+});
+
+// 디버깅을 위한 전역 접근
+window.debugGame = {
+    scene,
+    camera,
+    enemies,
+    gunSound,
+    reloadEnemies: createEnemies
+};