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>长江 · 斜拉索桥建造挑战（主墩两侧对称施工版）</title>
<style>
  :root{
    --bg:rgba(7,15,28,.82);
    --line:rgba(255,255,255,.14);
    --text:#edf6ff;
    --muted:#9eb0c8;
    --cyan:#48d9ff;
    --green:#55e6a5;
    --gold:#ffd166;
    --danger:#ff6b6b;
  }
  *{box-sizing:border-box}
  html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07111d;font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:var(--text)}
  canvas{display:block}
  #ui{position:fixed;inset:0;pointer-events:none}
  .panel{
    position:absolute;pointer-events:auto;background:var(--bg);backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.22)
  }
  #top{
    top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;
    padding:13px 16px
  }
  .brand{display:flex;align-items:center;gap:12px}
  .logo{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,#2bc0e4,#4c83ff);font-size:22px;font-weight:900
  }
  .title{font-size:18px;font-weight:800;letter-spacing:.5px}
  .sub{font-size:12px;color:var(--muted);margin-top:2px}
  #stats{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
  .stat{min-width:92px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.045)}
  .stat b{display:block;font-size:16px}.stat span{font-size:11px;color:var(--muted)}
  #left{
    left:18px;top:92px;width:230px;padding:13px
  }
  #right{
    right:18px;top:92px;width:275px;padding:13px
  }
  .section-title{font-size:12px;color:#b9c9dd;margin-bottom:10px;letter-spacing:.5px}
  .btn{
    width:100%;border:1px solid var(--line);background:rgba(255,255,255,.055);color:var(--text);
    padding:10px 11px;border-radius:10px;margin-bottom:8px;cursor:pointer;text-align:left;
    transition:.18s;display:flex;align-items:center;justify-content:space-between
  }
  .btn:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
  .btn.active{border-color:rgba(72,217,255,.65);background:rgba(72,217,255,.11);box-shadow:inset 0 0 0 1px rgba(72,217,255,.13)}
  .btn .hot{font-size:11px;color:var(--cyan);font-weight:800}
  .help{font-size:12px;line-height:1.65;color:var(--muted)}
  #progressBox{margin-top:10px}
  #progressBar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
  #progressFill{height:100%;width:0%;background:linear-gradient(90deg,#48d9ff,#55e6a5);transition:.25s}
  #message{
    left:50%;bottom:22px;transform:translateX(-50%);min-width:320px;max-width:min(720px,calc(100vw - 36px));
    padding:11px 15px;text-align:center;font-size:13px;color:#dcecff
  }
  #centerHint{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    padding:10px 13px;border:1px solid rgba(255,255,255,.1);background:rgba(5,12,22,.55);
    border-radius:12px;color:rgba(255,255,255,.8);font-size:12px;opacity:0;transition:.25s
  }
  #modal{
    position:absolute;inset:0;display:none;place-items:center;background:rgba(2,7,14,.58);backdrop-filter:blur(5px)
  }
  #modalCard{width:min(540px,calc(100vw - 36px));padding:26px;text-align:center}
  #modalCard h1{margin:0 0 8px;font-size:28px}
  #modalCard p{color:var(--muted);line-height:1.7}
  #modalCard .row{display:flex;gap:10px;justify-content:center;margin-top:18px}
  .bigbtn{
    padding:11px 18px;border:0;border-radius:11px;cursor:pointer;font-weight:800;color:#06111d;
    background:linear-gradient(135deg,#48d9ff,#55e6a5)
  }
  .smallbtn{padding:10px 15px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:white;cursor:pointer}
  #crosshair{
    position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);
    opacity:.42
  }
  #crosshair:before,#crosshair:after{content:"";position:absolute;background:#fff;border-radius:2px}
  #crosshair:before{left:8px;top:2px;width:2px;height:14px}
  #crosshair:after{left:2px;top:8px;width:14px;height:2px}
  .highlight-text{color:var(--gold);font-wei.........完整代码请登录后点击上方下载按钮下载查看