開源 Web-based 四軸飛行器目視（Line-of-Sight）飛行訓練模擬器
模擬真實 5 吋 FPV 四軸飛行器的飛行物理，採用 Betaflight 風格的 Rates 系統， 在瀏覽器中練習從起飛懸停到 8 字飛行的完整技能。純前端、零安裝、即開即飛。
- 開啟 Live Demo
- 接搖桿（Xbox / PS / RadioMaster / DJI 都可，瀏覽器自動偵測）；或選擇鍵盤、觸控
- 第一次進入會自動套用「新手難度 + 置中型搖桿 + ALT_HOLD 定高模式」，最容易上手
- 點 🚀 一鍵自動配置 → 動每根桿讓系統自動偵測軸映射 → 進入關卡
- 按手把上的 A / X 鍵（或
Space）解鎖馬達 → 推搖桿起飛
置中型搖桿（Xbox / PS）一般用法：油門桿在中間 = 50% 油門 = 自動懸停（DJI 風格 ALT_HOLD）；推上爬升、拉下降。
不置中型 RC 飛手桿（DJI RC3 / RadioMaster Pocket）：在設定畫面選「🛩️ 不置中型」，預設改 ANGLE，桿位直接對應油門 0~100%。
- 模擬 600g 5 吋 FPV 四軸飛行器，最大推力 28N
- Betaflight 風格 Rates 系統：基礎 Rate、SuperRate、Expo 曲線可依難度調整
- 二次方空氣阻力（drag coefficient 0.015）+ 角速度阻尼（angular drag 15）
- 真實地面碰撞：高速撞地彈跳（70% 能量損耗）、紅閃 + 鏡頭抖動回饋
- 50m 軟頂限制，防止飛出可視範圍
| 難度 | rates | superRate | 最大傾角 | 油門曲線 | 對應角速度 |
|---|---|---|---|---|---|
| 🌱 新手（預設） | 0.30 | 0.0 | 20° | 0.6（很溫和） | ~180°/s |
| ⚡ 一般 | 0.80 | 0.3 | 40° | 0.4 | ~480°/s |
| 🔥 專家 | 1.20 | 0.7 | 55° | 0.3（線性） | ~720°/s |
設定面板 radio 即時切換，存於 localStorage 跨 session 記憶。
| 鍵 | 模式 | 適合 |
|---|---|---|
1 |
Angle 自穩 | 鬆桿自動回平，初學者入門 |
2 |
Horizon 半自穩 | 中位自穩、滿桿手動，過渡用 |
3 |
Acro 手動 | 純角速度控制，FPV 訓練 |
4 |
Alt Hold 定高（置中桿預設） | 鬆桿懸停，DJI 風格最直覺 |
從基礎起飛定高，到穿門、8 字飛行、L8 模擬考試。L8 為台灣 CAA 基本級術科考試模擬，含對應 CAA AC107-005A 規格的雙圓考場（圓心 ±6m，內 4m / 中 6m 虛線 / 外 8m）。
| 方式 | 操作 | 適合 |
|---|---|---|
| 🎮 手把 A / X 按鈕 | 按一下切換 | 最快，遊戲手把首選 |
| 🤘 內八手勢 | 左搖桿右下 + 右搖桿左下 hold 2 秒 | FPV 真實作法 |
| 🤙 外八手勢 | 左搖桿左下 + 右搖桿右下 hold 2 秒 | 上鎖（disarm） |
| ⌨️ 鍵盤 Space | 隨時切換 | 鍵盤模式 |
設定畫面 / 遊戲畫面 ARMED 區會即時顯示「🤘 ARMING XX%」hold 進度。
無人機降落到 H 點 1m 內 + 高度 < 1.5m 時，H 字會動態亮螢光綠，協助飛手判斷降落精準度（致謝 @tamago797）。
頁面左上角 🎨 配色面板（點開合）即時調整 + localStorage 持久化：
- 草地：外圈 / 內圈各自 picker + 5 個 preset（森林預設 / 中綠 / 鮮 / 深 / 高爾夫）
- 天空：高 / 中 / 地平線三色 picker + 6 個 preset（預設 / 晴朗白天 / 陰天 / 黃昏 / 夜晚 / 清晨）
- 霧色：picker + 5 個 preset
- 曝光對比：滑桿 0.4 ~ 1.5（預設 0.4 = 最深 / 最高對比）
- Three.js 即時 3D 渲染，PCFSoft 陰影系統（4096×4096 shadow map）
- 場景物件：25 棵隨機樹木、3 棟建築、圍欄、H 型降落場、風向袋、雙圓考場標線
- 無人機模型：4 臂、前綠後紅 LED（前閃後常亮）+ halo 光暈 + 機腹白色下投光（LOS 飛遠時鎖位）
- 第三人稱 LOS 視角：固定觀察點，攝影機平滑跟隨
| 類型 | 油門邏輯 | 適用硬體 |
|---|---|---|
| 🎮 置中型 | ALT_HOLD position mode（鬆桿回中=50%=PID 懸停，DJI 風）+ ACRO/ANGLE rate mode（鬆桿油門保持，FPV 風） | Xbox / PS / 一般 USB 手把 |
| 🛩️ 不置中型 RC | 全模式 position mode（桿位直接 = 油門 0~100%） | DJI RC3 / RadioMaster Pocket / Boxer / TX16S |
- 鍵盤：即開即玩，A/D 偏航、
W/S油門、方向鍵姿態 - 搖桿：Gamepad API，自動偵測軸 / 反轉 / 中點 / 端點校正
- 觸控：手機雙虛擬搖桿 + ARM/MODE 按鈕
- 過關自動解鎖下一關
- 最佳成績記錄到 localStorage（跨 session 持久化）
- 即時進度條與完成時間顯示
| 按鍵 | 功能 | 說明 |
|---|---|---|
W |
油門升 | 按住增加油門 |
S |
油門降 | 瞬間油門歸零 |
↑ / ↓ |
俯仰 | 前進 / 後退傾斜 |
← / → |
橫滾 | 左右傾斜 |
A / D |
偏航 | 左右轉向（Yaw，A=左 / D=右） |
Shift |
精準模式 | 按住時操控量 ×0.4（降低靈敏度） |
Space |
Arm / Disarm | 解鎖或鎖定馬達 |
1 ~ 4 |
飛行模式切換 | Angle / Horizon / Acro / Alt Hold |
R |
重置 | 重置無人機位置與姿態 |
K |
切換輸入 | 鍵盤 ↔ 搖桿模式切換 |
ESC |
離開 | 遊戲中返回關卡選擇；關卡選擇中返回設定畫面 |
支援標準 Gamepad API（Xbox / PS / RadioMaster / DJI 都可），自動偵測。
| 功能 | 行為依搖桿類型 |
|---|---|
| 油門 | 置中桿 + ALT_HOLD = position mode（鬆桿回中 = 50% PID 懸停） / 其他模式 = rate mode（鬆桿保持當前油門）；不置中 RC 桿 = 全模式 position mode |
| 偏航 | 左 / 右轉向（已修正 Three.js Y+ CCW 對應，左推 = 左轉） |
| 俯仰 | 前 / 後傾斜 |
| 橫滾 | 左 / 右傾斜 |
| 解鎖 | 4 種方式（按鈕 0 / 內八手勢 / 外八手勢 / 鍵盤 Space） |
| 模式 | 鍵盤 1~4 切換；或將任一搖桿 axis 綁到「模式」做 4 段切換 |
校正功能（設定畫面）：
- 🚀 一鍵自動配置：搖動左搖桿 3 秒，自動偵測油門 / 偏航軸；右搖桿同理
- 所有軸支援反轉勾選
- 死區（Deadzone）：12%（微小雜訊自動過濾）
- 中點校正：記錄搖桿中立位置作為零點
- 端點校正：記錄 Min / Max 值，自動映射至 ±1
搖桿類型 + 難度設定會記憶在 localStorage，下次開頁面自動恢復。
| 參數 | 值 |
|---|---|
| 最大傾角 | 55° |
| 穩定方式 | 四元數 SLERP（因子 5.0 × dt） |
| 偏航控制 | 角速度（最大速率 50%） |
| 特性 | 鬆桿自動回正，搖桿映射目標角度 |
適合對象： 初學者入門。搖桿映射傾斜角度而非角速度，放手就回平。
| 參數 | 值 |
|---|---|
| 半自穩公式 | 搖桿量³（三次方曲線） |
| 中位 | 接近 Angle 模式（自穩） |
| 滿桿 | 接近 Acro 模式（角速度控制） |
| 角度修正 | 比例回饋 (0 - 角度) × 5.0 |
適合對象： 進階練習。中位有自穩保護，滿桿可做翻滾等動作。
| 參數 | 值 |
|---|---|
| 基礎速率 | 600° × rates（1.2）= 720°/s |
| SuperRate | 0.7（滿桿額外加速） |
| 速率公式 | `baseRate × |
| 角速度阻尼 | rotVel.lerp(target, 5 × dt) |
適合對象： 高手挑戰。純角速度控制，無自動回正，必須手動修正所有姿態。
| 參數 | 值 |
|---|---|
| 懸停推力 | mass × gravity = 5.886N |
| 油門死區 | 40% ~ 60%（中位） |
| 中位行為 | PD 控制器精確定高（kP=8, kD=5×mass），鎖定目標高度不飄移 |
| 高於 60% | 爬升：hover + (input - 0.6) / 0.4 × thrustPower × 0.5 |
| 低於 40% | 下降：hover × (1 - (0.4 - input) / 0.4 × 0.8) |
| 姿態控制 | 同 Angle 模式 |
適合對象： 最簡單的模式。油門中位自動維持高度，專注練習方向控制。
| 關卡 | 名稱 | 任務目標 | 過關條件 |
|---|---|---|---|
| 1 | 起飛定高 | 起飛並維持 2~3m 高度 | 在目標高度維持 3 秒（離開目標區計時器僅 ×0.5 速度倒扣，較寬容） |
| 2 | 定點懸停 | 在綠色方框內懸停 | 方框內（±1.25m）穩定 3 秒 |
| 3 | 前後平移 | 飛到前方 10m 標記點再返回 | 依序觸及兩個航點（距離 < 1.8m） |
| 4 | 左右平移 | 依序飛到左方與右方標記點 | 依序觸及兩個航點（距離 < 1.8m） |
| 5 | 矩形航線 | 依序飛過 4 個航點完成矩形 | 依序觸及 4 個航點（距離 < 1.8m） |
| 6 | 穿越拱門 | 穿越前方的大型環形門 | 通過拱門中心（距離 < 2m） |
| 7 | 8 字飛行 | 繞兩根柱子畫 8 字形航線 | 依序通過 6 個檢查點（距離 < 2.5m） |
| 8 | 模擬考試 | 台灣無人機基本級術科模擬（20 步驟） | 依序完成所有步驟 |
第 8 關：台灣 CAA 無人機基本級術科模擬考試
模擬台灣民航局無人機基本級術科測驗，共 20 個步驟，分為三個階段：
-
Phase 1 — 定點起降與四面停懸：起飛 → 4 次 90° 偏航停懸（機頭分別朝前、右、後、左）→ 降落
-
Phase 2 — 矩形航線順時針：從 H 起飛 → P1 → P2 → P3 → P4 → 返回 H
-
Phase 2b — 矩形航線逆時針：從 H 起飛 → P4 → P3 → P2 → P1 → 返回 H
-
最終降落：完成所有航線後精準降落於 H 降落場
-
過關後自動解鎖下一關
-
成績（用時秒數）自動記錄到瀏覽器 localStorage
-
即時進度條顯示完成百分比
| 技術 | 說明 |
|---|---|
| Three.js r128 | 3D 渲染引擎（CDN 載入，無需安裝） |
| JavaScript ES6 Modules | 模組化架構，原生 import/export |
| Gamepad API | 搖桿輸入支援 |
| localStorage | 成績與解鎖資料持久化 |
| GitHub Pages | 靜態部署，無需後端 |
無需 npm、bundler 或任何建置工具，直接開啟 index.html 即可運行。
├── index.html # 主頁面 + UI 樣式 + 設定畫面 + 關卡選擇 + HUD
└── src/
├── Config.js # 物理參數、飛行模式定義、8 關卡資料
├── Input.js # 鍵盤/搖桿輸入（校正、死區、通道映射）
├── Physics.js # 物理引擎（推力、重力、阻力、碰撞、姿態控制）
├── Scene.js # 3D 場景（環境物件、無人機模型、燈光、攝影機）
├── LevelManager.js # 關卡管理（目標生成、勝利判定、解鎖系統）
└── main.js # 主遊戲迴圈、UI 更新、事件調度
以下為 Config.js 定義的核心物理參數：
| 參數 | 值 | 說明 |
|---|---|---|
gravity |
9.81 m/s² | 重力加速度 |
mass |
0.6 kg | 無人機質量（模擬 5 吋機） |
maxThrust |
28.0 N | 四馬達最大推力 |
dragCoeff |
0.04 | 二次方空氣阻力係數 |
angularDrag |
8.0 | 角速度阻尼係數 |
hardDeck |
0.05 m | 地面碰撞高度閾值 |
maxHeight |
50 m | 軟頂限制高度 |
thrustPower |
18 | 推力縮放因子 |
thrustExpo |
0.3 | 油門 Expo 曲線權重 |
rates |
1.2 | 基礎角速率倍數 |
superRate |
0.7 | 滿桿加速因子 |
maxTiltAngle |
55° | 自穩模式最大傾角 |
droneScale |
3.0 | 無人機視覺縮放倍率 |
每幀（dt 上限 0.1s）依序計算：
- 推力計算：油門輸入 → Expo 曲線 → 推力向量（沿無人機本地上方向）
- 外力合成：推力 + 重力（
-mass × gravity）+ 空氣阻力（-dragCoeff × speed²） - 速度與位置積分：
velocity += acceleration × dt→position += velocity × dt - 地面碰撞處理：高速撞地彈跳（
vel.y × -0.3）、側向衰減、隨機旋轉擾動 - 姿態控制：依飛行模式計算目標角速度，四元數插值更新姿態
- 軟頂限制：超過 50m 高度時
vel.y × 0.95逐漸減速
- 燈光：半球光（天地雙色）+ 方向光（帶陰影）+ 環境光
- 陰影：PCFSoft 柔邊陰影，解析度 2048×2048
- 霧效：指數霧
FogExp2（密度 0.005），自然淡出遠景 - 效能：像素比上限 2x、霧效減少遠景渲染負擔
- 螺旋槳動畫：葉片轉速
0.5 + throttle × 2.0 rad/frame，碟面透明度隨油門變化
- 修復記憶體洩漏：切換關卡時正確 dispose 舊的 geometry / material / texture，防止 GPU 記憶體累積
- 修復 AudioContext 自動播放政策：新增
ctx.resume()，Chrome / Safari 馬達音效正常播放 - 修復物理參數面板無法顯示：toggle 時切換
display: flex / none - 修復羅盤方位反轉：Three.js Y 軸旋轉取反，右轉時方位角正確遞增
- 修復幀率依賴問題：螺旋槳轉速、雲朵移動、攝影機跟隨改為基於 dt，不同幀率行為一致
- 修復搖桿校準預設值：從特定搖桿偏移值 0.00392 改為通用零點 0
- 新增水平邊界軟限制：超過 80m 後逐漸減速回拉，防止飛機飛出場地外消失
- 修復術科考降落判定：加入速度檢查（< 1.5 m/s），高速撞地不算降落過關
- 重構 ANGLE/ALT_HOLD 姿態控制：抽出共用
_applyAngleAttitude()，消除重複程式碼
- L8 術科模擬考試：第 8 關改為台灣 CAA 無人機基本級術科模擬考試（20 步驟），涵蓋定點起降、四面停懸、矩形航線順逆時針
- 飛行模式中文名稱修正：ANGLE=自穩、HORIZON=半自穩、ACRO=手動、ALT_HOLD=定高
- 手機觸控模式：新增雙虛擬搖桿觸控操控，支援 ARM/MODE 按鈕
- Alt Hold 鍵盤操控修正：改為固定油門值（放開=50% 定高、W=80% 爬升、S=20% 下降）
- Shift 精準模式修正：Shift 鍵改為降低靈敏度（操控量 ×0.4），精細操控而非加速
- Alt Hold PD 控制器：定高模式改用 PD 高度控制器（kP=8, kD=5×mass），精確鎖定高度不飄移
- 第 1 關寬容度提升：離開目標高度時計時器倒扣速度由 ×2 降為 ×0.5，更容易過關
- ESC 返回設定畫面：在關卡選擇畫面按 ESC 可返回設定畫面
- Space 防連發：Space 鍵不再自動重複觸發，防止誤操作
- 幀率獨立油門：油門增減與衰減改為時間制（基於 deltaTime），不同幀率下行為一致
- 撞地特效衰減修正：crashIntensity 衰減改為幀率獨立（
Math.pow(0.92, dt×60)）
- 場景升級：精緻 3D 環境（25 棵樹木、3 棟建築、圍欄、H 型降落場、風向袋）
- 陰影系統：PCFSoft 柔邊陰影（2048×2048 shadow map）
- 無人機模型：四軸放大 3 倍，紅藍馬達、旋轉螺旋槳、LED 指示燈
- LOS 視角：固定觀察點第三人稱視角，攝影機平滑跟隨
- 8 關卡系統：從起飛定高到模擬考試的完整訓練路徑
- 關卡選擇畫面：顯示解鎖狀態與最佳成績
- Alt Hold 定高模式：油門中位自動維持高度，初學者友善
- 撞地回饋：紅色閃光 + 攝影機抖動，衝擊力度正比於撞擊速度
- 俯仰方向修正：修正搖桿俯仰映射方向
- 攝影機跟隨高度：攝影機隨無人機高度平滑調整視角
- 關卡解鎖系統：過關自動解鎖下一關，鎖定關卡灰化顯示
- 移除飛手模型：簡化場景，消除視覺干擾
- R 鍵重置功能：一鍵重置無人機位置與姿態
- 運算子優先順序修正：修正物理計算邏輯錯誤
- 定高標記可見度修正：確保高度指示器在所有條件下正確顯示
- 搖桿端點校正：支援 Min/Max 端點自動校正
- 基礎 LOS 飛行模擬
- Acro / Angle / Horizon 三種飛行模式
- 搖桿 + 鍵盤雙輸入支援
- 2 個基礎訓練關卡
- 真實 FPV 無人機造型
- 鍵盤油門（按住飛行、放開下降）
- 效能優化
# 克隆專案
git clone https://github.com/m72900024/LOS-Flight-Simulator.git
cd LOS-Flight-Simulator
# 啟動本地伺服器（ES Modules 需要 HTTP 伺服器）
npx serve .
# 或
python3 -m http.server 8000開啟瀏覽器前往 http://localhost:8000 即可。
注意：由於使用 ES6 Modules，直接開啟
index.html（file://協定）可能因 CORS 限制無法正常載入模組。請使用 HTTP 伺服器。
歡迎任何形式的貢獻！
- Fork 此專案
- 建立功能分支：
git checkout -b feature/your-feature - 提交變更：
git commit -m "feat: add your feature" - 推送分支：
git push origin feature/your-feature - 開啟 Pull Request
- 新增訓練關卡
- 改善飛行物理模型
- 新增 FPV（第一人稱）視角模式
- 多語系支援
- 手機觸控控制
- 音效系統
- 台灣交通部民航局 — AC107-005 遙控無人機術科測驗規範 為 L8 模擬考試的設計依據。
- Betaflight — 飛行模式（ANGLE / HORIZON / ACRO）、Rates 系統與 Expo 曲線的設計參考。
- @tamago797 — 開源無人機術科模擬器先行者，本專案的「雙圓考場標線」（內 4m / 中 6m 虛線 / 外 8m）與「智慧 H 停機坪 < 1m 動態亮綠」設計取材自其 Drone-Simulator-，依公開授權聲明取用。
想完整準備台灣 CAA 無人機基本級考試？建議搭配：
- 🎯 本專案 LOS-Flight-Simulator — 術科 8 關卡 + L8 模擬考
- 📝 tamago797/Drone-Exam — 學科 40 題隨機抽題模擬
兩者並用即可一站式練習術科 + 學科。
本專案採用 MIT License 授權。
- 本模擬器僅供練習用，不能取代實機飛行訓練。 真實無人機操作涉及天氣、電磁干擾、機械故障、法規限制等模擬器無法重現的變因。
- 通過 L8 模擬考試不代表能通過台灣民航局實際術科測驗。考試內容、評分標準、考場規格以民航局公告為準。
- 模擬器內的物理模型為簡化版（單剛體 + Betaflight Rates 假設），與真實 5 吋 FPV 機 / 大疆機種的飛行手感不完全一致。
- 使用本模擬器產生的飛行偏好（如靈敏度、模式選擇）不可直接套用到真實飛行器，請以實際機種設定為準。
- 本專案由 AI 輔助開發，可能存在 bug 或設計缺陷。如發現問題請至 Issues 回報。
- 遵守當地法規：操作真實無人機時，請務必遵守台灣《遙控無人機管理規則》及空域限制；本專案不為使用者違法行為負責。