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,maximum-scale=1,user-scalable=no">
<title>舰载飞行 · 起降认证 | CARRIER AIR OPS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root{
  --hud:#7dffb2; --hud-dim:rgba(125,255,178,.5); --amber:#ffb545; --red:#ff5f5f; --cyan:#7fd4ff;
  --panel:rgba(6,15,23,.8); --line:rgba(125,255,178,.3);
  --disp:'Rajdhani','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'Share Tech Mono','Rajdhani',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#04101a;font-family:var(--disp);color:#dff3e6;user-select:none;-webkit-user-select:none}
#scene{position:fixed;inset:0}
#scene canvas{display:block}
.off{display:none!important}
.panel{background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));}
.mono{font-family:var(--mono)}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;transition:opacity .6s}
#hud.off{opacity:0;visibility:hidden}
#hud-top{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#mission{padding:10px 16px;min-width:230px}
#phase{font-size:22px;font-weight:700;letter-spacing:1px;color:var(--hud)}
#phase-sub{font-size:12px;color:var(--hud-dim);letter-spacing:1px;margin-top:2px}
#stat{margin-top:8px;font-size:13px;color:#bfe8cf;display:flex;gap:12px}
#stat b{color:#fff;font-weight:600}
#compass{display:flex;flex-direction:column;align-items:center;gap:4px}
#dial{width:76px;height:76px;border:1px solid var(--line);border-radius:50%;position:relative;background:rgba(6,15,23,.6)}
#dial::after{content:'';position:absolute;left:50%;top:4px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--hud)}
#dial-ship{position:absolute;inset:0}
#dial-ship::after{content:'';position:absolute;left:50%;top:7px;width:8px;height:8px;margin-left:-4px;background:var(--amber);clip-path:polygon(0 0,100% 50%,0 100%)}
#hdg{font-size:18px;color:var(--hud)}
#shipdist{font-size:11px;color:var(--hud-dim);letter-spacing:1px}
#checklist{padding:10px 14px;display:flex;flex-direction:column;gap:6px;min-width:150px}
#chips{display:flex;flex-wrap:wrap;gap:5px;max-width:190px}
.chip{font-size:10px;letter-spacing:1px;padding:2px 7px;border:1px solid rgba(255,255,255,.18);color:#8fa8b5;background:rgba(255,255,255,.04)}
.chip.ok{color:#06220f;background:var(--hud);border-color:var(--hud);font-weight:700}
.chip.warn{color:#241300;background:var(--amber);border-color:var(--amber);font-weight:700}
.chip.bad{color:#fff;background:var(--red);border-color:var(--red);font-weight:700;animation:blink 1s steps(2) infinite}
#checklist .ttl{font-size:10px;letter-spacing:2px;color:var(--hud-dim)}
/* 中央指引 */
#center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0}
#xhair{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:1px solid var(--hud-dim)}
#xhair::before,#xhair::after{content:'';position:absolute;background:var(--hud-dim)}
#xhair::before{left:50%;top:-8px;width:1px;height:44px}
#xhair::after{top:50%;left:-8px;height:1px;width:44px}
#warn{position:absolute;top:52px;left:0;transform:translateX(-50%);font-size:20px;font-weight:700;letter-spacing:3px;color:var(--red);white-space:nowrap;text-shadow:0 0 12px rgba(255,60,60,.7)}
#warn.blink{animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
#ols{position:absolute;left:-190px;top:-70px;display:flex;gap:10px;align-items:stretch;transition:opacity .3s}
#ols.hide{opacity:0}
.mb-col{width:14px;height:140px;background:rgba(6,15,23,.7);border:1px solid var(--line);position:relative;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:6px 0}
.mb-dot{width:7px;height:7px;border-radius:50%;background:#35e08a;box-shadow:0 0 6px #35e08a}
#mb-ball{position:absolute;left:1px;width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);transition:background .15s}
#mb-ball.good{background:#35e08a;box-shadow:0 0 10px #35e08a}
#mb-ball.low{background:var(--red);box-shadow:0 0 12px var(--red)}
.mb-side{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--hud-dim);letter-spacing:1px;padding:2px 0}
#lat-wrap{position:absolute;left:-70px;top:86px;width:140px}
#lat-bar{height:6px;border:1px solid var(--line);background:rgba(6,15,23,.7);position:relative}
#lat-bar::after{content:'';position:absolute;left:50%;top:-3px;width:1px;height:12px;background:var(--hud-dim)}
#lat-needle{position:absolute;top:-4px;width:4px;height:14px;background:var(--cyan);left:50%;margin-left:-2px;box-shadow:0 0 6px var(--cyan)}
#gs-val{position:absolute;left:0;top:14px;width:100%;text-align:center;font-size:11px;color:var(--hud-dim)}
/* 左下速度 */
#spd-box{position:absolute;left:22px;bottom:26px;width:170px}
#spd-box .lab,#alt-box .lab{font-size:10px;letter-spacing:2px;color:var(--hud-dim)}
#spd{font-size:46px;font-weight:700;color:var(--hud);line-height:1;text-shadow:0 0 14px rgba(125,255,178,.35)}
#spd-box .unit{font-size:12px;color:var(--hud-dim);margin-left:4px}
#spd-bar{height:5px;background:rgba(255,255,255,.08);margin-top:6px}
#spd-fill{height:100%;width:0;background:var(--hud)}
#mach{font-size:11px;color:var(--hud-dim);margin-top:4px}
/* 中下姿态仪 */
#adi{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:132px;height:132px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:#08131c;box-shadow:0 0 24px rgba(0,0,0,.5)}
#adi-hz{position:absolute;left:-50%;top:-50%;width:200%;height:200%}
#adi-hz .sky{position:absolute;left:0;top:0;width:100%;height:50%;background:linear-gradient(#3f83c4,#6fb0dd)}
#adi-hz .sea{position:absolute;left:0;top:50%;width:100%;height:50%;background:linear-gradient(#4a3a26,#2c2317)}
#adi-hz::after{content:'';position:absolute;left:0;top:50%;width:100%;height:2px;background:#fff;transform:translateY(-1px)}
#adi-wing{position:absolute;left:50%;top:50%;width:64px;height:14px;transform:translate(-50%,-50%);border-bottom:3px solid #ffd23f;border-left:3px solid #ffd23f;border-right:3px solid #ffd23f}
#adi::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 26px rgba(0,0,0,.65)}
/* 右下高度/油门 */
#alt-box{position:absolute;right:88px;bottom:26px;width:160px;text-align:right}
#alt{font-size:40px;font-weight:700;color:v.........完整代码请登录后点击上方下载按钮下载查看