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="icon" href="data:,"/>
<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{
  --ink:#0d1312; --gold:#d9a441; --gold-l:#e8d5a3; --cinnabar:#b03a2e; --jade:#8fb0a3; --txt:#c9cec4;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink);font-family:'Noto Serif SC',serif;color:var(--txt)}
#scene{position:fixed;inset:0}
#scene canvas{display:block}
.ui{user-select:none}

/* ── 左上题名 ── */
#brand{position:fixed;left:26px;top:24px;z-index:10;display:flex;gap:16px;pointer-events:none}
.brand-title{writing-mode:vertical-rl;font-family:'Ma Shan Zheng';font-weight:400;font-size:46px;line-height:1;color:var(--gold-l);letter-spacing:.16em;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.brand-side{display:flex;flex-direction:column;align-items:center;gap:12px}
.brand-sub{writing-mode:vertical-rl;font-size:12px;letter-spacing:.5em;color:#93a09a}
.seal{width:44px;height:44px;background:var(--cinnabar);color:#f5ead9;font-family:'Ma Shan Zheng';font-size:19px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;letter-spacing:.1em;border-radius:3px;box-shadow:inset 0 0 0 2px rgba(245,234,217,.85),0 3px 10px rgba(0,0,0,.4)}

/* ── 右侧挂轴面板 ── */
#panel{position:fixed;right:26px;top:50%;transform:translateY(-50%);width:288px;z-index:10;pointer-events:none}
.rod{height:7px;border-radius:4px;background:linear-gradient(90deg,#5d3f1e,#c99a4e 30%,#8a6228 55%,#e0b96b 80%,#5d3f1e);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.rod.top{margin:0 6px}
.rod.bot{margin:0 6px}
.sheet{margin:4px 0;background:linear-gradient(180deg,rgba(22,27,25,.93),rgba(13,17,16,.95));border:1px solid rgba(217,164,65,.30);padding:22px 20px 18px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.sheet .tag{width:30px;height:30px;background:var(--cinnabar);color:#f5ead9;font-family:'Ma Shan Zheng';font-size:17px;display:flex;align-items:center;justify-content:center;border-radius:2px;box-shadow:inset 0 0 0 1.5px rgba(245,234,217,.8);margin-bottom:12px}
.sheet h2{font-family:'Ma Shan Zheng';font-weight:400;font-size:32px;color:var(--gold-l);letter-spacing:.12em;line-height:1.15;margin-bottom:8px}
.sheet .verse{font-size:12.5px;letter-spacing:.14em;color:var(--jade);margin-bottom:12px}
.sheet .rule{height:1px;background:linear-gradient(90deg,rgba(217,164,65,.7),rgba(217,164,65,.05));margin-bottom:12px}
.sheet .desc{font-size:13px;line-height:2.05;color:var(--txt);text-align:justify}
.sheet .foot{margin-top:14px;font-size:11px;letter-spacing:.28em;color:#77817b}
.swap{animation:swap .55s cubic-bezier(.22,.9,.3,1) both}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── 悬浮小签 ── */
#tip{position:fixed;z-index:30;pointer-events:none;opacity:0;transition:opacity .15s;background:rgba(13,17,16,.92);border:1px solid rgba(217,164,65,.45);padding:7px 12px;display:flex;align-items:baseline;gap:8px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.4)}
#tip b{font-family:'Ma Shan Zheng';font-weight:400;font-size:17px;color:var(--gold-l)}
#tip span{font-size:11px;letter-spacing:.2em;color:var(--jade)}
#tip em{font-style:normal;font-size:10px;color:#77817b;letter-spacing:.1em}

/* ── 底部操作区 ── */
#dock{position:fixed;right:26px;bottom:22px;z-index:10;display:flex;gap:10px}
.chip{background:rgba(15,19,18,.82);border:1px solid rgba(217,164,65,.4);color:#d8cfb8;padding:9px 16px;font-family:'Noto Serif SC';font-size:12.5px;letter-spacing:.24em;cursor:pointer;transition:.25s;backdrop-filter:blur(2px)}
.chip:hover{border-color:var(--gold);color:var(--gold-l);transform:translateY(-2px)}
.chip.on{background:var(--cinnabar);border-color:var(--cinnabar);color:#f7ecdc}
#hints{position:fixed;left:26px;bottom:24px;z-index:10;font-size:11.5px;letter-spacing:.22em;color:#7d877f;pointer-events:none}
#hints i{font-style:normal;color:rgba(217,164,65,.55);margin:0 8px}

/* ── 入园序幕 ── */
#intro{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(1100px 750px at 50% 42%,#1a2823,#0a100e 72%);transition:opacity .9s ease}
#intro.hide{opacity:0;pointer-events:none}
.ring{position:absolute;width:min(72vmin,520px);height:min(72v.........完整代码请登录后点击上方下载按钮下载查看