three实现炫酷三维线框音乐多场景梦幻赛车游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现炫酷三维线框音乐多场景梦幻赛车游戏代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<style>
  :root{
    --ink:#26241f;
    --paper:#fbfbf8;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;}
  body{
    background:linear-gradient(#fbfbf8,#e9e7e0);
    font-family:"Didot","Bodoni MT","Playfair Display","Songti SC","Noto Serif SC",Georgia,serif;
    color:var(--ink);
    transition:color 1.2s ease;
    user-select:none;-webkit-user-select:none;
  }
  canvas#gl{position:fixed;inset:0;display:block;}

  /* ---------- atmosphere layers ---------- */
  #vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
    background:radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(0,0,0,.14) 100%);}
  #grain{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.045;mix-blend-mode:overlay;}
  #flash{position:fixed;inset:0;pointer-events:none;z-index:5;background:#fff;opacity:0;}
  #flash.zap{animation:zap .55s ease-out;}
  @keyframes zap{0%{opacity:.9}100%{opacity:0}}

  /* ---------- HUD ---------- */
  .hud{position:fixed;z-index:10;letter-spacing:.22em;font-size:11px;text-transform:uppercase;
    transition:opacity 1s ease;color:var(--ink);}
  #sceneTag{top:26px;left:30px;display:flex;align-items:baseline;gap:14px;}
  #sceneTag .num{font-size:20px;letter-spacing:.1em;}
  #sceneTag .zh{font-size:10px;opacity:.55;letter-spacing:.4em;}
  #fragTag{top:28px;right:30px;font-family:"SF Mono",ui-monospace,Menlo,monospace;
    font-size:11px;letter-spacing:.3em;opacity:.8;}
  #mute{top:54px;right:30px;cursor:pointer;opacity:.5;font-size:10px;letter-spacing:.3em;}
  #mute:hover{opacity:.9;}

  #meterWrap{bottom:34px;left:50%;transform:translateX(-50%);width:200px;text-align:center;}
  #meter{height:2px;background:currentColor;opacity:.14;border-radius:2px;}
  #meterFill{position:absolute;left:0;top:0;height:2px;width:0%;border-radius:2px;
    background:linear-gradient(90deg,#c95d3f,#d9a441,#3e6fae);
    box-shadow:0 0 8px rgba(255,255,255,.35);transition:width .5s ease;}
  #meterBar{position:relative;}
  #meterLabel{margin-top:10px;font-size:9px;letter-spacing:.45em;opacity:.55;}

  /* ---------- poetry ---------- */
  #poem{position:fixed;left:50%;top:62%;transform:translateX(-50%);z-index:9;text-align:center;
    pointer-events:none;opacity:0;transition:opacity 2.2s ease;max-width:84vw;}
  #poem.show{opacity:1;}
  #poem .en{font-size:clamp(17px,2.6vw,26px);font-style:italic;letter-spacing:.06em;}
  #poem .zh{margin-top:10px;font-size:12px;letter-spacing:.55em;opacity:.6;}

  #word{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:9;
    font-style:italic;font-size:13px;letter-spacing:.18em;opacity:0;transition:opacity .9s ease;
    pointer-events:none;}
  #word.show{opacity:.7;}

  /* ---------- start screen ---------- */
  #start{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;
    justify-content:center;cursor:pointer;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.25),transparent 70%);
    transition:opacity 1.6s ease;}
  #start.gone{opacity:0;pointer-events:none;}
  #start .kicker{font-size:10px;letter-spacing:.6em;opacity:.55;text-transform:uppercase;}
  #start h1{font-size:clamp(34px,7vw,74px);font-weight:400;letter-spacing:.18em;margin:22px 0 6px;
    text-transform:uppercase;}
  #start .zhTitle{font-size:13px;letter-spacing:.9em;opacity:.6;margin-bottom:34px;text-indent:.9em;}
  #start .rule{width:54px;height:1px;background:currentColor;opacity:.4;margin-bottom:34px;}
  #start .hint{font-size:11px;letter-spacing:.3em;opacity:.55;line-height:2.2;text-align:center;
    text-transform:uppercase;}
  #start .begin{margin-top:42px;font-size:12px;letter-spacing:.5em;text-transform:uppercase;
    animation:breathe 3.2s ease-in-out infinite;}
  @keyframes breathe{0%,100%{opacity:.35}50%{opacity:.9}}

  /* ---------- interstitial (scene transition card) ---------- */
  #card{position:fixed;inset:0;z-index:25;background:#fff;display:flex;flex-direction:column;
    align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 1.4s ease;
    color:#1c1b18;}
  #card.show{opacity:1;}
  #card .num{font-size:clamp(60px,12vw,120px);letter-spacing:.1em;line-height:1;}
  #card .name{margin-top:18px;font-size:clamp(14px,2.4vw,22px);letter-spacing:.5em;text-transform:uppercase;text-indent:.5em;}
  #card .zh{margin-top:14px;font-size:12px;letter-spacing:.7em;opacity:.55;text-indent:.7em;}
  #card .rule{width:42px;height:1px;background:#1c1b18;opacity:.35;margin-top:30px;}

  /* ---------- ending ---------- */
  #end{position:fixed;inset:0;z-index:28;background:.........完整代码请登录后点击上方下载按钮下载查看