three实现三维80年代农村土屋房子场景漫游体验回忆代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维80年代农村土屋房子场景漫游体验回忆代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#a63a2e">
<title>土墙岁月 · 八十年代南方乡村 | Three.js 场景</title>
<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{
  --paper:#f4e8cf; --paper2:#e9d9b4; --ink:#2f2a22; --ink2:#4a3d2c;
  --red:#a63a2e; --red-d:#7c241b; --gold:#c9a15c; --line:rgba(90,60,30,.45);
  --noise: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%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.2 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#1a1410}
body{font-family:'Noto Serif SC',serif;color:var(--ink)}
#app{position:fixed;inset:0}
#app canvas{display:block}

#vig{position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(24,14,6,.38) 100%)}
#grain{position:fixed;inset:-60px;z-index:6;pointer-events:none;opacity:.5;
  background-image:var(--noise);animation:grain 1.1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-18px,10px)}
  50%{transform:translate(12px,-14px)}75%{transform:translate(-8px,-8px)}100%{transform:translate(0,0)}}

/* ---------- 开场扉页 ---------- */
#intro{position:fixed;inset:0;z-index:50;display:flex;
  background:
    radial-gradient(1200px 700px at 78% 18%,rgba(201,161,92,.20),transparent 60%),
    radial-gradient(900px 600px at 12% 88%,rgba(166,58,46,.10),transparent 55%),
    linear-gradient(155deg,#f6ebd2,#ecdcb6 55%,#e2cd9f);
  transition:opacity 1s ease}
