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.0"><title>清溪縣衙</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0d0805}
body{font-family:"Songti SC","STSong","SimSun",serif;color:#e3d2ac}canvas{display:block}
#ui{position:fixed;inset:0;pointer-events:none;z-index:5}
#brand{position:fixed;top:20px;left:20px;display:flex;gap:12px}
.vt{writing-mode:vertical-rl;font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:40px;letter-spacing:9px;color:#e8c877;text-shadow:0 2px 10px #000}
.seal{display:grid;grid-template-columns:1fr 1fr;background:#a83226;border:2px solid #7e2318;padding:3px;color:#f7e7c8;font-size:11px;text-align:center;font-family:"Kaiti SC","KaiTi",serif;height:fit-content}
.meta{padding-top:6px}.meta div:first-child{font-size:13px;letter-spacing:3px;color:#cbb385}
.meta div:last-child{font-size:11px;color:#9d8a64;letter-spacing:1px;line-height:1.9;margin-top:7px}
#nav{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;pointer-events:auto;max-width:95vw}
.nv{font-family:"Kaiti SC","KaiTi",serif;font-size:15px;letter-spacing:2px;color:#e8cf95;background:#1d0f06;border:1px solid #7d5f2c;padding:7px 13px;cursor:pointer;transition:.25s}
.nv:hover{transform:translateY(-3px);border-color:#d9a441;color:#ffe9b0;box-shadow:0 6px 16px rgba(0,0,0,.5)}
#tip{position:fixed;display:none;font-family:"Kaiti SC","KaiTi",serif;font-size:14px;letter-spacing:2px;color:#ffe9b0;background:rgba(20,10,4,.92);border:1px solid #b8894a;padding:4px 12px;z-index:7}
#panel{position:fixed;top:50%;right:24px;transform:translate(46px,-50%);width:336px;max-height:76vh;overflow-y:auto;pointer-events:auto;background:linear-gradient(172deg,#1c1008,#25130a 60%,#180c05);border:1px solid #8a6a2f;padding:20px 22px 16px;opacity:0;transition:.45s cubic-bezier(.2,.75,.25,1);box-shadow:0 24px 60px rgba(0,0,0,.6)}
#panel.open{opacity:1;transform:translate(0,-50%)}
.cap{font-size:11px;letter-spacing:5px;color:#8f7137;margin-bottom:9px}
.kind{display:inline-block;font-size:11px;letter-spacing:3px;padding:2px 9px;margin-bottom:9px;color:#f5e6c8;background:#a83226;border:1px solid #7e2318}
.kind.k1{background:#3f5a3a}.kind.k2{background:#4a2d2d}.kind.k3{background:#4a3d20}.kind.k4{background:#3a3a55}
#pT{font-family:"Kaiti SC","KaiTi",serif;font-size:26px;letter-spacing:4px;color:#f0d48a;margin:2px 0 11px}
.rule{height:1px;background:linear-gradient(90deg,transparent,#a3813c,transparent);margin-bottom:12px}
#pB{font-size:14px;line-height:2.05;color:#d8c49a;text-align:justify}
#pX{position:absolute;top:10px;right:10px;width:26px;height:26px;background:0 0;border:1px solid #7d5f2c;color:#caa45a;cursor:pointer}
#pX:hover{color:#ffe9b0;border-color:#d9a441}
.foot{margin-top:12px;font-size:11px;letter-spacing:3px;color:#8f7137;text-align:right}
#intro{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#241309,#120a05 55%,#080402);transition:opacity .9s}
#intro.gone{opacity:0;pointer-events:none}
.fr{position:relative;text-align:center;padding:56px 66px;border:1px solid rgba(217,164,65,.4)}
.fr::before,.fr::after{content:"";position:absolute;width:20px;height:20px;border:3px solid #d9a441}
.fr::before{top:-3px;left:-3px;border-right:0;border-bottom:0}.fr::after{bottom:-3px;right:-3px;border-left:0;border-top:0}
.it{font-family:"Kaiti SC","KaiTi",serif;font-size:60px;letter-spacing:18px;padding-left:18px;color:#e8c777;text-shadow:0 4px 22px rgba(232,199,119,.35)}
.il{width:200px;height:1px;margin:18px auto;background:linear-gradient(90deg,transparent,#a3813c,transparent)}
.is{font-size:14px;letter-spacing:7px;color:#cbb385;margin-bottom:16px}
.id{font-size:13px;line-height:2.2;color:#9d8a64;letter-spacing:2px;margin-bottom:26px}
#go{font-family:"Kaiti SC","KaiTi",serif;font-size:18px;letter-spacing:11px;color:#ffe9b0;background:linear-gradient(180deg,#7e2a1d,#5c1d13);border:1px solid #caa45a;padding:12px 42px 12px 53px;cursor:pointer;transition:.3s}
#go:hover{box-shadow:0 0 24px rgba(217,120,60,.45);transform:translateY(-2px)}
#cred{position:fixed;right:14px;bottom:12px;font-size:10px;letter-spacing:2px;color:#6f6040}
@media(max-width:720px){#panel{right:50%;top:auto;bottom:70px;transform:translate(50%,30px);width:min(92vw,33.........完整代码请登录后点击上方下载按钮下载查看