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.0">
<title>虹川国际机场 · 飞行模拟塔</title>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Share+Tech+Mono&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --amber:#ffb43a; --amber2:#ffd28a; --green:#69e58c; --red:#ff5d5d; --cyan:#6fd6e8;
  --ink:#e8eef4; --dim:#8fa3b5;
  --panel:rgba(9,14,20,.80); --panel2:rgba(13,20,28,.94);
  --line:rgba(140,180,220,.22);
  --mono:'Share Tech Mono',monospace; --disp:'Chakra Petch','Noto Sans SC',sans-serif; --cn:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#06090d;font-family:var(--cn);color:var(--ink)}
canvas{display:block}
#scene{position:fixed;inset:0}
.hidden{display:none!important}
.panel{background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.btn{font-family:var(--disp);font-weight:600;letter-spacing:.08em;cursor:pointer;
  background:rgba(20,30,42,.9);color:var(--ink);border:1px solid var(--line);
  padding:10px 20px;font-size:14px;transition:all .18s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.btn:hover{border-color:var(--amber);color:var(--amber2);transform:translateY(-2px);box-shadow:0 4px 16px rgba(255,180,58,.18)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--amber);color:#1a1206;border-color:var(--amber)}
.btn.primary:hover{background:var(--amber2);color:#1a1206}
kbd{font-family:var(--mono);background:rgba(255,255,255,.08);border:1px solid var(--line);
  border-bottom-width:2px;padding:1px 6px;font-size:11px;color:var(--amber2)}

/* ============ 开始屏幕:离港信息牌风格 ============ */
#start{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;overflow-y:auto;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(30,60,90,.35), transparent 55%),
    repeating-linear-gradient(0deg, rgba(120,160,200,.045) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(120,160,200,.045) 0 1px, transparent 1px 44px),
    #080d13;}
#start .wrap{width:min(1180px,94vw);padding:26px 0}
.topbar{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);
  font-size:12px;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:10px;letter-spacing:.15em;flex-wrap:wrap;gap:6px}
.topbar .live{color:var(--green)}
.topbar .live::before{content:'●';animation:blink 1.4s infinite;margin-right:6px}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
.head{display:flex;gap:34px;align-items:flex-end;margin:26px 0 8px;flex-wrap:wrap}
.kicker{font-family:var(--mono);color:var(--amber);letter-spacing:.35em;font-size:12px;margin-bottom:8px}
h1.title{font-family:var(--disp);font-weight:700;font-size:clamp(42px,6.5vw,80px);line-height:1;letter-spacing:.03em}
h1.title em{font-style:normal;color:var(--amber)}
.sub{color:var(--dim);font-size:14px;margin-top:10px;letter-spacing:.12em}
.radar{width:150px;height:150px;border-radius:50%;position:relative;flex:none;margin-left:auto;
  border:1px solid rgba(105,229,140,.4);
  background:repeating-radial-gradient(circle at center, rgba(105,229,140,.12) 0 1px, transparent 1px 24px),
             radial-gradient(circle at center, rgba(105,229,140,.06), transparent 70%);}
.radar::before,.radar::after{content:'';position:absolute;background:rgba(105,229,140,.25)}
.radar::before{left:50%;top:0;width:1px;height:100%}
.radar::after{top:50%;left:0;height:1px;width:100%}
.radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(105,229,140,.55), transparent 70deg);
  animation:sweep 3.2s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar .blip{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--green);animation:blink 3.2s infinite}
