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;
  }
  *{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;flex-wrap:wrap;gap:10px}
  .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:100px;width:238px;padding:13px}
  #right{right:18px;top:100px;width:266px;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}
  #steps{display:flex;flex-direction:column;gap:6px}
  .step{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;border:1px solid transparent;font-size:12.5px;transition:.2s}
  .step i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-style:normal;font-weight:800;font-size:11px;flex:none}
  .step span{flex:1}
  .step b{font-size:11px;color:var(--muted);font-weight:600}
  .step.active{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.09)}
  .step.active span{color:var(--gold);font-weight:700}
  .step.done{opacity:.72}
  .step.done i{background:rgba(85,230,165,.22);color:var(--green)}
  .step.done b{color:var(--green)}
  #message{left:50%;bottom:22px;transform:translateX(-50%);min-width:320px;max-width:min(760px,calc(100vw - 36px));padding:11px 15px;text-align:center;font-size:13px;color:#dcecff}
  #hoverTip{position:absolute;left:0;top:0;padding:7px 11px;border:1px solid rgba(255,255,255,.16);background:rgba(5,12,22,.85);border-radius:9px;color:#eaf4ff;font-size:12px;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}
  #modal{position:absolute;inset:0;display:none;place-items:center;background:rgba(2,7,14,.58);backdrop-filter:blur(5px);pointer-events:auto}
  #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}
  @media(max-width:900px){
    #left{width:205px}.sub{display:none}.stat{min-width:78px}
    #right{width:232px}
  }
</style>
</head>
<body>
<div id="ui">
  <div id="top" class="panel">
    <div class="brand">
      <div class="logo">桥</div>
      <div>.........完整代码请登录后点击上方下载按钮下载查看