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"/>
<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{ --gold:#caa25a; --gold-hi:#f0d491; }
  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; overflow:hidden; background:#0a0c14;
    font-family:'Noto Serif SC',serif; -webkit-font-smoothing:antialiased; }
  #app{ position:fixed; inset:0; }
  #app canvas{ display:block; }

  #plaque{ position:fixed; top:22px; left:22px; z-index:20; writing-mode:vertical-rl;
    font-family:'Ma Shan Zheng',serif; font-size:40px; letter-spacing:12px; color:var(--gold-hi);
    background:linear-gradient(160deg,#8a2417,#571209); padding:20px 11px 34px;
    border:2px solid var(--gold); border-radius:4px; text-shadow:0 2px 8px #000c;
    box-shadow:0 10px 34px #000a, inset 0 0 0 2px #00000055; animation:drop .9s ease .15s both; }
  #plaque::after{ content:'瑞'; position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
    writing-mode:horizontal-tb; font-size:12px; line-height:18px; width:20px; height:20px; text-align:center;
    color:var(--gold-hi); border:1.5px solid var(--gold); border-radius:2px; letter-spacing:0; opacity:.9; }
  #plaque-sub{ position:fixed; top:24px; left:88px; z-index:20; writing-mode:vertical-rl;
    font-size:12px; letter-spacing:5px; color:#d8c290; background:#14100cd0; border:1px solid #8a6d3b66;
    padding:10px 6px; border-radius:3px; animation:drop .9s ease .35s both; }
  @keyframes drop{ from{ opacity:0; transform:translateY(-14px);} to{ opacity:1; transform:none;} }

  #status-chip{ position:fixed; top:22px; right:22px; z-index:20; min-width:92px; text-align:center;
    background:#14100cd9; border:1px solid #8a6d3b; border-radius:4px; padding:8px 14px 9px;
    animation:drop .9s ease .5s both; }
  #chip-shichen{ font-family:'Ma Shan Zheng',serif; font-size:30px; color:var(--gold-hi); line-height:1.15; }
  #chip-detail{ font-size:11px; letter-spacing:2px; color:#bda87e; margin-top:2px; }

  #panel{ position:fixed; left:22px; bottom:22px; z-index:20; width:322px; user-select:none;
    background:linear-gradient(180deg,#1a1410f2,#0e0b08f4); border:1px solid #8a6d3b; border-radius:6px;
    padding:14px 16px 12px; color:#e8dcc0; box-shadow:0 14px 44px #000b;
    animation:rise .8s ease .55s both; }
  #panel::before{ content:''; position:absolute; top:0; left:12px; right:12px; height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent); }
  @keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
  .sec{ margin-bottom:12px; } .sec:last-child{ margin-bottom:2px; }
  .sec h3{ margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:7px; color:var(--gold);
    display:flex; align-items:center; gap:10px; }
  .sec h3::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,#8a6d3b,transparent); }
  .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .btn{ background:#241c14; color:#e8d5a8; border:1px solid #7a5f33; border-radius:3px; cursor:pointer;
    padding:6px 11px; font-size:13px; letter-spacing:2px; font-family:inherit;
    transition:transform .2s, background .25s, border-color .25s, box-shadow .25s; }
  .btn:hover{ background:#3a2c1a; border-color:var(--gold); transform:translateY(-1px); box-shadow:0 5px 14px #0009; }
  .btn.active{ background:linear-gradient(180deg,#cfa850,#96702c); color:#1c1206; border-color:#e6c87e; font-weight:600; }
  #time-display{ font-family:'Ma Shan Zheng',serif; font-size:22px; color:var(--gold-hi); width:62px; text-align:center; }
  #time-slider{ flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; outline:none;
    background:linear-gradient(90deg,#3a2c1a,var(--gold)); cursor:pointer; }
  #time-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#f4dfa6,#a37c33); border:1px solid #5c451d; box-shadow:0 2px 6px #000a; }
  .tip{ font-size:11px; color:#9c8a66; letter-spacing:1px; margin-top:7px; }

  #hint{ position:fixed; right:22px; bottom:22px; z-index:20; text-align:right; font-size:12px;
    letter-spacing:2px; line-height:2; color:#cbb98e99; }
  #tooltip{ position:fixed; z-index:30; display:none; pointer-events:none; white-space:nowrap;
    background:#1a140ef2; color:var(--gold-hi); border:1px solid var(--gold); border-radius:3px;
    padding:4px 11px; font-size:13px; letter-spacing:3px; transform:translate(-50%,-160%); }
  #flash{ position:fixed; inset:0; z-index:25; background:#eaf2ff; opacity:0; pointer-events:none; }
  #vignette{ position:fixed; inset:0; z-index:5; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 55%, #00000059 100%); }

  #walk-hint{ position:fixed; left:50%; bottom:26px; z-index:22; transform:translateX(-50%) translateY(14px);
    background:#14100ce8; border:1px solid var(--gold); color:#e8d5a8; padding:9px 24px; border-radius:4px;
    font-size:13px; letter-spacing:2px; white-space:nowrap; opacity:0; pointer-events:none;
    transition:opacity .4s ease, transform .4s ease; }
  #walk-hint.show{ opacity:1; transform:translateX(-50%); }
  #walk-hint b{ color:var(--gold-hi); font-weight:600; }
  #door-toast{ position:fixed; left:50%; bottom:88px; z-index:22; transform:translateX(-50%);
    background:#3a1712f0; border:1px solid #d08a4a; color:#f3d795; padding:7px 20px; border-radius:4px;
    font-size:13px; letter-spacing:3px; opacity:0; pointer-events:none; transition:opacity .35s; }
  #door-toast.show{ opacity:1; }

  #intro{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center;
    justify-content:center; transition:opacity 1.2s ease, visibility 1.2s;
    background:radial-gradient(1100px 640px at 50% 42%, #241a12d9, #0b0805f5 78%); }
  #intro.hidden{ opacity:0; visibility:hidden; }
  #intro .frame{ display:flex; align-items:center; gap:26px; }
  #intro .rule{ width:110px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
  #intro .rule.r{ background:linear-gradient(90deg,var(--gold),transparent); }
  #intro h1{ margin:0; font-family:'Ma Shan Zheng',serif; font-size:104px; font-weight:400;
    letter-spacing:26px; color:var(--gold-hi); text-shadow:0 4px 26px #000, 0 0 70px #c9862f55; }
  #intro .line{ margin:20px 0 44px; font-size:15px; letter-spacing:11px; color:#c8b285; }
  #enter{ font-family:'Ma Shan Zheng',serif; font-size:27px; letter-spacing:14px; color:var(--gold-hi);
    background:linear-gradient(160deg,#8a2417,#571209); border:2px solid var(--gold); border-radius:4px;
    padding:13px 34px 13px 48px; cursor:pointer; box-shadow:0 12px 44px #000b;
    transition:transform .3s, box-shadow .3s; }
  #enter:hover{ transform:translateY(-3px) scale(1.02);
    box-shadow:0 18px 54px #000d, 0 0 34px #c9862f4d; }
  #intro .note{ margin-top:28px; font-size:12px; letter-spacing:3px; color:#9c8a66; }

  @media (max-width:760px){
    #plaque{ font-size:26px; letter-spacing:8px; padding:14px 8px 28px; }
    #plaque-sub,#.........完整代码请登录后点击上方下载按钮下载查看