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">
<title>山脊电骑 · Ridge Rider — 盘山公路骑行体验</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Rajdhani:wght@500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#e8f2f4; --dim:#93aab3; --panel:rgba(10,22,28,.84); --line:rgba(122,180,192,.24);
  --amber:#ffb84d; --green:#5fe3a1; --cyan:#5fd0e0; --red:#ff6b5e;
  --ch:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  --chs:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0a1418;color:var(--ink);
  font-family:'Noto Sans SC',sans-serif;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
#app canvas{display:block;touch-action:none}
.num{font-family:'Orbitron',monospace}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.panel{background:linear-gradient(160deg,rgba(14,27,33,.9),rgba(8,17,22,.84));
  border:1px solid var(--line);clip-path:var(--ch);
  box-shadow:0 8px 28px rgba(0,0,0,.38);backdrop-filter:blur(5px)}
#hud .panel{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
#hud.on .panel{opacity:1;transform:none}
#hud.on #weatherPanel{transition-delay:.05s}#hud.on #statsPanel{transition-delay:.15s}
#hud.on #dash{transition-delay:.25s}#hud.on #hints{transition-delay:.35s}

#weatherPanel{position:absolute;top:18px;left:18px;width:246px;padding:14px 16px 12px;pointer-events:auto}
.wp-main{display:flex;align-items:center;gap:12px}
#wIcon{font-size:34px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
#wName{font-size:20px;font-weight:700;letter-spacing:2px}
#wTemp{font-size:12px;color:var(--dim);margin-top:2px}
#wNext{margin-left:auto;font-size:15px;color:var(--cyan)}
.wp-bar{height:3px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
#wBar{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--cyan),#9be8f2)}
#wBtns{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.wbtn{pointer-events:auto;height:34px;font-size:16px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);clip-path:var(--chs);cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s}
.wbtn:hover{transform:translateY(-2px);border-color:var(--cyan);background:rgba(95,208,224,.1)}
.wbtn.active{border-color:var(--amber);background:rgba(255,184,77,.14)}

#statsPanel{position:absolute;top:18px;right:18px;padding:12px 16px;font-size:13px;color:var(--dim);min-width:158px}
#statsPanel div{display:flex;justify-content:space-between;gap:18px;padding:2px 0}
#statsPanel b{font-family:'Orbitron';font-size:14px;color:var(--ink);font-weight:600}

#dash{position:absolute;right:18px;bottom:18px;width:252px;padding:12px 16px 14px;position:absolute}
#gauge{display:block;width:100%}
#speedBox{position:absolute;top:58px;left:0;right:0;text-align:center;pointer-events:none}
#speedNum{font-family:'Orbitron';font-size:36px;font-weight:800;color:var(--amber);
  text-shadow:0 0 18px rgba(255,184,77,.35);transition:color .3s}
#speedNum.hot{color:var(--red);text-shadow:0 0 18px rgba(255,107,94,.5)}
#speedBox .unit{display:block;font-size:10px;letter-spacing:3px;color:var(--dim);margin-top:-2px}
.dash-row{display:flex;align-items:center;gap:10px;margin-top:6px}
#gear{font-family:'Orbitron';font-size:15px;font-weight:800;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);clip-path:var(--chs)}
#gear.d{color:var(--green);border-color:rgba(95,227,161,.5)}
#gear.r{color:var(--red);border-color:rgba(255,107,94,.5)}
#gear.n{color:var(--dim)}
#battWrap{flex:1;display:flex;align-items:center;gap:8px}
#battBar{flex:1;height:10px;border:1px solid var(--line);padding:1.5px;background:rgba(0,0,0,.3)}
#battFill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2fbf71,#8be06a);transition:width .25s}
#battFill.mid{background:linear-gradient(90deg,#d9a03a,#ffd36b)}
#battFill.low{background:linear-gradient(90deg,#c9463c,#ff7a5e);animation:lowPulse 1s infinite}
@keyframes lowPulse{50%{filter:brightness(1.6)}}
#battTxt{font-family:'Orbitron';font-size:12px;color:var(--dim);width:38px;text-align:right}
#regen{font-size:11px;color:var(--green);opacity:0;transition:opacity .2s}
#regen.on{opacity:1;animation:regenBlink .5s infinite}
@keyframes regenBlink{50%{opacity:.35}}

#hints{position:absolute;left:18px;bottom:18px;padding:10px 14px;font-size:12px;color:var(--dim);line-height:2}
kbd{font-family:'Rajdhani';font-size:12px;font-weight:700;color:var(--ink);
  border:1px solid rgba(160,200,210,.35);border-bottom-width:2px;border-radius:4px;
  padding:1px 7px;margin:0 2px;background:rgba(255,255,255,.06)}

#toast{position:fixed;top:88px;left:50%;transform:translate(-50%,-18px);z-index:40;
  background:linear-gradient(160deg,rgba(16,30,37,.95),rgba(9,18,23,.95));
  border:1px solid var(--line);border-left:3px solid var(--amber);clip-path:var(--chs);
  padding:10px 22px;font-size:14px;font-weight:500;letter-spacing:1px;opacity:0;
  transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#toast.show{opacity:1;transform:translate(-50%,0)}

#flash{position:fixed;inset:0;z-index:14;background:#dfe8ff;opacity:0;pointer-events:none}
#vignette{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.35;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(3,9,13,.62) 100%)}
#rainFx{position:fixed;inset:-22%;z-index:12;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(72deg,transparent 0 11p.........完整代码请登录后点击上方下载按钮下载查看