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, maximum-scale=1.0, user-scalable=no">
<title>碧波园 · 锦鲤池 — Three.js 实时园林</title>
<meta name="description" content="三维公园池塘：锦鲤、凉亭、假山瀑布与随机天气系统">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐟</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0c1714; --panel:rgba(9,21,18,.84); --line:rgba(122,205,178,.22);
  --teal:#19b09a; --teal-deep:#0e6f63; --gold:#e6b45a; --verm:#d4502e;
  --mist:#d7e8e2; --dim:#8fb0a6; --ok:#3ecf8e; --warn:#f0b429; --danger:#e5484d; --info:#4cc3ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--ink);color:var(--mist);font-family:"Noto Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
#app{position:fixed;inset:0}
#app canvas{display:block;cursor:grab}
#app canvas:active{cursor:grabbing}
/* 影调压边 & 颗粒 */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(4,10,8,.38) 100%),
             linear-gradient(180deg,rgba(4,10,8,.28),transparent 18%)}
#grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.05;mix-blend-mode:overlay;
  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)' opacity='0.6'/%3E%3C/svg%3E")}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 标题 */
#brand{position:fixed;top:18px;left:20px;z-index:5;animation:rise .6s ease .15s backwards}
#brand h1{font-family:"Noto Serif SC",serif;font-weight:900;font-size:26px;letter-spacing:2px;color:#eef7f2;text-shadow:0 2px 14px rgba(0,0,0,.55);display:flex;align-items:center;gap:10px}
#brand h1 .dot{color:var(--gold)}
.seal{display:inline-grid;place-items:center;width:30px;height:30px;background:linear-gradient(150deg,#e05535,#b23a20);color:#fff5ec;font-size:17px;font-weight:900;border-radius:6px;transform:rotate(-4deg);box-shadow:0 3px 10px rgba(180,58,32,.5);font-family:"Noto Serif SC",serif}
#brand .sub{margin-top:4px;font-size:12px;color:var(--dim);letter-spacing:3px}
/* 天气徽章 */
#weatherBadge{margin-top:12px;display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px;backdrop-filter:blur(10px);min-width:216px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
#wIcon{font-size:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
#weatherBadge b{font-size:16px;letter-spacing:1px}
#wTemp{margin-left:8px;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
#wNext{height:4px;background:rgba(255,255,255,.09);border-radius:2px;margin:7px 0 4px;overflow:hidden}
#wBar{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:2px;transition:width .3s linear}
#wMode{font-style:normal;font-size:11px;color:var(--dim)}
/* 顶部声音 */
#soundBtn{position:fixed;top:18px;right:20px;z-index:6;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);color:var(--mist);padding:10px 16px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;backdrop-filter:blur(10px);transition:.2s;animation:rise .6s ease .25s backwards;font-family:inherit}
#soundBtn:hover{border-color:var(--gold);transform:translateY(-1px)}
#soundBtn.off{color:var(--dim)}
#soundBtn .ic{font-size:16px}
/* 控制面板 */
#panel{position:fixed;top:84px;right:20px;bottom:18px;width:302px;z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(12px);box-shadow:0 14px 44px rgba(0,0,0,.45);overflow-y:auto;overflow-x:hidden;padding:16px 16px 12px;animation:rise .65s ease .35s backwards;scrollbar-width:thin;scrollbar-color:var(--teal-deep) rgba(255,255,255,.04)}
#panel::-webkit-scrollbar{width:8px}
#panel::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px}
#panel::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--teal-deep),var(--teal));border-radius:4px}
#panel::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.sec{padding:12px 0 14px;border-bottom:1px dashed rgba(122,205,178,.16)}
.sec:first-child{padding-top:2px}
.sec h3{font-size:12px;letter-spacing:3px;color:var(--gold);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.row{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 6px;font-size:13px;color:#c6dcd4}
.row output{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;font-size:12px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--teal-deep),var(--teal));outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--gold);border:2px solid #12211d;box-shadow:0 0 0 2px rgba(230,180,90,.35);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold);border:2px solid #12211d}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--teal-deep),var(--teal))}
.switch-row{display:flex;justify-content:space-between;align-items:center;margin:11px 0;font-size:13px;color:#c6dcd4;cursor:pointer;user-select:none}
.switch-row input{display:none}
.switch{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,.13);position:relative;transition:.2s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#cfe3dc;transition:.2s}
.switch-row input:checked+.switch{background:linear-gradient(90deg,var(--teal-deep),var(--teal))}
.switch-row input:checked+.switch::after{left:18px;background:#fff}
.sel{width:100%;background:#0e211c;color:var(--mist);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;font-family:inherit;cursor:pointer;outline:none}
.sel:focus-visible{border-color:var(--gold)}
.grid2{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.btn{border:1px solid var(--line);background:rgba(25,176,154,.1);color:var(--mist);border-radius:9px;padding:9px 12px;font-size:13px;font-weight:700;cursor:pointer;transition:.18s;font-family:inherit;white-space:nowrap}
.btn:hover{border-color:var(--teal);background:rgba(25,176,154,.22);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.primary{background:linear-gradient(140deg,#e05535,#c23f22);border-color:rgba(255,150,110,.4);color:#fff5ec;box-shadow:0 4px 16px rgba(200,64,32,.35)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.wide{width:100%;margin-top:10px}
.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding-top:14px}
.tip{font-size:11px;color:var(--dim);margin-top:8px;line-height:1.6}
#stats{margin-top:12px;font-size:11px;color:var(--dim);text-align:center;font-variant-numeric:tabular-nums;letter-spacing:1px}
#stats b{color:var(--teal)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 底部提示 */
#hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;background:rgba(9,21,18,.72);border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:12px;color:#b9d4cb;letter-spacing:1px;backdrop-filter:blur(8px);animation:rise .7s ease .55s backwards;white-space:nowrap}
#hint b{color:var(--gold)}
/* Toast */
#toasts{position:fixed;left:20px;bottom:20px;z-index:8;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:10px;padding:10px 16px;font-size:13px;backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.4);animation:rise .3s ease;transition:opacity .4s,transform .4s}
.toast.bye{opacity:0;transform:translateX(-14px)}
/* 加载幕布 */
#veil{position:fixed;inset:0;z-index:50;display:flex;flex-direction:c.........完整代码请登录后点击上方下载按钮下载查看