three做个三维埃及金字塔探索场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维埃及金字塔探索

下面为部分代码预览，完整代码请点击下载或在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=Cinzel:wght@500;700&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">
<style>
:root{--gold:#c9a35c;--ink:rgba(10,8,5,.55);--paper:#e8dcc2}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#000;font-family:'Noto Serif SC',serif;color:var(--paper)}
#app canvas{display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
 background:radial-gradient(ellipse at center,transparent 52%,rgba(6,4,2,.52) 100%)}
#crosshair{position:fixed;left:50%;top:50%;width:5px;height:5px;margin:-3px 0 0 -3px;border:1px solid rgba(232,220,194,.85);border-radius:50%;z-index:5;pointer-events:none;box-shadow:0 0 4px rgba(0,0,0,.6)}
#compassWrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:340px;height:44px;z-index:5;pointer-events:none;
 border-top:1px solid rgba(201,163,92,.45);border-bottom:1px solid rgba(201,163,92,.45);background:linear-gradient(rgba(8,6,3,.35),rgba(8,6,3,.15))}
#compass{width:100%;height:100%}
#status{position:fixed;left:22px;bottom:20px;z-index:5;pointer-events:none;padding:12px 18px 10px;min-width:210px;
 border:1px solid rgba(201,163,92,.4);background:var(--ink);backdrop-filter:blur(4px)}
#status::after{content:'';position:absolute;inset:4px;border:1px solid rgba(201,163,92,.18);pointer-events:none}
#clock{font-family:Cinzel,serif;font-size:30px;letter-spacing:.12em;color:var(--gold);line-height:1.1}
#status .row{display:flex;justify-content:space-between;gap:18px;font-size:13px;margin-top:5px;color:rgba(232,220,194,.9)}
#status .row.small{font-size:11px;opacity:.65}
#hint{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:5;pointer-events:none;
 font-size:14px;letter-spacing:.14em;color:var(--gold);text-shadow:0 1px 6px rgba(0,0,0,.8);opacity:0;transition:opacity .4s}
#bigplace{position:fixed;left:0;right:0;top:19%;text-align:center;z-index:5;pointer-events:none;
 font-family:Cinzel,'Noto Serif SC',serif;font-size:32px;font-weight:600;letter-spacing:.42em;text-indent:.42em;color:#f0e4c8;
 text-shadow:0 2px 18px rgba(0,0,0,.85);opacity:0;transform:translateY(8px);transition:opacity .9s,transform .9s}
#bigplace.show{opacity:1;transform:none}
#toasts{position:fixed;left:50%;bottom:158px;transform:translateX(-50%);z-index:6;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.toast{padding:8px 20px;border:1px solid rgba(201,163,92,.5);background:rgba(10,8,5,.72);font-size:13.5px;letter-spacing:.08em;
 color:#efe4c8;animation:toastIn .45s ease;max-width:70vw;text-align:center}
.toast.out{opacity:0;transition:opacity .8s}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
#keysTip{position:fixed;right:20px;bottom:20px;z-index:5;pointer-events:none;font-size:11px;line-height:1.9;color:rgba(232,220,194,.55);text-align:right;letter-spacing:.06em}
#keysTip b{color:rgba(201,163,92,.85);font-weight:600}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .32s;z-index:40}
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
 background:rgba(5,4,2,.5);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .5s}
.overlay.show{opacity:1;pointer-events:auto}
.panel{max-width:620px;width:92vw;padding:38px 44px;text-align:center;position:relative;
 border:1px solid rgba(201,163,92,.55);background:rgba(12,9,5,.82);outline:1px solid rgba(201,163,92,.15);outline-offset:6px}
.kicker{font-family:Cinzel,serif;font-size:11px;letter-spacing:.5em;text-indent:.5em;color:var(--gold);opacity:.85}
.panel h1{font-family:Cinzel,'Noto Serif SC',serif;font-size:44px;font-weight:700;letter-spacing:.28em;text-indent:.28em;margin:14px 0 4px;color:#f2e7cd}
.panel .sub{font-size:14px;line-height:1.9;color:rgba(232,220,194,.8);margin:10px 0 20px}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;font-size:12.5px;color:rgba(232,220,194,.75);text-align:left;margin:0 auto 24px;max-width:470px}
.keys div{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(201,163,92,.18);padding:3px 0}
kbd{font-family:Cinzel,serif;color:var(--gold);border:1px solid rgba(201,163,92,.4);padding:0 6px;font-size:11px;border-radius:2px}
button{font-family:'Noto Serif SC',serif;font-size:15px;letter-spacing:.3em;text-indent:.3em;color:var(--gold);
 background:transparent;border:1px solid rgba(201,163,92,.65);padding:11px 30px;cursor:pointer;transition:all .25s}
button:hover{background:rgba(201,163,92,.16);color:#f5ead0}
.btnRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 6px}
.btnRow button{font-size:12.5px;letter-spacing:.12em;text-indent:.12em;padding:7px 16px}
.btnRow button.on{background:rgba(201,163,92,.85);color:#14100a}
.tiny{font-size:11px;color:rgba(232,220,194,.4);margin-top:16px;letter-spacing:.1em}
.ctl{margin-top:6px}
input[type=range]{width:300px;accent-color:#c9a35c;vertical-align:middle}
.lbl{font-size:12.5px;color:rgba(232,220,194,.75);margin-right:10px;letter-spacing:.1em}
@media (max-width:760px){.keys{grid-template-columns:1fr}.panel h1{font-size:30px}}
</style>
</head>
<body>
<div id="app"></div>

<div id="vignette"></div>
<div id="crosshair"></div>
<div id="compassWrap"><canvas id="compass" width="340" height="44"></canvas></div>
<div id="status">
 <div id="clock">05:49</div>
 <div class="row"><span id="wxname">晴朗</span><span id="placename">吉萨高原</span></div>
 <div class="row small"><span id="alt">海拔 0 m</span><span id="modename">塔外</span></div>
 <div class="row small"><span id="torchstate">火把 · 燃</span><span>F 火把 · R 绳索</span></div>
</div>
<div id="hint"></div>
<div id="bigplace"></div>
<div id="toasts"></div>
<div id="keysTip">
 <b>W A S D</b> 移动 · <b>Shift</b> 疾跑 · <b>Space</b> 跳跃<br>
 <b>F</b> 火把点燃/熄灭 · <b>R</b> 塔内绳索脱困<br>
 <b>1-4</b> 天气 · <b>G</b> 自动天气 · <b>T</b> 时间停驻<br>
 <b>[ ]</b> 时间流速 · <b>M</b> 声音 · <b>Esc</b> 菜单
</div>
<div id="fade"></div>

<div id="menu" class="overlay show">
 <div class=&quo.........完整代码请登录后点击上方下载按钮下载查看