代码语言：html

所属分类：其他

代码由qwen-4 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：three实现三维驾驶高铁停靠站点上下客场景操作体验代码

代码标签： 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, maximum-scale=1.0, user-scalable=no">
<title>云巅号 · 高原高铁驾驶</title>
<style>
:root{
  --sky:#0B1B33; --panel:rgba(9,20,38,.74); --panel2:rgba(14,30,54,.88);
  --line:rgba(120,185,225,.20); --cyan:#37C8E8; --blue:#2E7CF6; --amber:#F5A623;
  --red:#E8402A; --green:#37D67A; --gold:#E8B84B; --text:#EAF4FB; --muted:#9FB6C9;
  --shadow:0 10px 40px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--sky);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;color:var(--text)}
#scene{position:fixed;inset:0;display:block;touch-action:none;cursor:grab}
#scene:active{cursor:grabbing}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(4,10,22,.55) 100%)}
#grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
#cabFrame{position:fixed;inset:0;pointer-events:none;z-index:4;display:none;
  box-shadow:inset 0 0 0 14px rgba(8,14,24,.85),inset 0 0 120px rgba(0,0,0,.6);border-radius:60px 60px 0 0}
.glass{background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(10,22,40,.6);border-radius:8px}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--blue));border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--gold),var(--amber))}

#topbar{position:fixed;top:14px;left:16px;right:16px;z-index:20;display:flex;align-items:center;
  gap:14px;padding:10px 16px;pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px;min-width:0}
.logo svg{flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(55,200,232,.6))}
.logo h1{font-size:20px;letter-spacing:4px;font-weight:800;
  background:linear-gradient(90deg,#fff,var(--cyan) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.logo small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:400}
.chips{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.chip{font-size:11px;padding:5px 10px;border-radius:20px;border:1px solid var(--line);
  background:rgba(20,40,66,.6);color:var(--muted);white-space:nowrap}
.chip b{color:var(--text);font-weight:600}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);cursor:pointer;
  background:rgba(20,40,66,.7);color:var(--text);font-size:15px;display:grid;place-items:center;transition:.2s}
.iconbtn:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(55,200,232,.35);transform:translateY(-1px)}
.iconbtn.off{color:var(--muted);opacity:.7}

#leftHud{position:fixed;left:16px;top:86px;z-index:15;width:252px;padding:14px;display:flex;flex-direction:column;gap:12px}
.gaugeWrap{position:relative;text-align:center}
.gaugeWrap svg{width:100%;height:auto;display:block}
#speedVal{position:absolute;left:0;right:0;bottom:2px;font-size:40px;font-weight:800;line-height:1;
  font-family:"DIN Alternate","Bahnschrift",Consolas,monospace;text-shadow:0 0 18px rgba(55,200,232,.5)}
#speedVal span{font-size:12px;color:var(--muted);font-weight:400;margin-left:4px}
.limitRow{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.limitBadge{padding:3px 9px;border-radius:14px;border:2px solid var(--red);color:#fff;font-weight:700;font-size:12px;background:rgba(232,64,42,.15)}
.bars{display:flex;flex-direction:column;gap:7px}
.barRow{display:flex;align-items:center;gap:8px;font-size:11px}
.barRow label{width:30px;color:var(--muted)}
.bar{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:6px;transition:width .12s}
#thrBar{background:linear-gradient(90deg,var(--green),var(--amber))}
#brkBar{background:linear-gradient(90deg,var(--amber),var(--red))}
.barRow b{width:34px;text-align:right;font-family:Consolas,monospace}
.nextCard{border-top:1px solid var(--line);padding-top:10px}
.nextCard .lab{font-size:10px;letter-spacing:2px;color:var(--cyan)}
#nextName{font-size:20px;font-weight:800;margin:2px 0}
.nextMeta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.nextMeta b{color:var(--gold);font-family:Consolas,monospace}
#alignWrap{margin-top:8px;display:none}
#alignWrap .lab{font-size:10px;color:var(--muted);display:flex;justify-content:space-between}
.alignTrack{position:relative;height:12px;border-radius:6px;margin-top:4px;
  background:linear-gradient(90deg,var(--red) 0 22%,var(--amber) 22% 34%,var(--green) 34% 66%,var(--amber) 66% 78%,var(--red) 78% 100%);opacity:.9}
#alignNeedle{position:absolute;top:-4px;width:3px;height:20px;background:#fff;border-radius:2px;left:50%;
  box-shadow:0 0 8px #fff;transition:left .1s}
#alignVal{color:var(--text);font-family:Consolas,monospace}

#rightHud{position:fixed;right:16px;top:86px;z-index:15;width:236px;padding:14px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 250px)}
.secTitle{font-size:10px;letter-spacing:2px;color:var(--cyan);margin-bottom:8px}
#routeBox{position:relative;padding-left:6px;overflow-y:auto}
#routeLine{position:absolute;left:12px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--cyan),var(--blue));opacity:.5}
#routeTrain{position:absolute;left:6px;width:14px;height:14px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold);transition:top .3s;z-index:2;border:2px solid #fff}
.stItem{position:relative;padding:6px 0 6px 26px;font-size:12px}
.stItem .dot{position:absolute;left:7px;top:11px;width:12px;height:12px;border-radius:50%;border:2px solid var(--muted);background:var(--sky)}
.stItem.next .dot{border-color:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pulse 1.4s infinite}
.stItem.done .dot{border-color:var(--green);background:var(--green)}
.stItem.missed .dot{border-color:var(--red);background:var(--red)}
.stItem .nm{font-weight:700}
.stItem.next .nm{color:var(--cyan)}
.stItem.done .nm{color:var(--green)}
.stItem.missed .nm{color:var(--red);text-decoration:line-through}
.stItem .sub{font-size:10px;color:var(--muted)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.stat{background:rgba(20,40,66,.5);border-radius:10px;padding:7px 9px}
.stat .k{font-size:10px;color:var(--muted)}
.stat .v{font-size:16px;font-weight:800;font-family:Consolas,monospace}
#doorPill{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 10px;border-radius:10px;
  background:rgba(232,64,42,.14);border:1px solid rgba(232,64,42,.4)}
#doorPill.open{background:rgba(55,214,122,.14);border-color:rgba(55,214,122,.5)}
#doorPill i{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
#doorPill.open i{background:var(--green);box-shadow:0 0 8px var(--green)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

#toast{position:fixed;top:84px;left:50%;transform:translateX(-50%) translateY(-16px);z-index:30;
  padding:10px 22px;border-radius:24px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;
  background:var(--panel2);border:1px solid var(--line);box-shadow:var(--shadow);transition:.35s;max-width:80vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.warn{border-color:var(--amber);color:var(--gold)}
#toast.bad{border-color:var(--red);color:#FF8A7A}
#toast.good{border-color:var(--green);color:#8CF0B8}
#prompt{position:fixed;bottom:158px;left:50%;transform:translateX(-50%);z-index:25;text-align:center;display:none}
#promptBtn{font-size:17px;font-weight:800;letter-spacing:2px;padding:13px 36px;border-radius:30px;border:none;cursor:pointer;
  color:#06121F;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 26px rgba(55,200,232,.55);animation:pulse 1.6s infinite}
#promptBtn:disabled{animation:none;filter:grayscale(.6);opacity:.7;cursor:default}
#promptSub{font-size:11px;color:var(--muted);margin-top:6px;text-shadow:0 1px 4px #000}

#cockpit{position:fixed;left:16px;right.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论