3D-Airforce-Simulator

Running

App Files Files

xet

Community

cutechicken commited on Jul 4

Commit

b9ec0db

verified ·

1 Parent(s): 96fd1d3

Update index.html

Browse files

Files changed (1) hide show

index.html +138 -116

index.html CHANGED Viewed

@@ -1,17 +1,4 @@
-// 실시간 각도 강제 보정 (하드 리미트)
-                const maxAllowedPitch = Math.PI / 4.5; // 40도
-                const maxAllowedRoll = Math.PI * 0.8; // 144도
-                // 현재 회전각이 한계를 초과하면 강제로 되돌리기
-                if (Math.abs(this.rotation.x) > maxAllowedPitch) {
-                    this.rotation.x = Math.sign(this.rotation.x) * maxAllowedPitch;
-                    this.targetPitch = this.rotation.x;
-                }
-                if (Math.abs(this.rotation.z) > maxAllowedRoll) {
-                    this.rotation.z = Math.sign(this.rotation.z) * maxAllowedRoll;
-                    this.targetRoll = this.rotation.z;
-                }<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
@@ -100,55 +87,55 @@
         }
         #crosshair {
-    position: fixed;
-    top: 25%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    border: 2px solid #00ff00;
-    border-radius: 50%;
-    z-index: 1001;
-    pointer-events: none;
-    transition: all 0.2s ease;
-}
-/* 물체가 감지되었을 때의 스타일 */
-#crosshair.target-detected {
-    border-color: #ff0000;
-    border-width: 3px;
-    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
-}
-#crosshair::before,
-#crosshair::after {
-    content: '';
-    position: absolute;
-    background: #00ff00;
-    transition: all 0.2s ease;
-}
-#crosshair::before {
-    top: 50%;
-    left: -10px;
-    right: -10px;
-    height: 2px;
-    transform: translateY(-50%);
-}
-#crosshair::after {
-    left: 50%;
-    top: -10px;
-    bottom: -10px;
-    width: 2px;
-    transform: translateX(-50%);
-}
-/* 물체가 감지되었을 때의 크로스 라인 스타일 */
-#crosshair.target-detected::before,
-#crosshair.target-detected::after {
-    background: #ff0000;
-}
         #healthBar {
             position: absolute;
@@ -186,7 +173,7 @@
         #gameTitle {
             position: absolute;
-            top: 10px;
             left: 50%;
             transform: translateX(-50%);
             color: #0f0;
@@ -564,15 +551,19 @@
                 this.lastShootTime = 0;
                 // 카메라 설정
