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

代码语言：html
所属分类：其他
代码由qwen-4 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, viewport-fit=cover">
<title>蓝花楹街角 · Jacaranda Corner — Three.js 微缩场景</title>
<meta name="description" content="悉尼帕丁顿风格的蓝花楹街角微缩景观：三渲二卡通渲染，白天/黄昏/夜晚，树梢轻摆与花瓣飘落。">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%239b7ce4'%3E%3Cellipse cx='16' cy='8' rx='4.5' ry='6'/%3E%3Cellipse cx='24' cy='14' rx='4.5' ry='6' transform='rotate(72 24 14)'/%3E%3Cellipse cx='21' cy='24' rx='4.5' ry='6' transform='rotate(144 21 24)'/%3E%3Cellipse cx='11' cy='24' rx='4.5' ry='6' transform='rotate(216 11 24)'/%3E%3Cellipse cx='8' cy='14' rx='4.5' ry='6' transform='rotate(288 8 14)'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='3.4' fill='%23e8c877'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1.8.3/dist/es-module-shims.min.js"></script>
<script type="importmap">
{ "imports": {
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
} }
</script>
<style>
/* ============ 调色板：奶油白 · 蓝紫 · 暖黄 · 深夜蓝 ============ */
:root{
  --violet:#8b6fd8; --violet-soft:#c9b8f0; --violet-deep:#5a4494;
  --amber:#e8a23d; --red:#c9403a; --green:#5fa877;
  --ink:#372e52; --ink2:#7a7099; --panel:rgba(255,255,255,.68);
  --line:rgba(90,68,148,.16); --chip:rgba(255,255,255,.6);
  --thumb:#b9a4e6; --thumb-h:#8b6fd8; --track:rgba(90,68,148,.10);
}
body[data-mode="night"]{
  --ink:#efeaf9; --ink2:#b3a9d6; --panel:rgba(24,25,44,.66);
  --line:rgba(190,170,240,.18); --chip:rgba(24,25,44,.55);
  --track:rgba(190,170,240,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Noto Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); overflow:hidden; height:100dvh; display:flex; flex-direction:column;
  overscroll-behavior:none; transition:color .8s;
}
/* ============ 分层留白背景（随时段交叉淡入） ============ */
.bg{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.bg-day{background:linear-gradient(180deg,#f1f5fd 0%,#f7f3ea 48%,#efe8f7 100%)}
.bg-dusk{background:linear-gradient(180deg,#f7ddc6 0%,#eec2ce 46%,#b7a5e0 100%)}
.bg-night{background:linear-gradient(180deg,#20233c 0%,#2c2950 55%,#181b2f 100%)}
body[data-mode="day"] .bg-day,body[data-mode="dusk"] .bg-dusk,body[data-mode="night"] .bg-night{opacity:1}
.bg-tint{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 72% 18%,rgba(155,124,228,.10),transparent 70%),
             radial-gradient(46% 40% at 18% 82%,rgba(232,162,61,.07),transparent 70%)}
.cloud{position:fixed;z-index:0;pointer-events:none;width:44vw;height:12vh;border-radius:50%;
  background:rgba(255,255,255,.75);filter:blur(34px);opacity:.7;transition:opacity 1.4s;
  animation:drift 90s linear infinite alternate}
.c1{top:12%;left:-6%}.c2{top:30%;right:-10%;width:34vw;animation-duration:120s;animation-delay:-40s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(9vw)}}
body[data-mode="night"] .cloud{opacity:.07}
body[data-mode="dusk"] .cloud{opacity:.45;background:rgba(255,236,220,.7)}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s;
  background-image:
   radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 9%,#ffe9c9,transparent),
   radial-gradient(1.8px 1.8px at 41% 22%,#fff,transparent),radial-gradient(1.1px 1.1px at 55% 12%,#dfe6ff,transparent),
   radial-gradient(1.5px 1.5px at 66% 27%,#fff,transparent),radial-gradient(1.2px 1.2px at 78% 8%,#ffe9c9,transparent),
   radial-gradient(1.7px 1.7px at 88% 19%,#fff,transparent),radial-gradient(1.1px 1.1px at 94% 33%,#dfe6ff,transparent),
   radial-gradient(1.4px 1.4px at 8% 40%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 33%,#fff,transparent),
   radial-gradient(1.6px 1.6px at 47% 6%,#fff,transparent),radial-gradient(1.2px 1.2px at 71% 16%,#ffe9c9,transparent);
  animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{filter:brightness(.8)}to{filter:brightness(1.25)}}
body[data-mode="night"] .stars{opacity:.85}
.moon{position:fixed;top:11%;right:13%;width:54px;height:54px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 38% 34%,#fffaf0,#f4e3bd 68%,#e6cf9e);
  box-shadow:0 0 44px 10px rgba(255,240,205,.28);opacity:0;transition:opacity 1.6s}
body[data-mode="night"] .moon{opacity:1}
.sunglow{position:fixed;left:-8%;bottom:-14%;width:56vw;height:56vh;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,166,88,.4),transparent 66%);filter:blur(20px);opacity:0;transition:opacity 1.6s}
body[data-mode="dusk"] .sunglow{opacity:1}
/* ============ 顶栏 ============ */
header{position:relative;z-index:6;height:64px;flex:none;display:flex;align-items:center;gap:14px;
  padding:0 20px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:background .8s,border-color .8s;
  animation:fadeDown .8s .15s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand svg{flex:none}
.brand h1{font-family:"Noto Serif SC",serif;font-size:19px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.brand small{display:block;font-size:10px;letter-spacing:.22em;color:var(--ink2);font-weight:500;margin-top:1px;white-space:nowrap}
.seg{position:relative;margin-left:auto;display:flex;background:var(--track);border:1px solid var(--line);
  border-radius:999px;padding:3px;--i:0}
.seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);
  border-radius:999px;background:linear-gradient(135deg,#8b6fd8,#a86fd0);
  box-shadow:0 2px 8px rgba(90,68,148,.35);transition:transform .45s cubic-bezier(.3,.8,.3,1);
  transform:translateX(calc(var(--i)*100%))}
body[data-mode="dusk"] .seg::before{background:linear-gradient(135deg,#e8935a,#d06fa0)}
body[data-mode="night"] .seg::before{background:linear-gradient(135deg,#4a5390,#6f5fc0)}
.seg-btn{position:relative;z-index:1;display:flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--ink2);padding:6px 16px;border-radius:999px;
  transition:color .35s}
.seg-btn[aria-pressed="true"]{color:#fff}
.seg-btn svg{width:14px;height:14px}
.icon-btn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font:inherit;font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:999px;cursor:pointer;
  transition:border-color .25s,color .25s,background .25s}
.icon-btn:hover{border-color:var(--violet);color:var(--violet)}
.icon-btn svg{width:16px;height:16px}
.hidden{display:none!important}
/* ============ 主区 ============ */
main{position:relative;z-index:1;flex:1;display:flex;min-height:0;gap:14px;padding:14px 14px 14px 18px}
.stage{position:relative;flex:1;min-width:0;border-radius:18px}
canvas#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:grab}
canvas#scene:active{cursor:grabbing}
.caption{position:absolute;left:10px;bottom:8px;z-index:3;pointer-events:none;
  animation:fadeUp 1s .7s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.caption p{font-family:"Noto Serif SC",serif;font-size:15px;letter-spacing:.05em;color:var(--ink);
  transition:opacity .35s;text-shadow:0 1px 10px rgba(255,255,255,.25)}
body[data-mode="night"] .caption p{text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hint{margin-top:5px;font-size:11px;color:var(--ink2);letter-spacing:.05em}
.hint .touch{display:none}
.chip{position:absolute;top:8px;right:10px;z-index:3;pointer-events:none;font-size:10.5px;letter-spacing:.08em;
  color:var(--ink2);background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:4px 11px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;transition:background .8s}
.chip b{color:var(--green);font-weight:700}
.toast{position:a.........完整代码请登录后点击上方下载按钮下载查看