Update game.js

game.js

@@ -5,7 +5,7 @@ import { PointerLockControls } from 'three/addons/controls/PointerLockControls.j
 // 게임 상수
 const GAME_DURATION = 180;
 const MAP_SIZE = 2000;
-const HELICOPTER_HEIGHT = 30;
+const TANK_HEIGHT = 2.0;  // 전차 높이로 변경
 const ENEMY_GROUND_HEIGHT = 0;
 const ENEMY_SCALE = 10;
 const MAX_HEALTH = 1000;
@@ -19,8 +19,89 @@ const ENEMY_CONFIG = {
     BULLET_SPEED: 2
 };
 
+// TankPlayer 클래스 정의
+class TankPlayer {
+    constructor() {
+        this.body = null;     // 전차 몸체
+        this.turret = null;   // 전차 포탑
+        this.position = new THREE.Vector3(0, 0, 0);
+        this.rotation = new THREE.Euler(0, 0, 0);
+        this.turretRotation = 0;
+        this.moveSpeed = 0.5;
+        this.turnSpeed = 0.03;
+    }
+
+    async initialize(scene, loader) {
+        try {
+            // 몸체 로드
+            const bodyResult = await loader.loadAsync('/models/abramsBody.glb');
+            this.body = bodyResult.scene;
+            this.body.position.copy(this.position);
+            
+            // 포탑 로드
+            const turretResult = await loader.loadAsync('/models/abramsTurret.glb');
+            this.turret = turretResult.scene;
+            
+            // 포탑 위치 조정 (몸체 위에 올림)
+            this.turret.position.y = TANK_HEIGHT;
+            
+            // 그림자 설정
+            this.body.traverse((child) => {
+                if (child.isMesh) {
+                    child.castShadow = true;
+                    child.receiveShadow = true;
+                }
+            });
+            
+            this.turret.traverse((child) => {
+                if (child.isMesh) {
+                    child.castShadow = true;
+                    child.receiveShadow = true;
+                }
+            });
+
+            // 씬에 추가
+            this.body.add(this.turret);
+            scene.add(this.body);
+            
+        } catch (error) {
+            console.error('Error loading tank models:', error);
+        }
+    }
+
+    update(mouseX, mouseY) {
+        if (!this.body || !this.turret) return;
+        
+        // 마우스 위치를 이용한 포탑 회전 계산
+        const mousePosition = new THREE.Vector2(mouseX, mouseY);
+        const targetAngle = Math.atan2(mousePosition.x, mousePosition.y);
+        
+        // 포탑 부드러운 회전
+        const currentRotation = this.turret.rotation.y;
+        const rotationDiff = targetAngle - currentRotation;
+        this.turret.rotation.y += rotationDiff * 0.1;
+    }
+
+    move(direction) {
+        if (!this.body) return;
+        
+        const moveVector = new THREE.Vector3();
+        moveVector.x = direction.x * this.moveSpeed;
+        moveVector.z = direction.z * this.moveSpeed;
+        
+        moveVector.applyEuler(this.body.rotation);
+        this.body.position.add(moveVector);
+    }
+
+    rotate(angle) {
+        if (!this.body) return;
+        this.body.rotation.y += angle * this.turnSpeed;
+    }
+}
+
 // 게임 변수
 let scene, camera, renderer, controls;
+let player; // 전차 플레이어 인스턴스
 let enemies = [];
 let bullets = [];
 let enemyBullets = [];
@@ -30,7 +111,6 @@ let currentStage = 1;
 let isGameOver = false;
 let lastTime = performance.now();
 let lastRender = 0;
