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>云岭号 G7721 · 高速动车组模拟驾驶</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Rajdhani:wght@600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#070d14; --panel:rgba(13,24,38,.9); --line:#27405a; --steel:#8fa6bb;
  --txt:#e8f1f8; --mut:#7e94a9; --blue:#2f7fd6; --blue2:#57a4ff;
  --green:#3ecf7a; --amber:#ffb02e; --red:#ff4d3d; --crred:#d5281e; --gold:#d8a24a;
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --num:'Rajdhani','Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:'Noto Sans SC',sans-serif;user-select:none}
#app{position:fixed;inset:0}canvas{display:block}
.panel{position:absolute;background:linear-gradient(180deg,rgba(17,29,44,.92),rgba(9,17,28,.92));
  border:1px solid var(--line);box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.panel::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;
  border-top:2px solid var(--blue2);border-left:2px solid var(--blue2)}
.panel::after{content:"";position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;
  border-bottom:2px solid var(--blue2);border-right:2px solid var(--blue2)}
.tab{position:absolute;top:-1px;left:14px;transform:translateY(-55%);background:#12283e;border:1px solid var(--line);
  font-size:10px;letter-spacing:3px;color:var(--steel);padding:2px 10px 1px;z-index:2}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:0;transition:opacity .8s}
#hud.on{opacity:1}
#pRun{top:16px;left:16px;padding:12px 18px 10px;min-width:200px}
#pRun .trainno{display:flex;align-items:center;gap:10px}
#pRun .g{background:var(--crred);color:#fff;font-family:var(--num);font-weight:700;font-size:15px;
  padding:1px 9px;letter-spacing:1px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
#pRun .line{font-size:12px;letter-spacing:3px;color:var(--mut)}
#pRun .clockrow{display:flex;align-items:baseline;gap:12px;margin-top:2px}
#clock{font-family:var(--num);font-weight:700;font-size:34px;letter-spacing:1px;font-variant-numeric:tabular-nums}
#wChip{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:2px;color:var(--txt)}
#wDot{width:9px;height:9px;border-radius:50%;background:#ffd24a;box-shadow:0 0 8px #ffd24a;transition:all .5s}
#wLimit{color:var(--amber);font-family:var(--num);font-weight:700}
#pStation{top:16px;right:16px;padding:12px 18px 10px;width:300px}
#stName{font-family:var(--disp);font-size:30px;letter-spacing:6px;line-height:1.15}
#stMeta{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
#stDist{font-family:var(--num);font-weight:700;font-size:22px;color:var(--blue2)}
#stBadge{font-size:11px;letter-spacing:2px;color:var(--amber);border:1px solid rgba(255,176,46,.5);
  padding:1px 8px;opacity:0;transition:opacity .3s}
#stBadge.show{opacity:1;animation:blink 1.1s steps(2) infinite}
#boardWrap{height:6px;background:#152232;margin-bottom:6px;overflow:hidden;opacity:0;transition:opacity .3s}
#boardWrap.show{opacity:1}
#boardBar{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue2))}
#boardLbl{font-size:11px;letter-spacing:3px;color:var(--mut);height:14px}
#lineCv{display:block;margin-top:4px;width:100%}
#console{bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;gap:26px;
  padding:14px 30px 12px}
.cblock{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:96px}
.clabel{font-size:10px;letter-spacing:4px;color:var(--mut);margin-bottom:2px}
#limVal{font-family:var(--num);font-weight:700;font-size:42px;line-height:1;color:var(--amber)}
#spdVal{font-family:var(--num);font-weight:700;font-size:74px;line-height:.95;color:var(--green);
  text-shadow:0 0 18px rgba(62,207,122,.35);transition:color .25s}
