three实现三维4d过山车第一视角场景体验代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维4d过山车第一视角场景体验代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>极速风暴 · 4D过山车体验</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0c111d; --panel:#161d2a; --panel2:#1c2536; --line:#2c3a58;
  --amber:#ffb400; --red:#ff4b2e; --cyan:#39d7ff; --paper:#eef3ff; --dim:#93a3c0;
  --shadow:0 6px 0 #070b13;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;color:var(--paper);
  -webkit-user-select:none;user-select:none}
canvas{display:block}
.disp{font-family:"Bungee","Noto Sans SC",sans-serif}

/* ---------- 全屏特效层 ---------- */
#vig,#invfx{position:fixed;inset:0;pointer-events:none;z-index:5}
#vig{background:radial-gradient(ellipse at center,transparent 52%,rgba(4,7,14,.62) 100%);opacity:.35}
#invfx{background:radial-gradient(ellipse at center,transparent 40%,rgba(255,42,26,.42) 100%);opacity:0;transition:opacity .25s}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.panel{background:var(--panel);border:2px solid var(--line);box-shadow:var(--shadow);border-radius:10px}

#brand{position:absolute;top:18px;left:18px;display:flex;gap:12px;align-items:flex-start;pointer-events:none}
#logo{width:52px;height:52px;background:var(--red);border:2px solid #070b13;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 4px 0 #070b13;transform:rotate(-4deg)}
#brand h1{font-size:24px;font-weight:900;letter-spacing:5px;background:var(--red);color:#fff;
  padding:3px 12px 4px 8px;display:inline-block;transform:skewX(-6deg);box-shadow:0 3px 0 #070b13}
#brand .sub{font-size:10px;letter-spacing:3px;color:var(--amber);margin-top:6px}
#status{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12px;color:var(--dim);font-weight:500}
#dot{width:9px;height:9px;border-radius:50%;background:var(--amber);animation:pulse 1.4s infinite}
#dot.run{background:#3ddc6f}#dot.stop{background:var(--red);animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,180,0,.5)}50%{box-shadow:0 0 0 6px rgba(255,180,0,0)}}

#seg{position:absolute;top:18px;right:18px;width:288px;padding:14px 16px 12px;overflow:hidden}
#seg::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 10px,#20283a 10px 20px)}
#seg .tag{font-size:10px;letter-spacing:3px;color:var(--amber);margin-top:4px}
#segName{font-size:26px;font-weight:900;letter-spacing:2px;margin:4px 0 2px}
#segCopy{font-size:12px;color:var(--dim)}
#seg.flash #segName{animation:slideIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
#seg .mini{display:flex;gap:14px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:11px;color:var(--dim)}
#seg .mini b{color:var(--paper);font-size:14px;margin-left:4px}

#dash{position:absolute;left:18px;bottom:18px;padding:14px 20px 16px;min-width:290px}
#speedRow{display:flex;align-items:baseline;gap:10px}
#speed{font-size:86px;line-height:.9;color:var(--amber);text-shadow:4px 4px 0 #6b3c00;letter-spacing:2px}
#speedRow .unit{font-size:14px;color:#fff;letter-spacing:2px}
#speedBar{height:12px;background:#0b101c;border:1px solid var(--line);margin:10px 0 12px;transform:skewX(-14deg);overflow:hidden}
#speedFill{height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--amber),#ff7a2e 70%,var(--red));transition:transform .08s linear}
#chips{display:flex;gap:8px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 12px;min-width:82px}
.chip i{display:block;font-style:normal;font-size:9px;letter-spacing:2px;color:var(--dim)}
.chip b{font-size:19px;letter-spacing:1px}
#gVal.hot{color:var(--red)}#gVal.warm{color:var(--amber)}#gVal.cool{color:#3ddc6f}

#ctrls{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:auto}
button{font-family:inherit;cursor:pointer;border:2px solid #070b13;border-radius:9px;
  background:var(--panel2);color:var(--paper);box-shadow:0 5px 0 #070b13;
  transition:transform .12s,box-shadow .12s;font-weight:700}
button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #070b13}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #070b13}
#btnGo{background:var(--amber);color:#141414;font-size:19px;padding:13px 30px;letter-spacing:3px;font-weight:900}
#btnGo.pulse{animation:btnPulse 1.6s infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 5px 0 #070b13,0 0 0 0 rgba(255,180,0,.45)}50%{box-shadow:0 5px 0 #070b13,0 0 0 12px rgba(255,180,0,0)}}
.btnrow{display:flex;gap:8px}
.btnrow button{padding:9px 13px;font-size:13px;letter-spacing:1px}
.btnrow button small{display:block;font-size:9px;color:var(--dim);font-weight:400;letter-spacing:2px;margin-top:2px}
button.on{background:var(--cyan);color:#08222b}

#badges{position:absolute;top:96px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
.badge{padding:7px 20px;border-radius:999px;font-weight:900;letter-spacing:3px;font-size:15px;
  border:2px solid #070b13;bo.........完整代码请登录后点击上方下载按钮下载查看