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.0">
<meta name="theme-color" content="#05080d">
<title>极光竞技场 AURORA ARENA · Three.js 三维足球场</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
  :root{
    --green:#35e07a; --amber:#ffc247; --red:#ff5257; --blue:#5b8cff;
    --ink:#eef3f8; --dim:#8fa2b6;
    --panel:rgba(9,13,19,.82); --line:rgba(255,255,255,.14);
    --f-disp:'Oswald','Noto Sans SC',sans-serif;
    --f-ui:'Rajdhani','Noto Sans SC',sans-serif;
    --f-cn:'Noto Sans SC',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden;background:#05080d;font-family:var(--f-ui);color:var(--ink)}
  #app{position:fixed;inset:0}
  #app canvas{display:block;cursor:crosshair}
  ::selection{background:var(--green);color:#04120a}

  /* ---------- 暗角氛围层 ---------- */
  #veil{position:fixed;inset:0;z-index:5;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(4,7,11,.55),transparent 13%),
      linear-gradient(0deg,rgba(4,7,11,.45),transparent 11%),
      radial-gradient(120% 92% at 50% 44%,transparent 55%,rgba(3,6,10,.52) 100%);
  }

  /* ---------- 顶栏 ---------- */
  #topbar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 22px;pointer-events:none}
  #topbar>*{pointer-events:auto}
  .brand{display:flex;gap:12px;align-items:center;animation:hudIn .7s .1s cubic-bezier(.2,.9,.3,1) both}
  .brand svg{width:42px;height:42px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
  .brand h1{font:900 17px/1.2 var(--f-cn);letter-spacing:4px;color:#f2f6fa}
  .brand span{display:block;font:600 9.5px var(--f-ui);letter-spacing:4px;color:var(--dim);margin-top:3px}

  #scoreboard{display:flex;align-items:stretch;background:linear-gradient(180deg,rgba(16,23,34,.96),rgba(9,14,21,.96));
    border:1px solid var(--line);clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
    box-shadow:0 10px 34px rgba(0,0,0,.5);position:relative;animation:hudIn .7s .25s cubic-bezier(.2,.9,.3,1) both}
  #scoreboard::before{content:"";position:absolute;top:0;left:16px;right:16px;height:2px;background:linear-gradient(90deg,var(--amber),transparent 70%)}
  .team{display:flex;align-items:center;gap:9px;padding:11px 18px;font:600 12px var(--f-ui);letter-spacing:2px}
  .team.home{background:rgba(224,57,63,.15);color:#ff9296}
  .team.away{background:rgba(63,123,255,.13);color:#a3bdff}
  .team i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg)}
  .team.home i{background:var(--red);box-shadow:0 0 8px var(--red)}
  .team.away i{background:var(--blue);box-shadow:0 0 8px var(--blue)}
  .score{display:flex;align-items:center;gap:10px;padding:6px 18px}
  .score b{font:700 30px/1 var(--f-disp);color:#fff;min-width:22px;text-align:center;display:inline-block}
  .score em{font:700 20px var(--f-disp);font-style:normal;color:var(--amber)}
  .score b.bump{animation:bump .7s cubic-bezier(.2,1.6,.4,1)}
  .matchmeta{display:flex;align-items:center;gap:9px;padding:6px 18px 6px 12px;border-left:1px solid rgba(255,255,255,.09)}
  .livedot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);animation:pulse 1.4s infinite}
  #clock{font:700 17px var(--f-disp);color:var(--amber);letter-spacing:1px}

  #modeToggle{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);
    padding:9px 15px;cursor:pointer;color:var(--ink);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
    transition:border-color .2s;animation:hudIn .7s .35s cubic-bezier(.2,.9,.3,1) both}
  #modeToggle:hover{border-color:rgba(255,255,255,.32)}
  #modeToggle .track{width:40px;height:18px;border-radius:9px;background:#1c2634;position:relative;transition:background .3s;border:1px solid rgba(255,255,255,.12)}
  #modeToggle .thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--amber);transition:transform .3s cubic-bezier(.4,1.6,.5,1);box-shadow:0 0 8px rgba(255,194,71,.7)}
  body.night #modeToggle .thumb{transform:translateX(22px);background:#9db9e8;box-shadow:0 0 8px rgba(157,185,232,.7)}
  #modeLabel{font:700 11px var(--f-ui);letter-spacing:3px}

  /* ---------- 右侧控制台 ---------- */
  #dock{position:fixed;right:20px;top:calc(50% - 195px);z-index:10;width:140px;display:flex;flex-direction:column;gap:4px;
    padding:13px 10px 15px;background:var(--panel);border:1px solid var(--line);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
    box-shadow:0 12px 40px rgba(0,0,0,.45);animation:hudIn .7s .45s cubic-bezier(.2,.9,.3,1) both}
  .dock-title{font:700 9.5px var(--f-ui);letter-spacing:3px;color:var(--dim);margin:7px 2px 3px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.09)}
  .dock-title:first-child{margin-top:0}
  #dock button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;background:transparent;border:none;
    border-left:2px solid transparent;color:#c7d3e0;font:600 13px var(--f-ui);letter-spacing:1.5px;cursor:pointer;
    transition:all .18s;text-align:left}
  #dock button svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-l.........完整代码请登录后点击上方下载按钮下载查看