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,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#0e1116">
<title>科目二 · 地下车库倒车入库 3D 模拟</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0e1116}
body{font-family:'Rajdhani','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;color:#e8ecf3;-webkit-font-smoothing:antialiased}
.zk{font-family:'ZCOOL QingKe HuangYou','PingFang SC','Microsoft YaHei',sans-serif;font-weight:400}
#gl{position:fixed;inset:0;z-index:0}
#gl canvas{display:block}
#vig{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(4,6,9,.55) 100%)}
#flash{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .55s;box-shadow:inset 0 0 150px rgba(255,64,64,.7)}
#flash.on{opacity:1;transition:opacity .04s}
.hud{position:fixed;z-index:5;pointer-events:none}
.panel{background:linear-gradient(160deg,rgba(21,25,32,.92),rgba(12,15,20,.88));border:1px solid #2b313c;box-shadow:0 6px 24px rgba(0,0,0,.45)}

/* 顶部状态栏 */
#status{top:14px;left:14px;padding:10px 20px 12px;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
#status .tag{display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.18em;color:#9aa3b2}
#status .tag b{color:#ffb400;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:#3a4150}
.dot.live{background:#37e08b;box-shadow:0 0 8px #37e08b;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}
#timer{font-size:36px;font-weight:700;letter-spacing:.04em;color:#ffb400;line-height:1.05;text-shadow:0 0 18px rgba(255,180,0,.35)}
#status .row2{display:flex;gap:16px;align-items:baseline;margin-top:2px}
.chip{font-size:13px;color:#8b93a3;letter-spacing:.06em}
.chip b{color:#e8ecf3;font-size:17px;font-weight:700}
.chip.hit b{color:#ff8383}

/* 挡位 + 方向盘 */
#gearPod{left:16px;bottom:16px;width:138px;padding:14px 12px 12px;text-align:center;clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
#gearLetter{font-size:58px;font-weight:700;line-height:.95;transition:color .15s,text-shadow .15s}
#gearLetter.D{color:#37e08b;text-shadow:0 0 16px rgba(55,224,139,.5)}
#gearLetter.R{color:#ff5d5d;text-shadow:0 0 16px rgba(255,93,93,.5)}
#gearLetter.N{color:#8b93a3}
#gearName{font-size:12px;color:#8b93a3;letter-spacing:.3em;margin-top:3px}
#wheelSvg{margin-top:10px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}

/* 速度 + 踏板 */
#speedPod{right:16px;bottom:16px;padding:12px 20px 14px;text-align:right;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
#speed{font-size:60px;font-weight:700;line-height:.85;color:#e8ecf3}
#speedPod .unit{font-size:11px;color:#8b93a3;letter-spacing:.3em;margin-top:2px}
.pedals{display:flex;gap:6px;justify-content:flex-end;margin-top:10px;height:34px;align-items:flex-end}
.pedal{width:15px;height:34px;background:#161b22;border:1px solid #2b313c;position:relative;overflow:hidden}
.pedal i{position:absolute;left:0;right:0;bottom:0;height:0%;transition:height .07s}
#pedGas i{background:#37e08b}#pedBrk i{background:#ff5d5d}
.pedal em{position:absolute;top:-15px;left:0;right:0;font-size:10px;font-style:normal;color:#6d7686;letter-spacing:.1em}
#hbLamp{margin-top:8px;font-size:12px;letter-spacing:.2em;color:#4a5261;transition:.15s}
#hbLamp.on{color:#ff5d5d;text-shadow:0 0 10px rgba(255,93,93,.7)}

/* 小地图 */
#mapPod{top:14px;right:14px;padding:9px 9px 7px}
#mapPod .cap{font-size:11px;color:#8b93a3;letter-spacing:.2em;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
#mapPod .cap i{display:inline-block;width:8px;height:8px;background:#2ecc71;margin-right:5px;animation:pulse 1.4s infinite}
#mini{display:block;background:#0b0e13;border:1px solid #232935}

/* 倒车影像 */
#backup{left:50%;bottom:18px;transform:translate(-50%,24px);opacity:0;transition:.28s;border:1px solid #3a4150;background:#000}
#backup.on{transform:translate(-50%,0);opacity:1}
#backup .bar{height:24px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#14181f;font-size:12px;letter-spacing:.18em;color:#ff9a9a}
#backup .rdot{width:7px;height:7px;border-radius:50%;background:#ff5d5d;animation:pulse .9s infinite}
#backup .stage{position:relative;line-height:0}
#guides{position:absolute;inset:0}

/* 提示 */
#toast{top:88px;left:50%;transform:translate(-50%,-10px);padding:9px 24px;font-size:15px;letter-spacing:.1em;opacity:0;transition:.3s;border-left:3px solid #ffb400}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.warn{border-left-color:#ff5d5d;color:#ffb9b9}
#toast.good{border-left-color:#37e08b;color:#bdf5d9}

/* 入库判定进度 */
#hold{top:56%;left:50%;transform:translateX(-50%);width:230px;text-align:center;display:none}
#hold.on{display:block}
#hold .t{font-size:13px;letter-spacing:.28em;color:#37e08b;margin-bottom:7px;text-shadow:0 0 12px rgba(55,224,139,.6)}
#hold .track{height:7px;background:#141922;border:1px solid #2b313c}
#hold .fill{height:100%;width:0%;background:#37e08b;box-shadow:0 0 12px #37e08b}

#hint{bottom:20px;left:50%;transform:translateX(-50%);font-size:12px;color:#5f6878;.........完整代码请登录后点击上方下载按钮下载查看