-                this.cameraDistance = 300; // 더 멀리
-                this.cameraHeight = 60; // 더 높게
-                this.cameraLag = 0.06;
                 // 경고 시스템
                 this.altitudeWarning = false;
                 this.stallWarning = false;
                 this.warningBlinkTimer = 0;
                 this.warningBlinkState = false;
             }
             async initialize(scene, loader) {
@@ -645,30 +636,45 @@
             }
             updateMouseInput(deltaX, deltaY) {
                 // 마우스 감도 조정
-                const sensitivity = GAME_CONSTANTS.MOUSE_SENSITIVITY * 1.8;
-                // 마우스 움직임을 직접 회전 각도에 누적 적용 (상대적 입력)
-                // X축 (좌/우) -> 롤 변화량
-                this.targetRoll += deltaX * sensitivity;
-                // Y축 (위/아래) -> 피치 변화량 (반전: 마우스 아래 = 기수 위로)
-                this.targetPitch -= deltaY * sensitivity;
-                // 대칭적인 각도 제한 (위/아래 동일)
-                const maxPitchAngle = Math.PI / 4; // 45도 (위/아래 동일)
-                const maxRollAngle = Math.PI * 0.9; // 162도
-                // 하드 클램프 - 절대 초과 불가
                 this.targetPitch = Math.max(-maxPitchAngle, Math.min(maxPitchAngle, this.targetPitch));
                 this.targetRoll = Math.max(-maxRollAngle, Math.min(maxRollAngle, this.targetRoll));
-                // 롤 각도 정규화 (180도 이내로 제한)
-                if (this.targetRoll > Math.PI * 0.9) {
-                    this.targetRoll = Math.PI * 0.9;
-                } else if (this.targetRoll < -Math.PI * 0.9) {
-                    this.targetRoll = -Math.PI * 0.9;
                 }
             }
             updateControls(keys, deltaTime) {
@@ -699,12 +705,23 @@
             updatePhysics(deltaTime) {
                 if (!this.mesh) return;
                 // 부드러운 회전 보간
-                const rotationSpeed = deltaTime * 3.0;
                 this.rotation.x = THREE.MathUtils.lerp(this.rotation.x, this.targetPitch, rotationSpeed);
                 this.rotation.y = THREE.MathUtils.lerp(this.rotation.y, this.targetYaw, rotationSpeed);
                 this.rotation.z = THREE.MathUtils.lerp(this.rotation.z, this.targetRoll, rotationSpeed);
                 // 기본 속도 계산
                 const minSpeed = 100;
                 const maxSpeed = 300;
@@ -856,50 +873,54 @@
                 return this.health <= 0;
             }
-            // 개선된 카메라 시스템 (클리핑 방지)
             getCameraPosition() {
-                // 전투기 기준 카메라 위치 계산
-                const distance = this.cameraDistance;
-                const height = this.cameraHeight;
-                // 전투기의 뒤쪽 방향 계산 (요 회전만 적용)
-                const yawOnly = new THREE.Euler(0, this.rotation.y, 0);
                 const backward = new THREE.Vector3(0, 0, -1);
-                backward.applyEuler(yawOnly);
-                // 기본 카메라 위치 (안전한 거리 확보)
-                let cameraPos = this.position.clone()
-                    .add(backward.multiplyScalar(distance))
-                    .add(new THREE.Vector3(0, height, 0));
-                // 피치에 따른 부드러운 카메라 조정 (클리핑 방지)
-                const pitchAngle = this.rotation.x;
-                const pitchAdjustment = Math.sin(pitchAngle) * distance * 0.2; // 줄임
-                cameraPos.y += Math.max(pitchAdjustment, -height * 0.5); // 최소 높이 보장
-                cameraPos.z -= Math.abs(pitchAdjustment) * 0.3;
-                // 롤에 따른 부드러운 카메라 조정
-                const rollAngle = this.rotation.z;
-                const rollAdjustment = Math.sin(rollAngle) * 40;
-                cameraPos.x += rollAdjustment;
-                cameraPos.y += Math.abs(rollAdjustment) * 0.2;
-                // 최소 고도 보장 (지면 클리핑 방지)
-                cameraPos.y = Math.max(cameraPos.y, this.position.y + 20);
-                return cameraPos;
             }
             getCameraTarget() {
-                // 전투기 앞쪽 방향으로 예측 포인트
                 const forward = new THREE.Vector3(0, 0, 1);
-                forward.applyEuler(new THREE.Euler(0, this.rotation.y, 0));
-                // 타겟 높이도 안전하게 설정
-                const target = this.position.clone().add(forward.multiplyScalar(100));
-                target.y = Math.max(target.y, 10); // 최소 높이 보장
-                return target;
             }
         }
