three实现三维雪国蒸汽火车头轨道行驶场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由deepseek-4.1 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, maximum-scale=1.0, user-scalable=no">
<title>雪国蒸汽 · Snowbound Steam</title>
<style>
  :root{
    --coal:#0b0e13;
    --coal2:#141a22;
    --coal3:#1d242e;
    --snow:#e8f1ff;
    --gold:#e6b25a;
    --gold-dim:#8a6a35;
    --ice:#86bcdd;
    --red:#c0392b;
    --line:rgba(134,188,221,.22);
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{
    width:100%; height:100%; overflow:hidden; background:#06080c;
    font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    color:var(--snow); -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  canvas{ display:block; }

  /* ---------- 顶部标题 ---------- */
  #title{
    position:fixed; left:26px; top:22px; z-index:20; pointer-events:none;
    text-shadow:0 2px 16px rgba(0,0,0,.95), 0 0 40px rgba(0,0,0,.7);
  }
  #title h1{ font-size:19px; font-weight:600; letter-spacing:.16em; color:#f5f9ff; }
  #title p{
    font-size:9px; letter-spacing:.44em; color:var(--gold);
    margin-top:7px; opacity:.9; font-weight:500;
  }
  #title .rule{
    width:52px; height:1px; margin-top:10px;
    background:linear-gradient(90deg,var(--gold),transparent);
  }

  /* ---------- 声音按钮 ---------- */
  #soundBtn{
    position:fixed; right:22px; top:20px; z-index:30;
    background:rgba(11,14,19,.68);
    border:1px solid var(--line);
    color:var(--snow);
    padding:9px 17px; border-radius:999px;
    font-size:11px; letter-spacing:.14em; cursor:pointer;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:all .22s ease; font-family:inherit;
  }
  #soundBtn:hover{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 18px rgba(230,178,90,.25); }
  #soundBtn.muted{ color:#7d8794; border-color:rgba(125,135,148,.3); }

  /* ---------- 底部提示 ---------- */
  #hint{
    position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
    z-index:20; pointer-events:none;
    font-size:10.5px; letter-spacing:.3em; color:rgba(232,241,255,.42);
    white-space:nowrap;
  }

  /* ---------- 控制面板 ---------- */
  #panel{
    position:fixed; right:22px; top:78px; width:272px; z-index:25;
    max-height:calc(100vh - 110px); overflow-y:auto; overflow-x:hidden;
    background:linear-gradient(170deg, rgba(14,19,26,.88), rgba(9,12,17,.92));
    border:1px solid var(--line);
    border-radius:14px;
    padding:15px 16px 18px;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 18px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
    scrollbar-width:thin; scrollbar-color:var(--gold-dim) transparent;
  }
  #panel::-webkit-scrollbar{ width:6px; }
  #panel::-webkit-scrollbar-track{ background:transparent; }
  #panel::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--gold-dim),rgba(134,188,221,.35));
    border-radius:3px;
  }
  .pHead{
    display:flex; justify-content:space-between; align-items:center;
    font-size:10px; letter-spacing:.28em; color:var(--gold);
    padding-bottom:10px; margin-bottom:12px;
    border-bottom:1px solid rgba(230,178,90,.18);
  }
  .pHead .odo{ color:var(--ice); letter-spacing:.08em; font-variant-numeric:tabular-nums; }
  .grp{ margin-bottom:14px; }
  .grp:last-child{ margin-bottom:0; }
  .lbl{
    display:flex; justify-content:space-between; align-items:center;
    font-size:10.5px; letter-spacing:.1em; color:rgba(232,241,255,.7);
    margin-bottom:6px;
  }
  .lbl b{ color:var(--gold); font-weight:600; font-variant-numeric:tabular-nums; }

  input[type=range]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:3px; border-radius:2px; outline:none; cursor:pointer;
    background:linear-gradient(90deg,var(--gold) 0%, var(--gold) 50%, rgba(134,188,221,.18) 50%, rgba(134,188,221,.18) 100%);
    transition:background .15s;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
    background:var(--snow); border:2px solid var(--gold);
    box-shadow:0 0 10px rgba(230,178,90,.75);
    transition:transform .15s;
  }
  input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.2); }
  input[type=range]::-moz-range-thumb{
    width:11px; height:11px; border-radius:50%;
    background:var(--snow); border:2px solid var(--gold);
    box-shadow:0 0 10px rgba(230,178,90,.75);
  }
  input[type=range]::-moz-range-track{ height:3px; background:transparent; }

  .chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .chip{
    flex:1 1 auto; min-width:64px;
    padding:7px 6px; border-radius:8px; cursor:pointer;
    background:rgba(29,36,46,.85);
    border:1px solid rgba(134,188,221,.18);
    color:rgba(232,241,255,.72);
    font-size:10px; letter-spacing:.06em; text-align:center;
    transition:all .18s ease; font-family:inherit;
  }
  .chip:hover{ border-color:rgba(230,178,90,.5); color:var(--snow); }
  .chip.on{
    background:linear-gradient(160deg,rgba(230,178,90,.24),rgba(230,178,90,.07));
    border-color:var(--gold); color:var(--gold);
    box-shadow:0 0 14px rgba(230,178,90,.22);
  }
  .chip.red.on{
    background:linear-gradient(160deg,rgba(192,57,43,.35),rgba(192,57,43,.1));
    border-color:var(--red); color:#ff9b8f; box-shadow:0 0 14px rgba(192,57,43,.3);
  }
  .actBtn{
    width:100%; padding:10px; border-radius:9px; cursor:pointer;
    background:linear-gradient(160deg,rgba(230,178,90,.16),rgba(230,178,90,.04));
    border:1px solid rgba(230,178,90,.42);
    color:var(--gold); font-size:11px; letter-spacing:.2em;
    transition:all .18s ease; font-family:inherit;
  }
  .actBtn:hover{ background:linear-gradient(160deg,rgba(230,178,90,.3),rgba(230,178,90,.1)); box-shadow:0 0 20px rgba(230,178,90,.28); }
  .actBtn:active{ transform:scale(.98); }
  .two{ display:flex; gap:7px; }
  .two .actBtn{ letter-spacing:.08em; }
  .sep{ height:1px; background:linear-gradient(90deg,transparent,rgba(134,188,221,.2),transparent); margin:14px 0; }

  /* ---------- 加载 / 错误 ---------- */
  #loadErr{
    position:fixed; inset:0; z-index:200; display:none;
    align-items:center; justify-content:center;
    background:rgba(6,8,12,.96); text-align:center; padding:30px;
  }
  #loadErr .box{ max-width:440px; }
  #loadErr h2{ font-size:15px; letter-spacing:.2em; color:var(--gold); margin-bottom:14px; }
  #loadErr p{ font-size:12px; line-height:2; color:rgba(232,241,255,.62); letter-spacing:.05em; }
  #loadErr code{ color:var(--ice); font-size:11px; }

  /* ---------- 窄屏 ---------- */
  @media (max-width: 860px){
    #title{ left:14px; top:14px; }
    #title h1{ font-size:14px; letter-spacing:.1em; }
    #title p{ font-size:7.5px; letter-spacing:.3em; margin-top:5px; }
    #title .rule{ display:none; }
    #soundBtn{ right:12px; top:12px; padding:7px 13px; font-size:10px; }
    #hint{ display:none; }
    #panel{
      left:0; right:0; top:auto; bottom:0; width:100%;
      max-height:44vh; border-radius:14px 14px 0 0;
      border-left:none; border-right:none; border-bottom:none;
      padding:12px 14px 20px;
    }
    #panel .pHead{ padding-bottom:8px; margin-bottom:10px; }
    .grp{ margin-bottom:11px; }
    .chips{ gap:5px; }
    .chip{ min-width:56px; padding:6px 4px; font-size:9px; }
  }
</style>
</head>
<body>

<div id="title">
  <.........完整代码请登录后点击上方下载按钮下载查看