three实现三维100层大厦写字楼高楼模拟乘坐电梯参观体验代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维100层大厦写字楼高楼模拟乘坐电梯参观体验代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>云顶大厦 · 100层双电梯实时模拟</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#0d1015; --panel:#161b22; --panel2:#1b222b; --line:#2b3440; --line2:#39434f;
  --ink:#e9edf2; --mut:#8d97a5; --amber:#ffb648; --amber2:#ffd28a; --up:#43d6a5; --down:#ff8a5c;
  --lcd:#140e04; --red:#ff5d5d;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:'Noto Sans SC',sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
#app canvas{display:block}
.num{font-family:'Rajdhani','Noto Sans SC',sans-serif}
#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .5s}
#hud.on{opacity:1}
.panel{background:linear-gradient(180deg,#1a212a,#141a21);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.5);border-radius:8px}
.brushed{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.026) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1a212a,#141a21)}
#plate{position:absolute;left:22px;top:20px;width:236px;padding:16px 18px 14px}
#plate .brand{display:flex;align-items:center;gap:11px}
#plate .logo{width:40px;height:40px;border-radius:6px;background:linear-gradient(160deg,#ffc76b,#e08f22);
  color:#241503;font-weight:900;font-size:21px;display:grid;place-items:center;box-shadow:0 3px 10px rgba(255,170,60,.35)}
#plate h1{font-size:21px;font-weight:900;letter-spacing:2px;line-height:1.1}
#plate .en{font-family:'Rajdhani';font-size:11px;letter-spacing:3px;color:var(--mut);font-weight:600}
#plate hr{border:0;border-top:1px solid var(--line);margin:12px 0 8px}
#plate .flabel{font-size:10px;letter-spacing:3px;color:var(--mut)}
#floorNow{font-family:'Rajdhani';font-size:64px;font-weight:700;line-height:1;color:#fff;
  text-shadow:0 0 22px rgba(255,182,72,.35)}
#floorNow small{font-size:22px;color:var(--amber);margin-left:4px}
#locText{font-size:12.5px;color:var(--amber2);margin-top:2px;letter-spacing:1px}
#cars{position:absolute;right:22px;top:20px;width:196px;display:flex;flex-direction:column;gap:10px}
.carCard{padding:12px 14px 11px;position:relative;overflow:hidden}
.carCard .hd{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:1px}
.carCard .badge{width:20px;height:20px;border-radius:4px;background:linear-gradient(160deg,#ffc76b,#e08f22);
  color:#241503;font-family:'Rajdhani';font-weight:700;font-size:13px;display:grid;place-items:center}
.carCard .dot{width:7px;height:7px;border-radius:50%;background:#5a6572;margin-left:auto;transition:.3s}
.carCard.run .dot{background:var(--up);box-shadow:0 0 8px var(--up);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
.carCard .row{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.carCard .fl{font-family:'Rajdhani';font-size:34px;font-weight:700;line-height:1}
.carCard .ar{font-size:15px;width:18px}
.ar.u{color:var(--up)} .ar.d{color:var(--down)} .ar.i{color:#5a6572}
.carCard .st{font-size:11px;color:var(--mut);margin-left:auto;letter-spacing:1px}
.carCard .shaft{margin-top:8px;height:4px;background:#0d1116;border-radius:2px;position:relative}
.carCard .shaft i{position:absolute;left:0;top:-2px;width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 8px rgba(255,182,72,.7);transition:top .15s linear}
#prompt{position:absolute;left:50%;bottom:70px;transform:translateX(-50%) translateY(8px);
  padding:10px 20px;border-radius:999px;font-size:14px;letter-spacing:1px;opacity:0;transition:.25s;white-space:nowrap}
#prompt.on{opacity:1;transform:translateX(-50%) translateY(0)}
#prompt kbd{margin-right:8px}
kbd{display:inline-block;min-width:22px;text-align:center;padding:2px 7px;border-radius:5px;
  background:#232b35;border:1px solid #3a4552;border-bottom:2px solid #3a4552;
  font-family:'Rajdhani';font-size:12px;font-weight:700;color:var(--amber2)}
#keys{position:absolute;left:22px;bottom:18px;font-size:11.5px;color:var(--mut);letter-spacing:.5px}
#keys kbd{font-size:10px;padding:1px 5px;margin:0 3px 0 8px}
#xhair{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;
  background:rgba(255,255,255,.85);box-shadow:0 0 4px rgba(0,0,0,.6)}
#xhair::after{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;
  border:1.5px solid var(--amber);opacity:0;transform:scale(.5);transition:.2s}
#xhair.act::after{opacity:.9;transform:scale(1)}
#toasts{position:absolute;left:50%;top:86px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{padding:9px 20px;border-radius:6px;font-size:13px;letter-spacing:1px;background:#171d25f2;
  border:1px solid var(--line2);border-left:3px solid var(--amber);box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:tin .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tin{from{opacity:0;transform:translateY(-12px)}}
.toast.out{opacity:0;transform:translateY(-8px);transition:.35s}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 62%,rgba(5,8,12,.42))}
#flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,60,60,.28),rgba(180,0,0,.45));opacity:0}
#flash.on{animation:fl .3s 6}
@keyframes fl{50%{opacity:1}}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(5,8,12,.62);z-index:30}
.modal.open{display:grid}
#copBox{width:372px;padding:20px 22px 18px;pointer-events:auto;animation:pop .28s cubic-bezier(.2,.9,.3,1.15)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
#copBox .hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#copBox .hd b{font-size:16px;letter-spacing:2px}
#copBox .hd .sub{font-family:'Rajdhani';font-size:11px;letter-spacing:3px;color:var(--mut)}
#copBox .hd .x{margin-left:auto;cursor:pointer;width:28px;height:28px;border-radius:6px;border:1px solid var(--line2);
  background:#10151b;color:var(--mut);font-size:15px;line-height:1;transition:.2s}
#copBox .hd .x:hover{color:var(--amber);border-color:var(--amber)}
.lcd{background:var(--lcd);border:1px solid #3a2f16;border-radius:6px;padding:8px 14px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 18px rgba(0,0,0,.8);display:flex;align-items:center;gap:14px;margin-bottom:14px}
.lcd::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none}
.lcd .big{font-family:'Rajdhani';font-size:42px;font-weight:700;color:var(--amber);text-shadow:0 0 12px rgba(255,182,72,.6);line-height:1;min-width:56px}
.lcd .ar{font-size:22px;width:24px}
.lcd .in.........完整代码请登录后点击上方下载按钮下载查看