-
 // 오실레이터 기반 총소리 생성기
 class GunSoundGenerator {
     constructor() {
@@ -110,7 +190,7 @@ async function init() {
 
         // Camera 설정
         camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        camera.position.set(0, HELICOPTER_HEIGHT, 0);
+        camera.position.set(0, TANK_HEIGHT + 5, -10); // 카메라 위치 전차에 맞게 조정
 
         // 기본 조명
         scene.add(new THREE.AmbientLight(0xffffff, 0.6));
@@ -128,9 +208,10 @@ async function init() {
         // 이벤트 리스너
         setupEventListeners();
 
-        // 모델 테스트 먼저 실행
-        await testModelLoading();
-        
+        // 플레이어 초기화
+        player = new TankPlayer();
+        await player.initialize(scene, new GLTFLoader());
+
         // 게임 요소 초기화
         await Promise.all([
             createTerrain(),
@@ -154,9 +235,18 @@ function setupEventListeners() {
     document.addEventListener('click', onClick);
     document.addEventListener('keydown', onKeyDown);
     document.addEventListener('keyup', onKeyUp);
+    document.addEventListener('mousemove', onMouseMove);
     window.addEventListener('resize', onWindowResize);
 }
 
+// 마우스 이동 이벤트 핸들러 추가
+function onMouseMove(event) {
+    if (controls.isLocked && player) {
+        const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+        const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
+        player.update(mouseX, mouseY);
+    }
+}
 async function testModelLoading() {
     const loader = new GLTFLoader();
     try {
@@ -241,7 +331,6 @@ async function createEnemies() {
         scene.add(tempEnemy.model);
         enemies.push(tempEnemy);
 
-        // GLB 모델 로드
         try {
             const modelIndex = i % 4 + 1;
             const modelPath = `models/enemy${modelIndex}.glb`;
@@ -250,11 +339,9 @@ async function createEnemies() {
             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;
@@ -264,7 +351,6 @@ async function createEnemies() {
                 }
             });
 
-            // 임시 모델 교체
             scene.remove(tempEnemy.model);
             scene.add(model);
             enemies[enemies.indexOf(tempEnemy)].model = model;
@@ -296,7 +382,6 @@ function createTemporaryEnemy(position) {
         lastAttackTime: 0
     };
 }
-
 function createExplosion(position) {
     const particles = [];
     for (let i = 0; i < PARTICLE_COUNT; i++) {
@@ -355,11 +440,27 @@ function onClick() {
 }
 
 function onKeyDown(event) {
+    if (!player) return;
+    
     switch(event.code) {
-        case 'KeyW': moveState.forward = true; break;
-        case 'KeyS': moveState.backward = true; break;
-        case 'KeyA': moveState.left = true; break;
-        case 'KeyD': moveState.right = true; break;
+        case 'KeyW': 
+            moveState.forward = true; 
+            const forwardDir = new THREE.Vector3(0, 0, -1);
+            player.move(forwardDir);
+            break;
+        case 'KeyS': 
+            moveState.backward = true; 
+            const backwardDir = new THREE.Vector3(0, 0, 1);
+            player.move(backwardDir);
+            break;
+        case 'KeyA': 
+            moveState.left = true; 
+            player.rotate(1);
+            break;
+        case 'KeyD': 
+            moveState.right = true; 
+            player.rotate(-1);
+            break;
         case 'KeyR': reload(); break;
     }
 }
@@ -388,7 +489,7 @@ const moveState = {
 };
 
 function shoot() {
-    if (ammo <= 0) return;
+    if (ammo <= 0 || !player || !player.turret) return;
     
     ammo--;
     updateAmmoDisplay();
@@ -400,7 +501,7 @@ function shoot() {
 
     // 총구 화염 효과
     const muzzleFlash = new THREE.PointLight(0xffff00, 3, 10);
-    muzzleFlash.position.copy(camera.position);
+    muzzleFlash.position.copy(player.turret.position);
     scene.add(muzzleFlash);
     setTimeout(() => scene.remove(muzzleFlash), 50);
 }
@@ -415,15 +516,15 @@ function createBullet() {
         })
     );
     
-    bullet.position.copy(camera.position);
-    const direction = new THREE.Vector3();
-    camera.getWorldDirection(direction);
+    // 포탑 위치에서 총알 발사
+    bullet.position.copy(player.turret.position);
+    const direction = new THREE.Vector3(0, 0, -1);
+    direction.applyQuaternion(player.turret.quaternion);
     bullet.velocity = direction.multiplyScalar(5);
     
     scene.add(bullet);
     return bullet;
 }
-
 function createEnemyBullet(enemy) {
     const bullet = new THREE.Mesh(
         new THREE.SphereGeometry(0.5),
@@ -438,7 +539,7 @@ function createEnemyBullet(enemy) {
     bullet.position.y += 5;
     
     const direction = new THREE.Vector3();
-    direction.subVectors(camera.position, enemy.model.position).normalize();
+    direction.subVectors(player.body.position, enemy.model.position).normalize();
     bullet.velocity = direction.multiplyScalar(ENEMY_CONFIG.BULLET_SPEED);
     
     scene.add(bullet);
@@ -446,19 +547,14 @@ function createEnemyBullet(enemy) {
 }
 
 function updateMovement() {
-    if (controls.isLocked) {
-        const speed = 2.0;
-        if (moveState.forward) controls.moveForward(speed);
-        if (moveState.backward) controls.moveForward(-speed);
-        if (moveState.left) controls.moveRight(-speed);
-        if (moveState.right) controls.moveRight(speed);
-
-        // 고도 제한
-        if (camera.position.y < HELICOPTER_HEIGHT) {
-            camera.position.y = HELICOPTER_HEIGHT;
-        } else if (camera.position.y > HELICOPTER_HEIGHT + 10) {
-            camera.position.y = HELICOPTER_HEIGHT + 10;
-        }
+    if (controls.isLocked && !isGameOver && player) {
+        // 카메라 위치 업데이트
+        const cameraOffset = new THREE.Vector3(0, TANK_HEIGHT + 5, -15);
+        cameraOffset.applyQuaternion(player.body.quaternion);
+        camera.position.copy(player.body.position).add(cameraOffset);
+        
+        // 카메라가 플레이어를 바라보도록 설정
+        camera.lookAt(player.body.position);
     }
 }
 
@@ -490,7 +586,7 @@ function updateBullets() {
         }
 
         // 범위 벗어난 총알 제거
-        if (bullets[i] && bullets[i].position.distanceTo(camera.position) > 1000) {
+        if (bullets[i] && bullets[i].position.distanceTo(player.body.position) > 1000) {
             scene.remove(bullets[i]);
             bullets.splice(i, 1);
         }
@@ -503,7 +599,7 @@ function updateEnemyBullets() {
 
         enemyBullets[i].position.add(enemyBullets[i].velocity);
         
-        if (enemyBullets[i].position.distanceTo(camera.position) < 3) {
+        if (enemyBullets[i].position.distanceTo(player.body.position) < 3) {
             playerHealth -= 10;
             updateHealthBar();
             createExplosion(enemyBullets[i].position.clone());
@@ -516,7 +612,7 @@ function updateEnemyBullets() {
             continue;
         }
 
-        if (enemyBullets[i].position.distanceTo(camera.position) > 1000) {
+        if (enemyBullets[i].position.distanceTo(player.body.position) > 1000) {
             scene.remove(enemyBullets[i]);
             enemyBullets.splice(i, 1);
         }
@@ -531,7 +627,7 @@ function updateEnemies() {
 
         // 적 이동 로직
         const direction = new THREE.Vector3();
-        direction.subVectors(camera.position, enemy.model.position);
+        direction.subVectors(player.body.position, enemy.model.position);
         direction.y = 0;
         direction.normalize();
         
@@ -542,13 +638,13 @@ function updateEnemies() {
 
         // 적이 플레이어를 바라보도록 설정
         enemy.model.lookAt(new THREE.Vector3(
-            camera.position.x,
+            player.body.position.x,
             enemy.model.position.y,
-            camera.position.z
+            player.body.position.z
         ));
 
         // 공격 로직
-        const distanceToPlayer = enemy.model.position.distanceTo(camera.position);
+        const distanceToPlayer = enemy.model.position.distanceTo(player.body.position);
         if (distanceToPlayer < ENEMY_CONFIG.ATTACK_RANGE && 
             currentTime - enemy.lastAttackTime > ENEMY_CONFIG.ATTACK_INTERVAL) {
             
@@ -563,7 +659,6 @@ function updateEnemies() {
         }
     });
 }
-
 function reload() {
     ammo = 30;
     updateAmmoDisplay();
@@ -579,9 +674,11 @@ function updateHealthBar() {
     healthElement.style.width = `${healthPercentage}%`;
 }
 
-function updateHelicopterHUD() {
+function updateTankHUD() {
+    if (!player || !player.body) return;
+
     document.querySelector('#altitude-indicator span').textContent = 
-        Math.round(camera.position.y);
+        Math.round(player.body.position.y);
 
     const speed = Math.round(
         Math.sqrt(
@@ -592,7 +689,7 @@ function updateHelicopterHUD() {
     document.querySelector('#speed-indicator span').textContent = speed;
 
     const heading = Math.round(
-        (camera.rotation.y * (180 / Math.PI) + 360) % 360
+        (player.body.rotation.y * (180 / Math.PI) + 360) % 360
     );
     document.querySelector('#compass span').textContent = heading;
 
@@ -600,17 +697,19 @@ function updateHelicopterHUD() {
 }
 
 function updateRadar() {
+    if (!player || !player.body) return;
+    
     const radarTargets = document.querySelector('.radar-targets');
     radarTargets.innerHTML = '';
 
     enemies.forEach(enemy => {
         if (!enemy || !enemy.model) return;
 
-        const relativePos = enemy.model.position.clone().sub(camera.position);
+        const relativePos = enemy.model.position.clone().sub(player.body.position);
         const distance = relativePos.length();
         
         if (distance < 500) {
-            const playerAngle = camera.rotation.y;
+            const playerAngle = player.body.rotation.y;
             const enemyAngle = Math.atan2(relativePos.x, relativePos.z);
             const relativeAngle = enemyAngle - playerAngle;
             
@@ -665,7 +764,6 @@ function gameOver(won) {
 function gameLoop(timestamp) {
     requestAnimationFrame(gameLoop);
     
-    // 프레임 제한 (60fps)
     if (timestamp - lastRender < 16) {
         return;
     }
@@ -676,7 +774,7 @@ function gameLoop(timestamp) {
         updateBullets();
         updateEnemies();
         updateEnemyBullets();
-        updateHelicopterHUD();
+        updateTankHUD();
         checkGameStatus();
     }
 
@@ -725,5 +823,6 @@ window.debugGame = {
     camera,
     enemies,
     gunSound,
+    player,
     reloadEnemies: createEnemies
 };