#spdVal.warn{color:var(--amber);text-shadow:0 0 18px rgba(255,176,46,.4)}
#spdVal.over{color:var(--red);text-shadow:0 0 20px rgba(255,77,61,.55);animation:blink .5s steps(2) infinite}
.unit{font-size:11px;letter-spacing:3px;color:var(--mut)}
#modeLbl{font-family:var(--disp);font-size:20px;letter-spacing:6px;color:var(--steel);margin-top:2px}
#mileLbl{font-family:var(--num);font-weight:600;font-size:15px;color:var(--steel);letter-spacing:1px}
.notchcol{display:flex;flex-direction:column-reverse;gap:2px;justify-content:flex-start}
.notchcol.brk{flex-direction:column}
.seg{width:26px;height:7px;background:#152232;border:1px solid #1f3348;transition:background .12s}
.seg.t.on{background:var(--green);box-shadow:0 0 6px rgba(62,207,122,.6)}
.seg.b.on{background:var(--red);box-shadow:0 0 6px rgba(255,77,61,.6)}
#pView{bottom:18px;left:16px;padding:9px 16px;font-size:12px;letter-spacing:2px;color:var(--steel)}
#pView b{color:var(--blue2);font-weight:500}
#riskWrap{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:280px;padding:8px 16px 10px;
  opacity:0;transition:opacity .25s}
#riskWrap.show{opacity:1}
#riskBar{height:8px;background:#2a1216;border:1px solid #5a2028}
#riskFill{height:100%;width:0;background:linear-gradient(90deg,#a3271c,var(--red))}
#riskWrap.hot #riskFill{animation:blink .4s steps(2) infinite}
#hornChip{position:absolute;bottom:128px;left:50%;transform:translateX(-50%);font-family:var(--disp);
  font-size:18px;letter-spacing:6px;color:#cfe4ff;background:rgba(15,28,44,.9);border:1px solid var(--line);
  padding:5px 20px;opacity:0;transition:opacity .25s}
#hornChip.show{opacity:1}
#toasts{position:absolute;left:16px;top:38%;display:flex;flex-direction:column;gap:8px}
.toast{background:rgba(10,19,30,.92);border-left:3px solid var(--blue2);padding:7px 16px;font-size:13.5px;
  letter-spacing:2px;color:#dcebf7;max-width:340px;animation:tIn .4s ease both;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.toast.warn{border-left-color:var(--amber);color:#ffe3ae}
.toast.bad{border-left-color:var(--red);color:#ffc0b6}
.toast.good{border-left-color:var(--green);color:#c8f5da}
.toast.out{animation:tOut .5s ease both}
@keyframes tIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateX(-12px)}}
@keyframes blink{50%{opacity:.35}}
#vig{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:.3;transition:opacity 1s;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(2,6,10,.6) 100%)}
#dangerOv{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(160,20,8,.55) 100%)}
#flash{position:fixed;inset:0;pointer-events:none;z-index:12;opacity:0;background:#5e0b04}
/* 驾驶室遮罩 */
#cab{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;transition:opacity .5s}
#cab.on{opacity:1}
#cab .dash{position:absolute;left:-2%;right:-2%;bottom:-2%;height:16%;
  background:linear-gradient(180deg,#0d1319,#05080c 70%);border-top:2px solid #1d2833;
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
#cab .pillarL,#cab .pillarR{position:absolute;top:0;bottom:0;width:9%;
  background:linear-gradient(90deg,#04070b,rgba(4,7,11,0))}
#cab .pillarL{left:0;clip-path:polygon(0 0,55% 0,100% 100%,0 100%)}
#cab .pillarR{right:0;transform:scaleX(-1);clip-path:polygon(0 0,55% 0,100% 100%,0 100%)}
#cab .mirror{position:absolute;top:0;left:28%;right:28%;height:5%;background:#04070b;
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}
#atpBox{position:absolute;right:12%;bottom:17%;width:150px;background:#0a1210;border:2px solid #1e3a2c;
  padding:8px 12px;font-family:var(--num);color:#41e08a;text-align:center;letter-spacing:1px}
#atpBox .l{.........完整代码请登录后点击上方下载按钮下载查看