代码语言：html

所属分类：其他

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

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

代码标签： 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>高原高铁 · 环形驾驶</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#0a0f18;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
  canvas{display:block}

  #hud{
    position:fixed;left:20px;top:20px;color:#eaf3ff;
    background:rgba(8,18,32,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    padding:14px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
    box-shadow:0 8px 32px rgba(0,0,0,.35);pointer-events:none;line-height:1.9;font-size:13px;letter-spacing:.4px;
  }
  #hud .title{font-size:15px;font-weight:700;letter-spacing:3px;margin-bottom:6px;color:#fff}
  #hud .row{display:flex;align-items:baseline;gap:8px}
  #hud .lbl{color:#8fb0cc;min-width:38px}
  #hud .val{color:#7fd4ff;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
  #hud .unit{color:#7f96ac;font-size:11px}

  #help{
    position:fixed;left:20px;bottom:20px;color:#c8d9ea;
    background:rgba(8,18,32,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:12px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
    font-size:12px;line-height:1.85;pointer-events:none;letter-spacing:.3px;
  }
  #help b{color:#7fd4ff;letter-spacing:2px}

  #camBar{
    position:fixed;right:20px;top:20px;display:flex;flex-direction:column;gap:8px;
  }
  .camBtn{
    background:rgba(8,18,32,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.15);color:#c8d9ea;padding:8px 16px;border-radius:9px;
    font-size:12px;letter-spacing:1px;cursor:pointer;transition:.22s;min-width:104px;text-align:center;
    font-family:inherit;
  }
  .camBtn:hover{background:rgba(30,80,140,.55);color:#fff;border-color:rgba(120,200,255,.5)}
  .camBtn.on{background:rgba(20,110,200,.7);color:#fff;border-color:#5cc0ff;box-shadow:0 0 16px rgba(60,160,255,.4)}

  #tip{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    color:#fff;font-size:24px;letter-spacing:6px;font-weight:700;
    text-shadow:0 4px 24px rgba(0,0,0,.7);opacity:0;transition:opacity .5s;pointer-events:none;
  }
</style>
</head>
<body>
<canvas id="c"></canvas>

<div id="hud">
  <div class="title">高原高铁 · 环形线</div>
  <div class="row"><span class="lbl">速度</span><span class="val" id="spd">0</span><span class="unit">km/h</span></div>
  <div class="row"><span class="lbl">状态</span><span class="val" id="stt">运行中</span></div>
  <div class="row"><span class="lbl">前方</span><span class="val" id="nxt" style="font-size:13px">高原站</span></div>
</div>

<div id="help">
  <b>操作说明</b><br>
  W / ↑ 加速 &nbsp;·&nbsp; S / ↓ 制动 / 倒车<br>
  1 - 6 切换视角 &nbsp;·&nbsp; C 循环切换<br>
  自由视角：拖拽旋转 · 滚轮缩放<br>
  列车停稳在站台内，车门自动开启
</div>

<div id="camBar">
  <button class="camBtn on" data-cam="0">1 跟随视角</button>
  <button class="camBtn" data-cam="1">2 驾驶室<.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论