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"/>
<meta name="color-scheme" content="dark"/>
<title>万里长城 · 四时漫游</title>
<link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="%23b3392c"/><text x="32" y="47" font-size="40" text-anchor="middle" fill="%23f2ead8" font-family="serif">关</text></svg>'/>
<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:#101216; --ink2:#181b21; --paper:#efe6d0; --paper-dim:#c9c0aa;
  --seal:#b3392c; --seal-hi:#d14a38; --gold:#c9a86a; --gold-dim:rgba(201,168,106,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#08090d;font-family:"Noto Serif SC","Songti SC",serif;color:var(--paper);user-select:none;-webkit-user-select:none;touch-action:none}
canvas{display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(4,5,9,.42) 100%)}
.hud{position:fixed;z-index:6;transition:opacity .5s}
body.ui-hidden .hud{opacity:0;pointer-events:none!important}
#titleScroll{top:22px;left:22px;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
#titleScroll .vert{writing-mode:vertical-rl;text-orientation:upright;font-family:"Ma Shan Zheng",serif;font-size:30px;letter-spacing:.22em;color:#ece2c8;text-shadow:0 2px 10px rgba(0,0,0,.7)}
#titleScroll .seal-s{width:30px;height:30px;background:var(--seal);color:#f6ecd9;font-family:"Ma Shan Zheng",serif;font-size:20px;display:grid;place-items:center;transform:rotate(-4deg);box-shadow:0 2px 8px rgba(0,0,0,.5)}
#titleScroll .en{writing-mode:vertical-rl;font-size:9px;letter-spacing:.4em;color:var(--gold);opacity:.75;margin-top:2px}
#status{top:20px;right:22px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.chip{background:rgba(12,13,17,.74);border:1px solid var(--gold-dim);border-right:3px solid var(--seal);padding:7px 14px;min-width:150px;text-align:right;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.chip .lab{display:block;font-size:10px;letter-spacing:.45em;color:var(--gold);margin-bottom:2px}
.chip .val{font-size:16px;font-weight:600;color:var(--paper)}
#compass{top:18px;left:50%;transform:translateX(-50%);width:250px;height:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);pointer-events:none}
#cStrip{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
#cStrip span{width:60px;flex:0 0 60px;text-align:center;font-size:15px;color:#e8dfc8;text-shadow:0 1px 4px #000;position:relative;padding-top:6px}
#cStrip span.minor{font-size:11px;color:#9a927e;padding-top:9px}
#cStrip span::after{content:"";position:absolute;left:50%;top:0;width:1px;height:4px;background:var(--gold-dim)}
#cCaret{position:absolute;left:50%;top:26px;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid var(--seal-hi)}
#toast{position:fixed;z-index:8;top:66px;left:50%;transform:translate(-50%,-8px);background:rgba(12,13,17,.85);border:1px solid var(--gold-dim);border-left:3px solid var(--seal);padding:8px 20px;font-size:14px;letter-spacing:.12em;color:var(--paper);opacity:0;pointer-events:none;transition:all .45s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#dock{bottom:18px;left:50%;transform:translateX(-50%);display:flex;background:rgba(13,14,18,.82);border:1px solid var(--gold-dim);box-shadow:0 10px 40px rgba(0,0,0,.55);max-width:96vw}
.sec{padding:10px 18px 12px;border-left:1px solid rgba(201,168,106,.16)}
.sec:first-child{border-left:none}
.sec-t{font-size:9px;letter-spacing:.4em;color:var(--gold);margin-bottom:8px}
.row{display:flex;gap:6px;align-items:center}
#dock button{font-family:inherit;font-size:15px;color:#cfd3da;background:#191b20;border:1px solid #3a3d45;min-width:42px;padding:7px 10px;cursor:pointer;transition:all .18s}
#dock button:hover{border-color:var(--gold);color:var(--paper)}
#dock button.active{background:var(--seal);border-color:#e0b06a;color:#f6ecd9;box-shadow:0 0 14px rgba(179,57,44,.45)}
#dock button.on{background:#7a2a20;border-color:#e0b06a;color:#f6ecd9}
.time-row{gap:14px}
#dial{position:relative;width:72px;height:72px;flex:0 0 72px}
#dialRing{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 90deg,#26335b 0deg 180deg,#d9a441 180deg 360deg);box-shadow:0 0 0 1px var(--gold-dim),inset 0 0 12px rgba(0,0,0,.6)}
#dialCore{position:absolute;inset:9px;border-radius:50%;background:#0e1014;display:grid;place-items:center;border:1px solid rgba(201,168,106,.25)}
#dialTime{font-size:12px;color:var(--paper);letter-spacing:.06em}
#dialMark{position:absolute;left:50%;top:50%;width:2px;height:34px;background:linear-gradient(to top,transparent,var(--seal-hi));transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg)}
.tcol{display:flex;flex-direction:column;gap:8px;width:172px}
#timeRange{width:100%;accent-color:var(--seal);cursor:pointer;height:4px}
.speeds button{min-width:0;flex:1;padding:5px 0;font-size:13px}
#hint{position:fixed;z-index:6;right:22px;bottom:20px;font-size:11px;letter-spacing:.18em;color:#8f887a;pointer-events:none;text-shadow:0 1px 3px #000}
#crosshair{position:fixed;z-index:5;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:rgba(240,232,214,.9);box-shadow:0 0.........完整代码请登录后点击上方下载按钮下载查看