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=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --amber:#ffb454; --amber2:#ff8a3d; --cyan:#8fd8ff; --red:#ff5d5d;
  --ink:#f2ecdf; --dim:#9aa3b5; --panel:rgba(10,15,26,.72); --line:rgba(255,180,84,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0f1a}
body{font-family:'Chakra Petch','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;color:var(--ink);
  -webkit-user-select:none;user-select:none}
canvas{display:block;cursor:crosshair}

#hud{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:0;transition:opacity .6s}
#hud.on{opacity:1}
.panel{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);
  padding:10px 16px;backdrop-filter:blur(4px);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
#altBox{position:absolute;top:22px;left:22px}
#altBox .label{font-size:11px;letter-spacing:.35em;color:var(--dim)}
#altNum{font-size:52px;font-weight:700;line-height:1;color:var(--amber);text-shadow:0 0 22px rgba(255,180,84,.45);font-variant-numeric:tabular-nums}
#altNum small{font-size:20px;color:var(--ink);margin-left:4px;font-weight:600}
#bestLine{font-size:12px;color:var(--dim);margin-top:4px;letter-spacing:.15em}
#timerBox{position:absolute;top:22px;left:50%;transform:translateX(-50%);text-align:center;border-left-width:1px;border-bottom:3px solid var(--amber)}
#timer{font-size:30px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
#timerBox .label{font-size:10px;letter-spacing:.4em;color:var(--dim)}
#windBox{position:absolute;top:22px;right:64px;display:flex;align-items:center;gap:12px;border-left-width:1px;border-right:3px solid var(--cyan)}
#windArrow{font-size:22px;color:var(--cyan);display:inline-block;transition:transform .3s}
#windBars{display:flex;gap:3px;align-items:flex-end;height:22px}
#windBars i{width:5px;background:#2a3550;transition:background .2s}
#windBars i.on{background:var(--cyan);box-shadow:0 0 8px rgba(143,216,255,.7)}
#windName{font-size:11px;color:var(--dim);letter-spacing:.2em;min-width:52px}
#windBox.gust{border-color:var(--red)} #windBox.gust #windArrow,#windBox.gust #windName{color:var(--red)}
#windBox.gust #windBars i.on{background:var(--red);box-shadow:0 0 8px rgba(255,93,93,.8)}

#track{position:absolute;right:26px;top:50%;transform:translateY(-50%);height:46vh;width:14px}
#track .rail{position:absolute;left:6px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--amber),rgba(255,180,84,.15))}
#track .tick{position:absolute;left:0;width:14px;height:2px;background:rgba(242,236,223,.5)}
#track .tick span{position:absolute;right:20px;top:-7px;font-size:10px;color:var(--dim);letter-spacing:.1em;white-space:nowrap}
#trackMark{position:absolute;left:1px;width:12px;height:12px;background:var(--amber);transform:rotate(45deg);
  box-shadow:0 0 12px rgba(255,180,84,.9);transition:top .15s linear}
#trackGoal{position:absolute;left:-4px;top:-14px;font-size:11px;color:var(--amber);letter-spacing:.2em}

#stamBox{position:absolute;left:22px;bottom:26px;width:280px}
#stamBox .label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.3em;color:var(--dim);margin-bottom:6px}
#stamBar{height:10px;background:#1a2234;border:1px solid #2c3a58;position:relative;overflow:hidden}
#stamFill{height:100%;width:100%;background:linear-gradient(90deg,var(--amber2),var(--amber));transition:width .12s linear}
#stamBox.low #stamFill{background:linear-gradient(90deg,#c22f2f,var(--red))}
#stamBox.low #stamBar{animation:stamPulse .5s infinite alternate}
@keyframes stamPulse{from{box-shadow:0 0 4px rgba(255,93,93,.4)}to{box-shadow:0 0 18px rgba(255,93,93,.95)}}
#gripTag{margin-top:6px;font-size:12px;letter-spacing:.25em;color:var(--dim)}
#gripTag.hold{color:var(--amber)} #gripTag.pipe{color:var(--cyan)}

#hint{position:absolute;right:26px;bottom:26px;font-size:11px;color:var(--dim);text-align:right;line-height:1.9;letter-spacing:.12em}
#hint b{color:var(--ink);font-weight:600;background:#1a2234;border:1px solid #2c3a58;padding:0 6px}

#xhair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px}
#xhair .dot{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:var(--ink);border-radius:50%;opacity:.9}
#xhair .ring{position:absolute;inset:0;border:2px solid var(--amber);border-radius:50%;opacity:0;transform:scale(1.6);transition:all .18s}
#xhair.grip .ring{opacity:.95;transform:scale(1)}
#xhair.grip .dot{background:var(--amber)}

#toasts{position:absolute;top:16%;left:50%;transform:translateX(-50%);text-align:center}
.toast{font-size:17px;letter-spacing:.3em;color:var(--ink);background:var(--panel);border:1px solid var(--line);
  padding:8px 26px;margin-bottom:8px;animation:toastIn 2.6s forwards}
.toast.warn{color:var(--red);border-color:rgba(255,93,93,.5)}
.toast.gold{color:var(--amber)}
@keyframes toastIn{0%{opacity:0;transform:translateY(-14px)}12%{opacity:1;trans.........完整代码请登录后点击上方下载按钮下载查看