@@ -1091,7 +1112,7 @@
         class Game {
             constructor() {
                 this.scene = new THREE.Scene();
-                this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1.0, 50000); // near를 1.0으로 증가
                 this.renderer = new THREE.WebGLRenderer({ antialias: true });
                 this.renderer.setSize(window.innerWidth, window.innerHeight);
                 this.renderer.shadowMap.enabled = true;
@@ -1612,6 +1633,7 @@
                 const gameOverDiv = document.createElement('div');
                 gameOverDiv.className = 'start-screen';
                 gameOverDiv.innerHTML = `
                     <h1 style="color: ${victory ? '#0f0' : '#f00'}; font-size: 48px;">
                         ${victory ? 'MISSION ACCOMPLISHED!' : 'SHOT DOWN!'}

+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
         }
         #crosshair {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 40px;
+            height: 40px;
+            border: 2px solid #00ff00;
+            border-radius: 50%;
+            z-index: 1001;
+            pointer-events: none;
+            transition: all 0.2s ease;
+        }
+        /* 물체가 감지되었을 때의 스타일 */
+        #crosshair.target-detected {
+            border-color: #ff0000;
+            border-width: 3px;
+            box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
+        }
+        #crosshair::before,
+        #crosshair::after {
+            content: '';
+            position: absolute;
+            background: #00ff00;
+            transition: all 0.2s ease;
+        }
+        #crosshair::before {
+            top: 50%;
+            left: -10px;
+            right: -10px;
+            height: 2px;
+            transform: translateY(-50%);
+        }
+        #crosshair::after {
+            left: 50%;
+            top: -10px;
+            bottom: -10px;
+            width: 2px;
+            transform: translateX(-50%);
+        }
+        /* 물체가 감지되었을 때의 크로스 라인 스타일 */
+        #crosshair.target-detected::before,
+        #crosshair.target-detected::after {
+            background: #ff0000;
+        }
         #healthBar {
             position: absolute;
         #gameTitle {
             position: absolute;
+            top: 60px;  /* 10px에서 60px로 변경 - 화면 잘림 문제 해결 */
             left: 50%;
             transform: translateX(-50%);
             color: #0f0;
                 this.lastShootTime = 0;
                 // 카메라 설정
+                this.cameraDistance = 300; // 적절한 거리
+                this.cameraHeight = 80; // 높이 증가
+                this.cameraLag = 0.08; // 부드러운 추적
                 // 경고 시스템
                 this.altitudeWarning = false;
                 this.stallWarning = false;
                 this.warningBlinkTimer = 0;
                 this.warningBlinkState = false;
+                // 마우스 입력 누적 방지를 위한 변수 추가
+                this.mouseInputBuffer = { x: 0, y: 0 };
+                this.lastMouseUpdate = 0;
             }
             async initialize(scene, loader) {
             }
             updateMouseInput(deltaX, deltaY) {
+                const currentTime = Date.now();
+                // 마우스 입력 누적 버퍼 초기화 (매 프레임마다)
+                if (currentTime - this.lastMouseUpdate > 16) { // 약 60fps
+                    this.mouseInputBuffer.x = 0;
+                    this.mouseInputBuffer.y = 0;
+                }
+                // 현재 프레임의 마우스 입력 누적
+                this.mouseInputBuffer.x += deltaX;
+                this.mouseInputBuffer.y += deltaY;
                 // 마우스 감도 조정
+                const sensitivity = GAME_CONSTANTS.MOUSE_SENSITIVITY * 1.5;
+                // 누적된 입력을 사용하여 목표 회전값 설정
+                const rollChange = this.mouseInputBuffer.x * sensitivity;
+                const pitchChange = -this.mouseInputBuffer.y * sensitivity;
+                // 대칭적인 각도 제한
+                const maxPitchAngle = Math.PI / 3; // 60도로 증가
+                const maxRollAngle = Math.PI; // 180도 완전 허용
+                // 목표값 업데이트 (절대값이 아닌 변화량으로)
+                this.targetRoll += rollChange;
+                this.targetPitch += pitchChange;
+                // 엄격한 제한 적용
                 this.targetPitch = Math.max(-maxPitchAngle, Math.min(maxPitchAngle, this.targetPitch));
                 this.targetRoll = Math.max(-maxRollAngle, Math.min(maxRollAngle, this.targetRoll));
+                // 롤 각도 정규화
+                if (this.targetRoll > Math.PI) {
+                    this.targetRoll -= 2 * Math.PI;
+                } else if (this.targetRoll < -Math.PI) {
+                    this.targetRoll += 2 * Math.PI;
                 }
+                this.lastMouseUpdate = currentTime;
             }
             updateControls(keys, deltaTime) {
             updatePhysics(deltaTime) {
                 if (!this.mesh) return;
+                // 마우스 입력 버퍼 리셋 (물리 업데이트 후)
+                this.mouseInputBuffer.x *= 0.9; // 서서히 감소
+                this.mouseInputBuffer.y *= 0.9;
                 // 부드러운 회전 보간
+                const rotationSpeed = deltaTime * 2.5; // 약간 느리게
                 this.rotation.x = THREE.MathUtils.lerp(this.rotation.x, this.targetPitch, rotationSpeed);
                 this.rotation.y = THREE.MathUtils.lerp(this.rotation.y, this.targetYaw, rotationSpeed);
                 this.rotation.z = THREE.MathUtils.lerp(this.rotation.z, this.targetRoll, rotationSpeed);
+                // 추가 안전장치: 물리 업데이트 중에도 각도 제한
+                const maxPitchAngle = Math.PI / 3;
+                const maxRollAngle = Math.PI;
+                this.rotation.x = Math.max(-maxPitchAngle, Math.min(maxPitchAngle, this.rotation.x));
+                this.rotation.z = Math.max(-maxRollAngle, Math.min(maxRollAngle, this.rotation.z));
                 // 기본 속도 계산
                 const minSpeed = 100;
                 const maxSpeed = 300;
                 return this.health <= 0;
             }
+            // 개선된 카메라 시스템 - 정확한 꼬리 추적
             getCameraPosition() {
+                // 전투기의 현재 회전을 기반으로 한 방향 벡터
+                const fighterRotation = new THREE.Euler(
+                    this.rotation.x,
+                    this.rotation.y,
+                    this.rotation.z
+                );
+                // 뒤쪽 방향 벡터 (전투기 기준)
                 const backward = new THREE.Vector3(0, 0, -1);
+                backward.applyEuler(fighterRotation);
+                // 위쪽 방향 벡터 (전투기 기준)
+                const up = new THREE.Vector3(0, 1, 0);
+                up.applyEuler(fighterRotation);
+                // 카메라 위치 계산 - 전투기 뒤쪽과 위쪽
+                const cameraPosition = this.position.clone()
+                    .add(backward.multiplyScalar(this.cameraDistance))
+                    .add(up.multiplyScalar(this.cameraHeight));
+                // 극단적인 기동 시 카메라 안정화
+                const pitchAngle = Math.abs(this.rotation.x);
+                if (pitchAngle > Math.PI / 3) { // 60도 이상
+                    // 월드 업 벡터와 블렌딩하여 안정화
+                    const worldUp = new THREE.Vector3(0, 1, 0);
+                    const stabilizeFactor = (pitchAngle - Math.PI / 3) / (Math.PI / 6);
+                    const stabilizedUp = up.lerp(worldUp, Math.min(stabilizeFactor, 0.7));
+                    // 안정화된 위치로 재계산
+                    cameraPosition.copy(this.position)
+                        .add(backward.multiplyScalar(this.cameraDistance))
+                        .add(stabilizedUp.multiplyScalar(this.cameraHeight * 1.2));
+                }
+                // 최소 카메라 고도 보장
+                cameraPosition.y = Math.max(cameraPosition.y, this.position.y - 50);
+                return cameraPosition;
             }
             getCameraTarget() {
+                // 전투기 중심을 약간 앞쪽으로 이동한 지점
                 const forward = new THREE.Vector3(0, 0, 1);
+                forward.applyEuler(this.rotation);
+                return this.position.clone().add(forward.multiplyScalar(50));
             }
         }
         class Game {
             constructor() {
                 this.scene = new THREE.Scene();
+                this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 50000);
                 this.renderer = new THREE.WebGLRenderer({ antialias: true });
                 this.renderer.setSize(window.innerWidth, window.innerHeight);
                 this.renderer.shadowMap.enabled = true;
                 const gameOverDiv = document.createElement('div');
                 gameOverDiv.className = 'start-screen';
+                gameOverDiv.style.display = 'flex'; // 게임 오버 화면을 바로 표시
                 gameOverDiv.innerHTML = `
                     <h1 style="color: ${victory ? '#0f0' : '#f00'}; font-size: 48px;">
                         ${victory ? 'MISSION ACCOMPLISHED!' : 'SHOT DOWN!'}