three三维驾驶高铁停靠站点上下客代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：三维驾驶高铁停靠站点上下客

下面为部分代码预览，完整代码请点击下载或在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>高原高铁 3D 模拟 · Three.js</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;background:#0b1c33;font-family:"Microsoft YaHei","PingFang SC",sans-serif;}
  #hud{position:fixed;inset:0;pointer-events:none;z-index:10;}
  .panel{position:absolute;background:rgba(10,25,50,.55);backdrop-filter:blur(8px);
         border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#eaf4ff;padding:12px 16px;pointer-events:auto;}
  #info{top:16px;left:16px;min-width:235px;font-size:14px;line-height:1.95;}
  #info .t{font-size:17px;font-weight:bold;color:#8fd0ff;margin-bottom:4px;}
  #info b{color:#ffd76a;font-variant-numeric:tabular-nums;}
  #btns{top:16px;right:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
  #btns .row{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
  button{pointer-events:auto;cursor:pointer;border:1px solid rgba(255,255,255,.25);background:rgba(30,60,110,.6);
         color:#dceaff;border-radius:8px;padding:6px 12px;font-size:13px;}
  button.on{background:#2f7fe0;border-color:#7db6ff;color:#fff;}
  button:hover:not(:disabled){background:#3a6fb5;}
  button:disabled{opacity:.35;cursor:not-allowed;}
  #openBtn:not(:disabled){background:#1d7a3f;border-color:#7dff9f;color:#eafff0;}
  #closeBtn:not(:disabled){background:#a06a12;border-color:#ffd76a;color:#fff7e0;}
  #departBtn:not(:disabled){background:#1f6fd0;border-color:#8fc4ff;color:#fff;}
  #route{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;width:min(760px,88vw);height:46px;}
  #rline{position:absolute;left:0;right:0;top:20px;height:6px;background:rgba(255,255,255,.22);border-radius:3px;}
  #rfill{position:absolute;left:0;top:20px;height:6px;width:0;background:linear-gradient(90deg,#3fa9ff,#8fd0ff);border-radius:3px;}
  .stn{position:absolute;top:14px;width:2px;height:18px;background:#ffd76a;transform:translateX(-1px);}
  .stn span{position:absolute;top:20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#ffe9b0;}
  #tdot{position:absolute;top:15px;left:0;width:16px;height:16px;border-radius:50%;background:#ff5a5a;
        border:2px solid #fff;transform:translateX(-8px);box-shadow:0 0 8px #ff5a5a;}
  #toast{position:absolute;left:50%;top:88px;transform:translate(-50%,-8px);background:rgba(15,40,80,.88);
         border:1px solid #6db3ff;color:#fff;padding:10px 24px;border-radius:24px;font-size:15px;
         opacity:0;transition:.35s;white-space:nowrap;}
  #toast.show{opacity:1;transform:translate(-50%,0);}
  #help{position:absolute;left:16px;bottom:14px;color:rgba(255,255,255,.6);font-size:12px;line-height:1.7;}
</style>
</head>
<body>
<div id="hud">
  <div class="panel" id="info">
    <div class="t">🚄 高原高铁模拟</div>
    <div>速度：<b id="spd">0</b> km/h</div>
    <div>状态：<b id="sta">启动中</b></div>
    <div>前方：<b id="nst">—</b></div>
    <div>距离：<b id="dst">0</b> m</div>
    <div>车门：<b id="dor">关闭</b></div>
  </div>
  <div class="panel" id="btns">
    <div class="row" id="camRow">
      <button data-cam="0" class="on">追尾视角</button>
      <button data-cam="1">定点侧拍</button>
      <button data-cam="2">司机视角</button>
      <button data-cam="3">自由视角</button>
    </div>
    <div class="row" id="doorRow">
      <button id="openBtn" disabled>🚪 开门</button>
      <button id="closeBtn" disabled>🚪 关门</button>
      <button id="departBtn" disabled>🟢 发车</button>
      <button id="autoBtn">🔄 自动:关</button>
    </div>
    <div class="r.........完整代码请登录后点击上方下载按钮下载查看