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>S1 线 · 地铁列车模拟驾驶 — 隧道运行与对标停车考试</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#0a0e13; --panel:rgba(15,22,31,.94); --edge:#24384d; --ink:#e8f0f7; --dim:#8fa3b8;
  --grn:#37d67a; --amb:#ffb648; --red:#ff5d5d; --cyn:#5ad1ff; --line:#00b39b;
  --disp:'ZCOOL QingKe HuangYou',system-ui; --body:'Noto Sans SC',system-ui; --num:'Chakra Petch','Noto Sans SC',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body)}
#app{position:fixed;inset:0}
canvas.webgl{display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(0,0,0,.55) 100%)}
.hidden{display:none!important}

/* ---------- 面板通用 ---------- */
.panel{background:linear-gradient(160deg,rgba(19,28,39,.95),rgba(11,17,24,.95));
  border:1px solid var(--edge);border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,.55);position:relative}
.panel::before{content:'';position:absolute;left:0;top:0;height:2px;width:46%;
  background:linear-gradient(90deg,var(--line),transparent);border-radius:2px}

/* ---------- 开始界面：调度台风格 ---------- */
#start{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:4vh 5vw;
  background:
   radial-gradient(1100px 560px at 12% -8%,rgba(0,179,155,.14),transparent 60%),
   radial-gradient(900px 520px at 92% 112%,rgba(255,182,72,.10),transparent 60%),
   repeating-linear-gradient(0deg,rgba(120,160,200,.045) 0 1px,transparent 1px 46px),
   repeating-linear-gradient(90deg,rgba(120,160,200,.045) 0 1px,transparent 1px 46px),
   var(--bg)}
#start::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;
  background:repeating-linear-gradient(-45deg,var(--line) 0 18px,#0c1116 18px 36px);
  animation:stripeMove 1.4s linear infinite;opacity:.85}
@keyframes stripeMove{to{background-position:51px 0}}
.start-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3vw;max-width:1180px;width:100%;align-items:start}
.line-badge{width:84px;height:84px;border-radius:50%;background:var(--line);color:#04231d;display:flex;align-items:center;justify-content:center;
  font:700 40px var(--num);box-shadow:0 0 0 5px #0a0e13,0 0 0 7px var(--line),0 0 34px rgba(0,179,155,.5);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px #0a0e13,0 0 0 7px var(--line),0 0 0 7px var(--line),0 0 54px rgba(0,179,155,.75)}}
#start h1{font-family:var(--disp);font-weight:400;font-size:clamp(44px,5.6vw,76px);line-height:1.08;margin:18px 0 6px;letter-spacing:2px}
#start h1 em{font-style:normal;color:var(--line)}
#start .sub{color:var(--dim);font-size:15px;letter-spacing:6px;margin-bottom:26px}
.board{padding:18px 22px;font-family:var(--num)}
.board .row{display:flex;justify-content:space-between;gap:16px;padding:9px 2px;border-bottom:1px dashed #223448;font-size:15px;
  animation:fadeUp .5s both}
.board .row:nth-child(2){animation-delay:.08s}.board .row:nth-child(3){animation-delay:.16s}
.board .row:nth-child(4){animation-delay:.24s}.board .row:nth-child(5){animation-delay:.32s}
.board .row span{color:var(--dim)}.board .row b{font-weight:600;color:var(--ink)}
.board .row b.g{color:var(--grn)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ready{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--grn);margin-right:8px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.modes{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap}
.mode-btn{flex:1;min-width:220px;cursor:pointer;padding:18px 20px;border-radius:8px;text-align:left;transition:.18s;
  background:linear-gradient(180deg,#152030,#0d141d);border:1px solid #2b415a;color:var(--ink);font-family:var(--body)}
.mode-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.mode-btn .t{font-family:var(--disp);font-size:26px;letter-spacing:2px;display:block;margin-bottom:4px}
.mode-btn .d{font-size:12.5px;color:var(--dim)}
.mode-btn.prac:hover{border-color:var(--line);box-shadow:0 12px 30px rgba(0,179,155,.22)}
.mode-btn.prac .t{color:var(--line)}
.mode-btn.exam:hover{border-color:var(--amb);box-shadow:0 12px 30px rgba(255,182,72,.22)}
.mode-btn.exam .t{color:var(--amb)}
.mode-btn:active{transform:translateY(0) scale(.985)}
.side .panel{padding:18px 20px;margin-bottom:18px}
.side h3{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:2px;color:var(--cyn);margin-bottom:12px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13.5px;color:var(--dim);align-items:center}
kbd{font:600 12px var(--num);background:#1a2634;border:1px solid #33506d;border-bottom-width:3px;border-radius:5px;padding:2px 8px;color:var(--ink);white-space:nowrap}
.rule{font-size:13px;color:var(--dim);line-height:1.9}
.rule b{color:var(--ink);font-family:var(--num)}
.foot{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#5c7186;font-size:12px;letter-spacing:3px}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:var(--body)}
#topbar{position:absolute;top:14px;left:16px;right:16px;display:flex;gap:14px;align-items:stretch}
.tb{padding:10px 16px;display:flex;align-items:center;gap:14px}
.tb-left{flex:0 0 auto}
.badge-s{width:40px;height:40px;border-radius:50%;background:var(--line);color:#04231d;font:700 19px var(--num);display:flex;align-items:center;justify-content:center}
#nextName{font-family:var(--disp);font-size:26px;line-height:1;letter-spacing:2px}
#nextEn{font:600 10.5px var(--num);color:var(--dim);letter-spacing:2px;margin-top:3px}
.dist-box{margin-left:10px;text-align:right;border-left:1px solid #223448;padding-left:14px}
#distVal{font:700 34px var(--num);color:var(--cyn);line-height:1}
.dist-box .u{font:600 12px var(--num);color:var(--dim);margin-left:3px}
.dist-box .l{font-size:10.5px;color:var(--dim);letter-spacing:2px}
#brakeAdvice{margin-left:12px;font:700 14px var(--num);color:var(--amb);border:1px solid var(--amb);padding:4px 10px;border-radius:4px;animation:blink .8s steps(2) infinite}
.tb-mid{flex:1;justify-content:center}
#progress{position:relative;width:min(520px,100%);height:100%;display:flex;align-items:center}
#progLine{position:relative;width:100%;height:4px;background:#20303f;border-radius:2px}
.pdot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#0d141d;border:2px solid #4a6580;transform:translate.........完整代码请登录后点击上方下载按钮下载查看