three实现三维无人机飞行模拟控制训练体验代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维无人机飞行模拟控制训练体验代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>云隼 SKYFALCON · 四旋翼飞行模拟</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --hud:#7ce8c3; --hud2:#ffb454; --bad:#ff5f56;
  --panel:rgba(7,18,24,.58); --line:rgba(124,232,195,.32);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#06121a;
  font-family:"Rajdhani","PingFang SC","Microsoft YaHei",sans-serif;color:#dfeee9;
  user-select:none;-webkit-user-select:none}
canvas{display:block}
#scene{position:fixed;inset:0;z-index:0}
.num{font-family:"Orbitron",monospace}

/* ---------- 通用面板(切角 + 角标) ---------- */
.panel{position:absolute;z-index:10;background:linear-gradient(160deg,var(--panel),rgba(7,18,24,.34));
  border:1px solid var(--line);padding:10px 14px;backdrop-filter:blur(3px);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.panel h4{font-size:11px;letter-spacing:.35em;color:var(--hud);opacity:.85;margin-bottom:6px;font-weight:600}
.row{display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:13px;line-height:1.7;color:#b8d2cb}
.row b{color:#fff;font-weight:600}

/* ---------- 系统面板 ---------- */
#sysPanel{top:16px;left:16px;width:210px}
.batWrap{width:110px;height:9px;border:1px solid var(--line);padding:1px}
#batBar{height:100%;width:100%;background:var(--hud);transition:width .3s}
#batBar.mid{background:var(--hud2)}#batBar.low{background:var(--bad)}
#sig i{display:inline-block;width:4px;margin-left:2px;background:#274b42;vertical-align:bottom}
#sig i:nth-child(1){height:5px}#sig i:nth-child(2){height:8px}#sig i:nth-child(3){height:11px}#sig i:nth-child(4){height:14px}
#sig i.on{background:var(--hud)}

/* ---------- 罗盘 ---------- */
#compassWrap{top:14px;left:50%;transform:translateX(-50%);text-align:center;z-index:10;position:absolute}
#compassWin{width:340px;height:40px;overflow:hidden;position:relative;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(7,18,24,.66),rgba(7,18,24,.3));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
#compassTrack{position:absolute;top:0;left:0;height:100%;width:1728px;will-change:transform}
.tick{position:absolute;bottom:6px;width:1px;height:8px;background:rgba(124,232,195,.6)}
.tick.big{height:13px;background:var(--hud)}
.tick.lbl{top:3px;bottom:auto;height:auto;background:none;color:var(--hud);
  font-family:"Orbitron";font-size:10px;transform:translateX(-50%)}
#caret{position:absolute;left:50%;top:0;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--hud2)}
#hdgRead{margin-top:4px;font-size:13px;letter-spacing:.2em;color:#b8d2cb}
#hdgRead b{color:#fff;font-size:15px}

/* ---------- 任务面板 ---------- */
#missionPanel{top:16px;right:16px;width:215px;text-align:right}
#ringCnt{font-size:30px;color:var(--hud);line-height:1;margin-bottom:6px}
#ringCnt small{font-size:14px;color:#7fa79c}

/* ---------- 中央仪表簇 ---------- */
#cluster{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:10;
  display:flex;align-items:flex-end;gap:22px}
.gauge{text-align:center}
.gauge .v{font-size:36px;color:#fff;line-height:1;text-shadow:0 0 18px rgba(124,232,195,.35)}
.gauge .u{font-size:10px;letter-spacing:.3em;color:var(--hud);margin-top:3px}
.gauge .sub{font-size:11px;color:#8fb3a9;margin-top:2px}
#horizon{width:96px;height:96px;border-radius:50%;overflow:hidden;position:relative;
  border:2px solid var(--line);box-shadow:0 0 24px rgba(0,0,0,.5),inset 0 0 18px rgba(0,0,0,.55)}
#hzIn{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;
  background:linear-gradient(180deg,#5f9fc9 0%,#8ec3e2 49.6%,#f2f7f5 49.6%,#f2f7f5 50.4%,#7a6a4c 50.4%,#54483a 100%)}
#horizon::after{content:"";position:absolute;left:28%;right:28%;top:50%;height:2px;background:var(--hud2);
  box-shadow:0 0 6px var(--hud2)}

/* ---------- 提示 / 油门 ---------- */
#hintPanel{bottom:16px;left:16px;font-size:12px;line-height:2;color:#9fc0b7;width:200px}
kbd{display:inline-block;min-width:20px;text-align:center;padding:0 5px;margin-right:6px;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;background:rgba(124,232,195,.08);
  font-family:"Rajdhani";font-size:11px;color:var(--hud)}
#thrWrap{bottom:16px;right:16px;text-align:center;z-index:10;position:absolute}
#thrTrack{width:14px;height:118px;border:1px solid var(--line);margin:0 auto 6px;position:relative;
  background:repeating-linear-gradient(0deg,rgba(124,232,195,.12) 0 1px,transparent 1px 12px)}
#thrFill{position:absolute;bottom:0;left:0;right:0;height:0%;background:linear-gradient(180deg,var(--hud2),var(--hud))}
.........完整代码请登录后点击上方下载按钮下载查看