.board{margin:20px 0;border:1px solid var(--line);background:rgba(5,9,14,.7)}
.board .bhead,.frow{display:grid;grid-template-columns:110px 1fr 130px 110px 120px;gap:8px;padding:8px 16px;align-items:center}
.board .bhead{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.2em;border-bottom:1px solid var(--line)}
.frow{font-family:var(--mono);font-size:14px;border-bottom:1px solid rgba(140,180,220,.08);transition:background .2s}
.frow:hover{background:rgba(255,180,58,.07)}
.frow .flt{color:var(--amber2)} .frow .dest{color:var(--ink);font-family:var(--cn)}
.frow .st{font-size:12px;letter-spacing:.1em}
.st.dep{color:var(--green)} .st.arr{color:var(--cyan)} .st.dly{color:var(--red);animation:blink 1.6s infinite}
.sect{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.3em;color:var(--dim);margin:22px 0 10px}
.sect::after{content:'';display:inline-block;width:60px;height:1px;background:var(--line);vertical-align:middle;margin-left:12px}
.wxgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.wxcard{border:1px solid var(--line);background:rgba(12,18,26,.85);padding:14px 12px;cursor:pointer;
  transition:all .18s;position:relative;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.wxcard:hover{transform:translateY(-3px);border-color:var(--cyan)}
.wxcard.sel{border-color:var(--amber);background:rgba(60,42,12,.5);box-shadow:0 0 0 1px var(--amber),0 6px 20px rgba(255,180,58,.15)}
.wxcard.sel::after{content:'✓ 已选';position:absolute;top:6px;right:8px;font-size:10px;color:var(--amber);font-family:var(--mono)}
.wxcard .ico{font-size:26px} .wxcard .nm{font-family:var(--disp);font-weight:600;font-size:15px;margin:6px 0 2px}
.wxcard .mt{font-family:var(--mono);font-size:10px;color:var(--dim);line-height:1.5}
.ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 22px;font-size:13px;color:var(--dim)}
.ctrls div{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(140,180,220,.12);padding:5px 0}
.launch{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.launch .btn.primary{font-size:18px;padding:14px 44px}
.assistRow{display:flex;gap:18px;font-size:13px;color:var(--dim);align-items:center;flex-wrap:wrap}
.assistRow label{cursor:pointer;display:flex;gap:6px;align-items:center}
.assistRow input{accent-color:var(--amber)}
.note{font-size:12px;color:var(--dim)}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:var(--mono)}
#hud .corner{position:absolute;pointer-events:auto}
.tl{top:14px;left:14px;padding:10px 16px}
.tl .lbl{font-size:10px;color:var(--dim);letter-spacing:.25em}
.tl .big{font-size:30px;color:var(--amber2);line-height:1.1}
.tl .row2{font-size:12px;color:var(--green);margin-top:2px}
.tc{top:14px;left:50%;transform:translateX(-50%);width:min(520px,60vw);padding:8px 14px}
.atcline{font-size:12px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atcline .tag{color:var(--amber);margin-right:8px}
.atcline.old{opacity:.45}
.tr{top:14px;right:14px;padding:10px 14px;min-width:230px}
.tr .wxname{font-family:var(--disp);font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px}
.tr .windrow{display:flex;align-items:center;gap:10px;margin:6px 0 4px;font-size:13px}
.tr .warrow{display:inline-block;color:var(--cyan);font-size:18px;transition:transform .6s}
.tr .metar{font-size:9.5px;color:var(--dim);line-height:1.5;letter-spacing:.04em}
.tr .btns{display:flex;gap:6px;margin-top:8px}
.tr .btns .btn{padding:5px 10px;font-size:11px}
.bl{bottom:14px;left:14px;padding:12px 16px;max-width:300px}
.bl .obj{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--amber2)}
.bl .hint{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.5}
.bl .ringrow{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--green)}
.bl .ringArrow{display:inline-block;font-size:18px;color:var(--amber);transition:transform .3s}
.br{bottom:14px;right:14px;padding:10px 14px;font-size:11px;color:var(--dim);line-height:1.9;max-width:250px}
.br b{color:var(--amber2);font-weight:normal}

.center{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:10px;align-items:flex-end;pointer-events:none}
.tape{position:relative;width:64px;height:210px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.tape .strip{position:absolute;left:0;width:100%}
.tape .tk{position:absolute;right:6px;color:var(--dim);font-size:10px;t.........完整代码请登录后点击上方下载按钮下载查看