clear
This commit is contained in:
KIM SU BO committed
1 parent
618ba02cb9
commit
83278b2998
124 files changed
-49298
No files matched your search
@@ -1,310 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>드론 5대 군집 편대 비행 시뮬레이터 | 5-Drone Swarm Formation (Three.js & Python)</title>
|
||||
|
||||
<!-- Three.js and OrbitControls -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 3D WebGL Canvas Container -->
|
||||
<div id="canvas-container"></div>
|
||||
<div class="hud-overlay"></div>
|
||||
|
||||
<!-- Top Navigation & Status Bar -->
|
||||
<header class="top-nav">
|
||||
<div class="brand-title">
|
||||
<div class="brand-icon"></div>
|
||||
<h1>AERO-SWARM TACTICAL HUD</h1>
|
||||
<span>5-DRONE SWARM FORMATION CONTROLLER</span>
|
||||
</div>
|
||||
|
||||
<div class="top-status-bar">
|
||||
<div class="status-badge">
|
||||
<div id="connection-status-dot" class="status-dot"></div>
|
||||
<span id="connection-status-text">CONNECTING...</span>
|
||||
</div>
|
||||
<div class="status-badge">
|
||||
<span style="color: var(--color-cyan);">SWARM:</span>
|
||||
<span style="color: #fff; font-weight: bold;">5 UNITS ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Left Side Panel: Real-Time 5-Drone Swarm Telemetry -->
|
||||
<aside class="side-panel left-panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
SWARM TELEMETRY (5 UNITS)
|
||||
</div>
|
||||
<span class="callsign-tag" style="color: var(--color-cyan);">60 FPS SYNC</span>
|
||||
</div>
|
||||
|
||||
<!-- 1. Leader Drone -->
|
||||
<div class="drone-card leader">
|
||||
<div class="card-top">
|
||||
<span class="drone-name" style="color: #00f0ff;">LEADER (VIPER-01)</span>
|
||||
<span class="callsign-tag">ALPHA-01</span>
|
||||
</div>
|
||||
<div class="telemetry-grid">
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">POS</span>
|
||||
<span id="tele-d0-pos" class="tele-val">0.0, 8.0, 0.0</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">AIRSPEED</span>
|
||||
<span id="tele-d0-spd" class="tele-val" style="color: #00f0ff;">0.0 km/h</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">ALTITUDE</span>
|
||||
<span id="tele-d0-alt" class="tele-val">8.0 m</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">BATTERY</span>
|
||||
<span id="tele-d0-bat" class="tele-val" style="color: var(--color-green);">98.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bar-bg"><div id="bar-d0-bat" class="progress-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Wingman 1 -->
|
||||
<div class="drone-card" style="border-left: 4px solid #ff0055;">
|
||||
<div class="card-top">
|
||||
<span class="drone-name" style="color: #ff0055;">WINGMAN 1 (GHOST-02)</span>
|
||||
<span class="callsign-tag">ALPHA-02</span>
|
||||
</div>
|
||||
<div class="telemetry-grid">
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">POS</span>
|
||||
<span id="tele-d1-pos" class="tele-val">5.0, 8.0, -5.0</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">AIRSPEED</span>
|
||||
<span id="tele-d1-spd" class="tele-val" style="color: #ff0055;">0.0 km/h</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">ALTITUDE</span>
|
||||
<span id="tele-d1-alt" class="tele-val">8.0 m</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">BATTERY</span>
|
||||
<span id="tele-d1-bat" class="tele-val" style="color: var(--color-green);">98.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bar-bg"><div id="bar-d1-bat" class="progress-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Wingman 2 -->
|
||||
<div class="drone-card" style="border-left: 4px solid #00ff88;">
|
||||
<div class="card-top">
|
||||
<span class="drone-name" style="color: #00ff88;">WINGMAN 2 (PHANTOM-03)</span>
|
||||
<span class="callsign-tag">ALPHA-03</span>
|
||||
</div>
|
||||
<div class="telemetry-grid">
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">POS</span>
|
||||
<span id="tele-d2-pos" class="tele-val">-5.0, 8.0, -5.0</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">AIRSPEED</span>
|
||||
<span id="tele-d2-spd" class="tele-val" style="color: #00ff88;">0.0 km/h</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">ALTITUDE</span>
|
||||
<span id="tele-d2-alt" class="tele-val">8.0 m</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">BATTERY</span>
|
||||
<span id="tele-d2-bat" class="tele-val" style="color: var(--color-green);">98.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bar-bg"><div id="bar-d2-bat" class="progress-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Wingman 3 -->
|
||||
<div class="drone-card" style="border-left: 4px solid #ffb700;">
|
||||
<div class="card-top">
|
||||
<span class="drone-name" style="color: #ffb700;">WINGMAN 3 (SPECTER-04)</span>
|
||||
<span class="callsign-tag">ALPHA-04</span>
|
||||
</div>
|
||||
<div class="telemetry-grid">
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">POS</span>
|
||||
<span id="tele-d3-pos" class="tele-val">10.0, 8.0, -10.0</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">AIRSPEED</span>
|
||||
<span id="tele-d3-spd" class="tele-val" style="color: #ffb700;">0.0 km/h</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">ALTITUDE</span>
|
||||
<span id="tele-d3-alt" class="tele-val">8.0 m</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">BATTERY</span>
|
||||
<span id="tele-d3-bat" class="tele-val" style="color: var(--color-green);">98.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bar-bg"><div id="bar-d3-bat" class="progress-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 5. Wingman 4 -->
|
||||
<div class="drone-card" style="border-left: 4px solid #b026ff;">
|
||||
<div class="card-top">
|
||||
<span class="drone-name" style="color: #b026ff;">WINGMAN 4 (SHADOW-05)</span>
|
||||
<span class="callsign-tag">ALPHA-05</span>
|
||||
</div>
|
||||
<div class="telemetry-grid">
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">POS</span>
|
||||
<span id="tele-d4-pos" class="tele-val">-10.0, 8.0, -10.0</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">AIRSPEED</span>
|
||||
<span id="tele-d4-spd" class="tele-val" style="color: #b026ff;">0.0 km/h</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">ALTITUDE</span>
|
||||
<span id="tele-d4-alt" class="tele-val">8.0 m</span>
|
||||
</div>
|
||||
<div class="tele-item">
|
||||
<span class="tele-label">BATTERY</span>
|
||||
<span id="tele-d4-bat" class="tele-val" style="color: var(--color-green);">98.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bar-bg"><div id="bar-d4-bat" class="progress-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- Formation Distance Status -->
|
||||
<div class="formation-gauge-card">
|
||||
<div class="gauge-title">FORMATION BASE SPACING</div>
|
||||
<div id="gauge-dist-val" class="gauge-distance">6.0m</div>
|
||||
<div id="formation-status-msg" class="formation-status-text">5-DRONE SWARM: V_FORMATION</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Right Side Panel: Radar & Tactical Formation Controls -->
|
||||
<aside class="side-panel right-panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
|
||||
TACTICAL RADAR & FORMATION
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2D Aerial Radar Scope -->
|
||||
<div class="radar-box">
|
||||
<canvas id="tactical-radar" width="220" height="220"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- 5-Drone Formation Presets -->
|
||||
<div class="control-group">
|
||||
<div class="control-label">편대 대형 선택 (5-Drone Formation)</div>
|
||||
<div class="formation-buttons">
|
||||
<button class="btn-formation active" data-mode="V_FORMATION">V 편대 (V-Formation)</button>
|
||||
<button class="btn-formation" data-mode="DIAMOND">다이아몬드 (Diamond)</button>
|
||||
<button class="btn-formation" data-mode="SIDE_BY_SIDE">횡대 일렬 (Line Abreast)</button>
|
||||
<button class="btn-formation" data-mode="TANDEM">종대 직렬 (Column / Trail)</button>
|
||||
<button class="btn-formation" data-mode="ORBIT">군집 선회 (Swarm Orbit)</button>
|
||||
<button class="btn-formation" data-mode="ECHELON_RIGHT">사선 편대 (Echelon Right)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spacing / Distance Slider -->
|
||||
<div class="control-group">
|
||||
<div class="slider-row">
|
||||
<div class="slider-info">
|
||||
<span class="control-label">편대 기본 간격 (Spacing)</span>
|
||||
<span id="dist-value" style="color: var(--color-cyan); font-weight: bold;">6.0m</span>
|
||||
</div>
|
||||
<input type="range" id="formation-dist-slider" min="2.5" max="25.0" step="0.5" value="6.0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formation Altitude Offset Slider -->
|
||||
<div class="control-group">
|
||||
<div class="slider-row">
|
||||
<div class="slider-info">
|
||||
<span class="control-label">윙맨 고도 편차 (Alt Offset)</span>
|
||||
<span id="height-value" style="color: var(--color-pink); font-weight: bold;">0.0m</span>
|
||||
</div>
|
||||
<input type="range" id="formation-height-slider" min="-8.0" max="8.0" step="0.5" value="0.0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flight Altitude Slider -->
|
||||
<div class="control-group">
|
||||
<div class="slider-row">
|
||||
<div class="slider-info">
|
||||
<span class="control-label">비행 목표 고도 (Flight Altitude)</span>
|
||||
<span id="alt-value" style="color: var(--color-cyan); font-weight: bold;">8.0m</span>
|
||||
</div>
|
||||
<input type="range" id="altitude-slider" min="2.0" max="35.0" step="0.5" value="8.0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Speed Multiplier Slider -->
|
||||
<div class="control-group">
|
||||
<div class="slider-row">
|
||||
<div class="slider-info">
|
||||
<span class="control-label">비행 속도 배율 (Speed Agility)</span>
|
||||
<span id="speed-value" style="color: var(--color-green); font-weight: bold;">1.0x</span>
|
||||
</div>
|
||||
<input type="range" id="speed-slider" min="0.4" max="2.5" step="0.1" value="1.0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Autonomous Patrol Toggle -->
|
||||
<div class="control-group">
|
||||
<div class="toggle-row">
|
||||
<span class="control-label" style="color: #fff;">군집 자율 정찰 (Auto Patrol)</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="auto-flight-toggle">
|
||||
<span class="slider-toggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<select id="auto-pattern-select" style="width: 100%; background: #0c1420; color: #00f0ff; border: 1px solid var(--panel-border); padding: 6px; border-radius: 4px; font-family: var(--font-mono); outline: none;">
|
||||
<option value="FIGURE_EIGHT">8자 기동 (Figure-8 Aero)</option>
|
||||
<option value="CIRCLE">원형 선회 (Circular Orbit)</option>
|
||||
<option value="WAYPOINT_PATROL">다이아몬드 순찰 (Diamond Recon)</option>
|
||||
</select>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Bottom Flight Control Bar & Camera Director -->
|
||||
<footer class="bottom-bar">
|
||||
<div class="flight-instruct">
|
||||
<span class="instruct-pill">🖱️ 마우스 클릭/드래그</span>
|
||||
<span>화면을 마우스로 클릭하면 리더 드론을 필두로 드론 5대가 편대를 유지하며 이동합니다 (휠/W,S: 고도 변경)</span>
|
||||
</div>
|
||||
|
||||
<!-- Camera Switcher -->
|
||||
<div class="cam-buttons">
|
||||
<button class="btn-cam active" data-cam="ORBIT">🎥 군집 궤도뷰 [1]</button>
|
||||
<button class="btn-cam" data-cam="CHASE">🚀 리더 추적뷰 [2]</button>
|
||||
<button class="btn-cam" data-cam="FPV">🎯 조종석 FPV [3]</button>
|
||||
<button class="btn-cam" data-cam="FORMATION">📐 편대 프로필 [4]</button>
|
||||
</div>
|
||||
|
||||
<!-- Sound & Action buttons -->
|
||||
<div class="action-buttons">
|
||||
<button id="btn-audio-toggle" class="btn-action" style="color: var(--color-cyan); border-color: rgba(0,240,255,0.4); background: rgba(0,240,255,0.1);">🔊 SFX OFF [M]</button>
|
||||
<button id="btn-reset" class="btn-action">🔄 위치 초기화 [Space]</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/static/js/audio.js"></script>
|
||||
<script src="/static/js/radar.js"></script>
|
||||
<script src="/static/js/drone_model.js"></script>
|
||||
<script src="/static/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user