#intro::before{content:"";position:absolute;inset:0;background-image:var(--noise);pointer-events:none}
#intro.hide{opacity:0;pointer-events:none}
.frame{position:absolute;inset:16px;border:1px solid var(--line);pointer-events:none}
.frame::after{content:"";position:absolute;inset:6px;border:1px solid rgba(90,60,30,.25)}
.bgchar{position:absolute;right:-4vw;bottom:-16vh;font-family:'Ma Shan Zheng';font-size:56vh;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(122,84,40,.13);pointer-events:none;user-select:none}
.intro-left{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:9vh 6vw;max-width:680px}
.kicker{font-size:12px;letter-spacing:.55em;color:#8a6a44}
.kicker::before{content:"";display:inline-block;width:34px;height:1px;background:#8a6a44;vertical-align:middle;margin-right:12px}
.m-title{display:none;font-family:'Ma Shan Zheng';font-size:64px;color:var(--ink);margin:.3em 0 0}
.intro-para{font-size:15px;line-height:2.25;color:var(--ink2);margin:2.4em 0 2.6em;max-width:32em;
  border-left:3px solid var(--red);padding-left:1.3em}
.enter-btn{align-self:flex-start;font-family:'Ma Shan Zheng';font-size:27px;letter-spacing:.35em;
  color:#f6e7c8;background:var(--red);border:1px solid var(--red-d);padding:.42em 1.5em .42em 1.85em;
  cursor:pointer;box-shadow:0 3px 0 var(--red-d);transition:.28s}
.enter-btn:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(120,30,20,.35),0 3px 0 var(--red-d)}
.enter-btn:active{transform:translateY(0)}
.hint-line{margin-top:1.9em;font-size:12px;letter-spacing:.22em;color:#8a7a5f}
.intro-right{position:relative;width:min(36vw,330px);border-left:1px solid rgba(90,60,30,.3);
  display:flex;align-items:center;justify-content:center;gap:2.4em;padding:8vh 0}
.v-title{writing-mode:vertical-rl;font-family:'Ma Shan Zheng';font-size:clamp(64px,12vh,118px);
  letter-spacing:.16em;color:var(--ink);text-shadow:3px 3px 0 rgba(166,58,46,.14)}
.v-sub{writing-mode:vertical-rl;font-size:13px;letter-spacing:.6em;color:#7a5c38}
.seal{position:absolute;bottom:9vh;right:calc(50% - 96px);width:56px;height:56px;background:var(--red);
  color:#f6e7c8;font-family:'Ma Shan Zheng';font-size:32px;display:grid;place-items:center;
  transform:rotate(-5deg);box-shadow:2px 3px 0 rgba(90,30,20,.35)}
.wisp{position:absolute;left:50%;bottom:24vh;width:10px;height:10px;border-radius:50%;
  background:rgba(120,100,80,.35);filter:blur(6px);animation:wisp 7s linear infinite;opacity:0}
.wisp:nth-child(2){animation-delay:2.3s;left:46%}.wisp:nth-child(3){animation-delay:4.6s;left:54%}
@keyframes wisp{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:.5}
  100%{transform:translateY(-46vh) translateX(26px) scale(3.4);opacity:0}}
@media (max-width:760px){.intro-right,.bgchar{display:none}.m-title{display:block}.intro-left{padding:12vh 8vw}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .9s}
#hud.show{opacity:1}
.chip{pointer-events:auto;background:linear-gradient(160deg,#f6ead0,#ecdcb8);
  border:1px solid rgba(64,50,30,.42);border-radius:3px;color:#3a3126;
  box-shadow:0 2px 0 rgba(64,50,30,.22),inset 0 0 0 1px rgba(255,250,235,.55);
  font-family:'Noto Serif SC';font-size:13px;padding:.5em 1em;cursor:pointer;
  transition:transform .22s,box-shadow .22s,border-color .22s,background .22s;user-select:none}
.chip:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:0 6px 14px rgba(40,25,10,.28)}
.chip.on{background:var(--red);color:#f6e7c8;border-color:var(--red-d)}
.chip.off{opacity:.55}
#brand{position:absolute;top:24px;left:24px;display:flex;flex-direction:column;align-items:center;gap:8px}
#brand .bt{writing-mode:vertical-rl;font-family:'Ma Shan Zheng';font-size:21px;letter-spacing:.32em;padding:.7em .35em}
#brand .seal2{width:30px;height:30px;background:var(--red);color:#f6e7c8;font-family:'Ma Shan Zheng';
  font-size:17px;display:grid;place-items:center;transform:rotate(-4deg)}
#panel{position:absolute;top:24px;right:24px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:70vw}
#panel .grp{display:flex;gap:6px}
#hint{position:absolute;left:24px;bottom:22px;font-size:12px;letter-spacing:.18em;padding:.6em 1.1em}
#credit{position:absolute;right:24px;bottom:22px;font-size:11px;letter-spacing:.2em;color:rgba(244,232,207,.75);
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
#help{position:absolute;top:74px;right:24px;width:270px;padding:14px 16px;font-size:12.5px;line-height:2.1;display:none}
#help.show{display:block}
#help b{color:var(--red)}

#card{position:absolute;left:24px;bottom:70px;width:min(350px,82vw);pointer-events:auto;
  background:linear-gradient(165deg,#f7ecd4,#eadbb6);border:1px solid rgba(64,50,30,.45);
  border-left:4px solid var(--red);padding:16px 20px 18px;box-shadow:0 14px 34px rgba(20,10,4,.4);
  transform:translateY(24px);opacity:0;visibility:hidden;transition:.45s cubic-bezier(.2,.9,.3,1.15)}
#card.show{transform:none;opacity:1;visibility:visible}
#card .tag{font-size:11px;letter-spacing:.45em;color:var(--red)}
#card h3{font-family:'Ma Shan Zheng';font-size:31px;font-weight:400;margin:.15em 0 .25em}
#card p{font-size:13.5px;line-height:2.05;color:var(--ink2)}
#card .no{position:absolute;top:12px;right:44px;font-family:'Ma Shan Zheng';font-size:15px;color:var(--gold)}
#card .close{position:absolute;top:8px;right:10px;border:none;background:none;font-size:18px;color:#7a6a50;cursor:pointer;transition:.2s}
#card .close:hover{color:var(--red);transform:rotate(90deg)}

#tip{position:fixed;z-index:30;pointer-events:none;background:var(--ink);color:var(--paper);
  font-size:12px;letter-spacing:.25em;padding:.45em .9em;border-radius:2px;opacity:0;
  transform:translateY(4px);transition:opacity .2s,transform .2s}
#tip.show{opacity:1;transform:none}
#tip::after{content:"";position:absolute;left:12px;bottom:-5px;border:5px solid transparent;border-top-color:var(--ink);border-bottom:none}

#doorTip{position:fixed;left:50%;bottom:12vh;transform:translateX(-50%) translateY(8px);z-index:22;
  background:rgba(31,26,20,.88);color:#f4e8cf;border:1px solid rgba(201,161,92,.55);
  font-size:14px;letter-spacing:.3em;padding:.65em 1.4em .65em 1.7em;border-radius:2px;
  opacity:0;transition:.3s;pointer-events:none}
#doorTip.show{opacity:1;transform:translateX(-50%)}
#toast{position:fixed;top:12vh;left:50%;transform:translate(-50%,-10px);z-index:40;
  font-family:'Ma Shan Zheng';font-size:26px;letter-spacing:.25em;color:#f4e8cf;
  background:rgba(31,26,20,.82);border:1px solid rgba(201,161,92,.5);padding:.4em 1.2em;
  opacity:0;transition:.45s;pointer-events:none}
#toast.show{opacity:1;transform:translate(.........完整代码请登录后点击上方下载按钮下载查看