代码语言：html

所属分类：其他

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

代码描述：three实现三维长安城建筑沙盘展示代码

代码标签： 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>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<style>
  :root{
    --ink:#151815;
    --ink-2:#1d211c;
    --ink-3:#262b24;
    --paper:#ece7da;
    --paper-dim:#b9b4a6;
    --jade:#8fae9b;
    --jade-deep:#4f6f60;
    --cinnabar:#b4574a;
    --bronze:#c2a061;
    --line:rgba(236,231,218,.12);
    --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;
    --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden}
  body{
    font-family:var(--sans);
    background:var(--ink);
    color:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  #app{
    display:grid;
    grid-template-columns:minmax(0,1fr) 324px;
    height:100vh;
    height:100dvh;
  }
  #stage{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:
      radial-gradient(120% 90% at 18% 8%, rgba(143,174,155,.16), transparent 55%),
      radial-gradient(90% 80% at 85% 95%, rgba(194,160,97,.12), transparent 60%),
      linear-gradient(160deg,#d9ddd3 0%,#c8cec2 48%,#b9c1b3 100%);
    transition:background .8s ease;
  }
  body.night #stage{
    background:
      radial-gradient(110% 90% at 20% 0%, rgba(70,100,130,.22), transparent 55%),
      radial-gradient(90% 80% at 80% 100%, rgba(194,160,97,.10), transparent 60%),
      linear-gradient(160deg,#0d151d 0%,#101b24 55%,#0a1118 100%);
  }
  #c{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
  .grain{
    position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  }
  body.night .grain{mix-blend-mode:screen;opacity:.04}
  .brand{
    position:absolute;top:26px;left:30px;z-index:5;pointer-events:none;
    display:flex;gap:16px;align-items:flex-start;
  }
  .seal{
    width:46px;height:46px;flex:0 0 auto;border-radius:8px;
    background:linear-gradient(145deg,#a44e40,#7e3328);
    color:#f3e6cf;display:grid;place-items:center;
    font-family:var(--serif);font-size:24px;font-weight:700;
    box-shadow:0 6px 18px rgba(60,20,12,.28), inset 0 0 0 1px rgba(255,235,200,.25);
    transform:rotate(-3deg);
  }
  .brand h1{
    font-family:var(--serif);font-size:34px;line-height:1.05;letter-spacing:.14em;
    color:#232a22;font-weight:700;
  }
  body.night .brand h1{color:#e8e2d2}
  .brand .sub{margin-top:7px;font-size:11px;letter-spacing:.32em;color:#4c584c;text-transform:uppercase}
  body.night .brand .sub{color:#93a09a}
  .brand .meta{margin-top:4px;font-size:11px;color:#6b7568;letter-spacing:.08em}
  body.night .brand .meta{color:#6f7d78}

  .stage-top{
    position:absolute;top:26px;right:24px;z-index:6;display:flex;gap:8px;align-items:center;
  }
  .chip{
    border:1px solid rgba(35,42,34,.18);background:rgba(240,238,228,.62);
    backdrop-filter:blur(8px);color:#333d32;border-radius:999px;
    font-size:11px;letter-spacing:.06em;padding:7px 12px;cursor:pointer;
    transition:all .2s ease;font-family:var(--sans);
  }
  .chip:hover{background:rgba(240,238,228,.92);transform:translateY(-1px)}
  .chip.active{background:#33402f;color:#ece7da;border-color:#33402f}
  body.night .chip{background:rgba(18,26,32,.62);color:#cfd6cf;border-color:rgba(207,214,207,.18)}
  body.night .chip:hover{background:rgba(30,42,50,.9)}
  body.night .chip.active{background:#c2a061;color:#1a160e;border-color:#c2a061}
  .badge{
    display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.18em;
    color:#4c584c;padding:7px 11px;border-radius:999px;
    background:rgba(240,238,228,.5);border:1px solid rgba(35,42,34,.14);
  }
  body.night .badge{color:#9fb0a8;background:rgba(18,26,32,.5);border-color:rgba(207,214,207,.14)}
  .dot{width:6px;height:6px;border-radius:50%;background:#5f8f6a;box-shadow:0 0 0 3px rgba(95,143,106,.18);animation:pulse 2.4s infinite}
  body.night .dot{background:#c2a061;box-shadow:0 0 0 3px rgba(194,160,97,.18)}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

  .hint{
    position:absolute;left:30px;bottom:22px;z-index:5;font-size:11px;letter-spacing:.14em;
    color:#525e51;pointer-events:none;
  }
  body.night .hint{color:#7d8b85}
  .hint b{font-weight:600;color:#333d32}
  body.night .hint b{color:#cfd6cf}

  .compass{
    position:absolute;right:24px;bottom:20px;z-index:5;width:58px;height:58px;pointer-events:none;
    opacity:.85;
  }
  .stats{
    position:absolute;right:92px;bottom:32px;z-index:5;font-size:10px;letter-spacing:.1em;
    color:#5c685b;font-variant-numeric:tabular-nums;pointer-events:none;text-align:right;
  }
  body.night .stats{color:#77857f}

  #info{
    position:absolute;left:30px;bottom:56px;z-index:6;width:270px;
    background:rgba(22,26,22,.86);backdrop-filter:blur(12px);
    border:1px solid rgba(236,231,218,.14);border-radius:12px;
    padding:16px 16px 14px;color:var(--paper);
    box-shadow:0 18px 40px rgba(10,14,10,.28);
    transform:translateY(0);opacity:1;transition:opacity .3s ease,transform .3s ease;
  }
  #info.hidden{opacity:0;transform:translateY(12px);pointer-events:none}
  #info .k{font-size:9px;letter-spacing:.3em;color:var(--bronze);text-transform:uppercase}
  #info h2{font-family:var(--serif);font-size:24px;letter-spacing:.1em;margin:6px 0 2px;font-weight:700}
  #info .loc{font-size:11px;color:var(--jade);letter-spacing:.08em;margin-bottom:9px}
  #info p{font-size:11.5px;line-height:1.7;color:#c9c4b6}
  #info .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
  #info .tag{font-size:9.5px;letter-spacing:.06em;padding:4px 8px;border-radius:999px;border:1px solid rgba(143,174,155,.35);color:var(--jade)}
  #info .close{
    position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:6px;border:none;
    background:rgba(236,231,218,.08);color:#b9b4a6;cursor:pointer;font-size:13px;line-height:1;
  }
  #info .close:hover{background:rgba(236,231,218,.18);color:#fff}

  #loading{
    position:absolute;inset:0;z-index:20;display:grid;place-items:center;
    background:linear-gradient(160deg,#d9ddd3,#bfc7b9);transition:opacity .6s ease;
  }
  body.night #loading{background:linear-gradient(160deg,#0d151d,#0a1118)}
  #loading.done{opacity:0;pointer-events:none}
  .load-box{text-align:center;color:#3a4538}
  body.night .load-box{color:#cfd6cf}
  .load-ring{
    width:44px;height:44px;margin:0 auto 16px;border-radius:50%;
    border:2px solid rgba(58,69,56,.18);border-top-color:#7e3328;animation:spin 1s linear infinite;
  }
  body.night .load-ring{border-color:rgba(207,214,207,.15);border-top-color:#c2a061}
  @keyframes spin{to{transform:rotate(360deg)}}
  .load-box .t{font-family:var(--serif);font-size:18px;letter-spacing:.3em}
  .load-box .s{margin-top:8px;font-size:10px;letter-spacing:.24em;opacity:.6}

  #panel{
    background:linear-gradient(180deg,var(--ink-2),var(--ink));
    border-left:1px solid var(--line);
    display:flex;flex-direction:column;min-height:0;z-index:10;
  }
  .panel-head{
    padding:22px 20px 16px;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;justify-content:space-between;
  }
  .panel-head .title{font-family:var(--serif);font-size:19px;letter-spacing:.2em}
  .panel-head .live{font-size:9px;letter-spacing:.24em;color:var(--jade);display:flex;align-items:center;gap:6px}
  .panel-head .live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--jade);box-shadow:0 0 8px var(--jade)}
  #gui{
    flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 12px 14px;
    scrollbar-width:thin;scrollbar-color:var(--jade-deep) var(--ink-2);
  }
  #gui::-webkit-scrollbar{width:8px}
  #gui::-webkit-scrollbar-track{background:var(--ink-2);border-radius:8px}
  #gui::-webkit-scrollbar-thumb{background:var(--jade-deep);border-radius:8px;border:2px solid var(--ink-2)}
  #gui::-webkit-scrollbar-thumb:hover{background:var(--jade)}

  .lil-gui{
    --background-color:transparent;
    --title-background-color:transparent;
    --widget-color:#2c322a;
    --hover-color:#353d32;
    --focus-color:#3d4a3a;
    --text-color:#ddd8ca;
    --title-text-color:#ece7da;
    --number-color:#a8c4ae;
    --string-color:#d3b57c;
    --font-size:11px;
    --input-font-size:11px;
    --font-family:var(--sans);
    --padding:7px;
    --spacing:9px;
    --widget-height:22px;
    --name-width:46%;
    --slider-knob-width:3px;
    --slider-input-width:27%;
    --color-input-width:27%;
    width:100%!important;
    border-radius:0;
  }
  .lil-gui.root>.title{display:none}
  .lil-gui .controller{bo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论