three做个三维清明上河图场景体验交互代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由qwen-3.8-max 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">
<title>清明上河图 · 立体数字沙盘</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#f4ecd9; --paper2:#e9d9b8; --ink:#2c2620; --ink2:#5d5240;
    --red:#a83c26; --gold:#9c7a3c;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:var(--paper);
    font-family:"Noto Serif SC","Songti SC",serif;color:var(--ink)}
  canvas{display:block;position:fixed;inset:0;z-index:0}

  /* ---------- 右侧竖排题名 ---------- */
  #scrollTitle{position:fixed;top:26px;right:26px;z-index:10;
    display:flex;flex-direction:row-reverse;gap:10px;
    background:linear-gradient(160deg,#f7efdc,#ead9b8);
    border:1px solid rgba(122,97,54,.45);border-radius:2px;
    padding:18px 12px 16px;box-shadow:0 14px 34px rgba(60,40,20,.22);
    transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  #scrollTitle:hover{transform:translateY(-3px)}
  .col{writing-mode:vertical-rl;text-orientation:upright}
  .col.main{font-family:"Ma Shan Zheng",serif;font-size:42px;letter-spacing:.16em;
    color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.5)}
  .col.sub{font-size:13px;letter-spacing:.4em;color:var(--ink2);padding-top:6px}
  .seal{align-self:flex-end;width:34px;height:34px;background:var(--red);color:#f6efe0;
    font-family:"Ma Shan Zheng",serif;font-size:22px;display:flex;align-items:center;justify-content:center;
    border-radius:3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),0 4px 10px rgba(120,30,10,.35)}

  /* ---------- 左下控制坞 ---------- */
  #dock{position:fixed;left:24px;bottom:24px;z-index:10;display:flex;gap:10px;flex-wrap:wrap;max-width:70vw}
  .grp{display:flex;gap:6px;padding:7px;background:rgba(246,239,224,.82);
    border:1px solid rgba(122,97,54,.4);border-radius:3px;backdrop-filter:blur(5px);
    box-shadow:0 10px 24px rgba(60,40,20,.16)}
  .grp label{font-size:12px;letter-spacing:.3em;color:var(--ink2);align-self:center;padding:0 4px 0 6px}
  button{font-family:inherit;font-size:13px;letter-spacing:.14em;color:var(--ink);
    padding:7px 13px;border:1px solid rgba(44,38,32,.35);background:transparent;cursor:pointer;
    border-radius:2px;transition:all .25s ease}
  button:hover{background:rgba(168,60,38,.1);transform:translateY(-1px)}
  button.on{background:var(--red);color:#f7efe2;border-color:var(--red);
    box-shadow:0 6px 16px rgba(168,60,38,.35)}

  #hint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:9;
    font-size:12px;letter-spacing:.32em;color:rgba(44,38,32,.5);pointer-events:none;white-space:nowrap}

  /* ---------- 左上小注脚 / 右下罗盘 ---------- */
  #caption{position:fixed;top:26px;left:26px;z-index:9;font-size:12px;letter-spacing:.28em;
    color:rgba(44,38,32,.6);border-left:3px solid var(--red);padding-left:10px;line-height:1.9}
  #compass{position:fixed;right:30px;bottom:30px;z-index:9;width:58px;height:58px;border-radius:50%;
    border:1px solid rgba(122,97,54,.5);background:rgba(246,239,224,.8);
    display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
  #needle{font-size:11px;letter-spacing:.1em;color:var(--ink2);transition:transform .1s linear}
  #needle b{color:var(--red);font-weight:600}

  /* ---------- 景点标注 ---------- */
  #labels{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
  .hs{position:absolute;transform:translate(-50%,-110%);display:flex;flex-direction:column;align-items:center;
    cursor:pointer;pointer-events:auto;transition:opacity .35s}
  .hs .tag{background:rgba(44,38,32,.82);color:#f2e8d5;padding:4px 10px;font-size:12px;letter-spacing:.2em;
    border-radius:2px;border:1px solid rgba(255,255,255,.16);white-space:nowrap;margin-bottom:7px;transition:all .25s}
  .hs:hover .tag{background:var(--red)}
  .hs .dot{width:9px;height:9px;border-radius:50%;background:var(--red);position:relative}
  .hs .ring{position:absolute;inset:-7px;border:1px solid var(--red);border-radius:50%;
    animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}

  /* ---------- 讲解卡片 ---------- */
  #card{position:fixed;right:26px;bottom:26px;z-index:11;width:308px;
    background:linear-gradient(165deg,#f8f1de,#ecdcb9);border:1px solid #7a6136;border-radius:2px;
    padding:20px 20px 18px;box-shadow:0 20px 44px rgba(50,35,20,.3),inset 0 0 0 4px rgba(255,255,255,.25);
    opacity:0;transform:translateY(18px);pointer-events:none;transition:all .45s cubic-bezier(.2,.8,.2,1)}
  #card.show{opacity:1;transform:translateY(0);pointer-events:auto}
  #card .t{font-family:"Ma Shan Zheng",serif;font-size:26px;color:var(--red);margin-bottom:8px}
  #card .b{font-size:13.5px;line-height:2;color:var(--ink2);text-align:justify}
  #card .x{position:absolute;top:8px;right:10px;border:none;background:none;font-size:18px;
    color:var(--ink2);cursor:pointer;padding:4px}
  #card .x:hover{color:var(--red);transform:none}
  #card .mark{position:absolute;right:16px;bottom:12px;width:22px;height:22px;background:var(--red);
    color:#f6efe0;font-family:"Ma Shan Zheng",serif;font-size:14px;display:flex;align-items:center;
    justify-content:center;border-radius:2px;opacity:.9}

  /* ---------- 氛围叠层 ---------- */
  #vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(46,34,20,.34) 100%)}
  #grain{position:fixed;inset:0;z-index:3;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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/s.........完整代码请登录后点击上方下载按钮下载查看