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="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Sans+SC:wght@300;400;500;700&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0c150f; --line:rgba(216,166,86,.5);
  --gold:#d8a24a; --gold2:#f0c878; --paper:#f1e9d7; --dim:#a8b3a0; --seal:#b03a2e;
  --fd:'ZCOOL XiaoWei',serif; --fb:'Noto Sans SC',sans-serif; --fn:'Rajdhani',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);font-family:var(--fb);color:var(--paper)}
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block;cursor:crosshair}
.hud{position:fixed;inset:0;z-index:5;pointer-events:none;user-select:none}
.panel{position:absolute;pointer-events:auto;background:linear-gradient(165deg,rgba(17,28,21,.92),rgba(9,16,12,.94));
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45);padding:14px 16px;
  opacity:0;animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards}
.panel::before,.panel::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--gold2)}
.panel::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.panel::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

#plaque{top:18px;left:18px;display:flex;gap:13px;align-items:center;animation-delay:.1s}
.seal{width:46px;height:46px;background:var(--seal);color:#f7ede0;font-family:var(--fd);writing-mode:vertical-rl;
  display:grid;place-items:center;font-size:17px;letter-spacing:2px;flex:none;
  box-shadow:inset 0 0 0 2px rgba(247,237,224,.55),0 3px 10px rgba(0,0,0,.4);transform:rotate(-3deg);transition:transform .35s}
#plaque:hover .seal{transform:rotate(0) scale(1.06)}
#plaque h1{font-family:var(--fd);font-size:26px;font-weight:400;letter-spacing:.18em;line-height:1}
#plaque p{font-size:10px;letter-spacing:.3em;color:var(--gold);margin-top:6px}

#clockbox{top:18px;right:18px;display:flex;gap:14px;align-items:center;animation-delay:.2s}
#compass{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;position:relative;flex:none;background:rgba(0,0,0,.25)}
#needle{position:absolute;left:50%;top:50%;width:2px;height:34px;margin:-17px 0 0 -1px;
  background:linear-gradient(var(--seal) 50%,#e8e2d2 50%)}
#compass b{position:absolute;left:50%;top:3px;transform:translateX(-50%);font-size:8px;color:var(--gold2)}
#clockbox .tt{text-align:right;min-width:158px}
#clockTime{font-family:var(--fn);font-size:42px;font-weight:600;letter-spacing:.04em;line-height:.9}
#clockTime i{font-style:normal;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.chips{display:flex;gap:6px;justify-content:flex-end;margin-top:7px;flex-wrap:wrap}
.chip{font-size:11px;padding:2px 9px;border:1px solid var(--line);color:var(--gold2);letter-spacing:.15em;background:rgba(216,162,74,.07)}
.chip.wx{color:#bfe3c8;border-color:rgba(160,210,175,.4)}

#deck{bottom:18px;right:18px;width:296px;animation-delay:.3s}
#deck h3{font-size:11px;letter-spacing:.4em;color:var(--gold);font-weight:500;margin:2px 0 9px;display:flex;align-items:center;gap:8px}
#deck h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
#deck h3.h3x{margin-top:14px}
.row{display:flex;gap:6px;flex-wrap:wrap}
.btn{cursor:pointer;font-family:var(--fb);font-size:12px;letter-spacing:.1em;color:var(--paper);
  background:rgba(255,255,255,.045);border:1px solid rgba(216,166,86,.35);padding:6px 11px;transition:all .22s}
.btn:hover{border-color:var(--gold2);color:var(--gold2);transform:translateY(-1px);background:rgba(216,166,74,.12)}
.btn.on{background:var(--gold);color:#141d15;font-weight:700;border-color:var(--gold2);box-shadow:0 3px 12px rgba(216,162,74,.35)}
.btn:active{transform:translateY(0) scale(.96)}
input[type=range]{width:100%;accent-color:var(--gold);margin:11px 0 2px;cursor:pointer}
.switchrow{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--dim);letter-spacing:.1em}
.swi{display:none}
.sw{position:relative;width:38px;height:20px;background:rgba(255,255,255,.1);border:1px solid var(--line);cursor:pointer;transition:.25s;display:inline-block}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;background:var(--dim);transition:.25s}
.swi:checked+.sw{background:rgba(216,166,74,.35)}
.swi:checked+.sw::after{left:20px;background:var(--gold2)}

#help{bottom:18px;left:18px;animation-delay:.4s;font-size:12px;color:var(--dim);line-height:2.1;letter-spacing:.05em}
#help b{color:var(--paper);font-weight:500;letter-spacing:.3em}
kbd{font-family:var(--fn);font-size:11px;color:var(--gold2);border:1px solid var(--line);padding:1px 7px;margin-right:2px;background:rgba(216,166,74,.08);border-radius:3px}

#xhair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--gold2);
  box-shadow:0 0 6px rgba(0,0,0,.8);z-index:6;opacity:0;transition:.2s;pointer-events:none;mix-blend-mode:difference}
body.locked #xhair{opacity:.9}
#vig{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(5,10,7,.35) 100%)}
#toast{position:fixed;top:88px;left:50%;transform:translate(-50%,-8px);z-index:8;background:rgba(12,20,15,.92);
  border:1px solid var(--line);color:var(--gold2);font-size:13px;letter-spacing:.3em;padding:8px 22px;opacity:0;pointer-events:none;transition:.4s}
#toast.show{opacity:1;transform:translate(-50%,0)}

#overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;text-align:center;
  background:radial-gradient(1100px 700px at 50% 34%,rgba(16,28,21,.85),rgba(7,12,9,.95));transition:opacity .5s}
#overlay.hide{opacity:0;pointer-events:none}
.ov-inner{max-width:660px;padding:30px;animation:rise .8s .1s cubic-bezier(.2,.8,.2,1) both}
.seal.big{width:64px;height:64px;font-size:24px;margin:0 auto 18px}
#overlay h2{font-family:var(--fd);font-weight:400;font-size:clamp(46px,7.5vw,76px);letter-spacing:.16em;line-height:1.05;
  text-shadow:0 4px 30px rgba(216,162,74,.25)}
.rule{display:flex;align-items:center;gap:12px;margin:20px auto 16px;max-width:430px}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.rule i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
#overlay .meta{font-size:13px;letter-spacing:.22em;color:var(--dim);line-height:2.15}
#overlay .meta em{font-style:normal;color:var(--gold2)}
.keys{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0 26px}
.keys span{font-size:12px;color:var(--dim);border:1px solid rgba(216,166,86,.28);padding:6px.........完整代码请登录后点击上方下载按钮下载查看