three实现悉尼蓝花楹街角三维微缩场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：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>蓝花楹街角 · Sydney Jacaranda Corner</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@300;400&display=swap" rel="stylesheet">
<style>
  :root{ --ink:#2f2b38; --sub:#8d87a0; --accent:#7a68c8; --paper:#f6f3ec; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ height:100%; overflow:hidden; }
  body{
    background:var(--paper);
    font-family:"Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    color:var(--ink); transition:background 1.4s ease;
    -webkit-user-select:none; user-select:none;
  }
  body[data-mode="dusk"]{ --paper:#f2e8de; }
  body[data-mode="night"]{ --paper:#e9e7f2; --ink:#3a3550; --sub:#9a94b4; --accent:#6c5bb8; }
  #stage{ position:fixed; inset:0; opacity:0; transition:opacity 1.4s ease .1s; }
  #stage.ready{ opacity:1; }
  #stage canvas{ display:block; touch-action:none; cursor:grab; }
  #stage canvas:active{ cursor:grabbing; }
  .vignette{ position:fixed; inset:0; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(96,84,130,.06) 100%); }
  header{ position:fixed; top:42px; left:48px; pointer-events:none; }
  .tag{ font-size:11px; letter-spacing:.42em; color:var(--accent); font-weight:400; }
  h1{ font-family:"Noto Serif SC",serif; font-weight:900; font-size:clamp(30px,4.2vw,46px);
      letter-spacing:.06em; margin:10px 0 12px; line-height:1.1; }
  .sub{ font-size:12.5px; color:var(--sub); letter-spacing:.14em; font-weight:300; }
  .meta{ position:fixed; top:48px; right:52px; text-align:right; pointer-events:none;
         font-size:11px; color:var(--sub); letter-spacing:.22em; line-height:2.1; }
  .modes{ position:fixed; left:48px; bottom:44px; display:flex; align-items:center; gap:28px; }
  .modes span{ font-size:11px; letter-spacing:.3em; color:var(--sub); }
  .modes button{ border:0; background:none; font-family:inherit; font-size:14px; letter-spacing:.18em;
    color:var(--sub); padding:6px 2px; cursor:pointer; position:relative; transition:color .5s; }
  .modes button::after{ content:""; position:absolute; left:50%; bottom:-2px; width:0; height:2px;
    background:var(--accent); transition:width .45s cubic-bezier(.6,0,.2,1), left .45s cubic-bezier(.6,0,.2,1); }
  .modes button.on{ color:var(--ink); }
  .modes button.on::after{ width:100%; left:0; }
  .hint{ position:fixed; right:52px; bottom:46px; font-size:11px; letter-spacing:.26em;
         color:var(--sub); pointer-events:none; }
  .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent);
        margin-right:10px; vertical-align:1px; animation:pulse 2.6s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{opacity:.35; transform:scale(.8);} 50%{opacity:1; transform:scale(1);} }
  #loading{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:var(--paper); z-index:9; transition:opacity .8s ease; font-size:12px;
    letter-spacing:.5em; color:var(--sub); }
  #loading.hide{ opacity:0; pointer-events:none; }
  @media (max-width:640px){
    header{ top:26px; left:24px; } .meta{ display:none; }
    .modes{ left:24px; bottom:26px; gap:18px; } .hint{ display:none; }
  }
</style>
</head>
<body data-mode="day">

<div id="stage"></div>
<div class="vignette"></div>

<header>
  <div class="tag">SYDNEY · PADDINGTON</div>
  <h1>蓝花楹街角</h1>
  <div class="sub">十 一 月 花 事 · 微 缩 景 观</div>
</header>

<div class="meta">33.85° S · 151.22° E<.........完整代码请登录后点击上方下载按钮下载查看