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>月面漫步 · LUNAR LEAP — 低重力出舱体验</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=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#020409; --ink:#e8eef7; --dim:#8fa3bd; --amber:#ffb454; --cyan:#7fd4ff;
    --line:rgba(150,190,255,.22); --panel:rgba(7,11,19,.58);
    --disp:'Orbitron','Rajdhani',sans-serif;
    --body:'Rajdhani','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
    font-family:var(--body);overscroll-behavior:none;-webkit-user-select:none;user-select:none}
  canvas#scene{position:fixed;inset:0;display:block;touch-action:none}

  /* ---------- 头盔面罩氛围 ---------- */
  #visor{position:fixed;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(ellipse at 50% 48%, transparent 52%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.62) 100%)}
  #scan{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:.35;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px)}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;z-index:10;pointer-events:none}
  #hud[hidden]{display:none}
  .panel{position:absolute;background:var(--panel);border:1px solid var(--line);
    padding:12px 16px;backdrop-filter:blur(4px);
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    animation:panelIn .6s cubic-bezier(.2,.9,.3,1) both}
  @keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .p-label{font-family:var(--disp);font-size:10px;letter-spacing:.28em;color:var(--dim);margin-bottom:6px}
  .p-label b{color:var(--amber);font-weight:700}

  #hudTL{top:22px;left:22px;min-width:172px}
  .metric{display:flex;align-items:baseline;gap:8px;line-height:1}
  .metric .num{font-family:var(--disp);font-weight:900;font-size:34px;color:var(--amber);
    text-shadow:0 0 18px rgba(255,180,84,.35);font-variant-numeric:tabular-nums}
  .metric .unit{font-size:12px;color:var(--dim);letter-spacing:.1em}
  .metric.small .num{font-size:20px;color:var(--cyan);text-shadow:0 0 14px rgba(127,212,255,.3)}
  .metric .tag{font-size:11px;color:var(--dim);margin-left:auto;letter-spacing:.18em}
  #stateChip{display:inline-block;margin-top:8px;padding:2px 10px;font-family:var(--disp);
    font-size:10px;letter-spacing:.24em;border:1px solid var(--line);color:var(--dim);transition:.25s}
  #stateChip.air{color:var(--amber);border-color:rgba(255,180,84,.5);animation:blink 1s steps(2) infinite}
  #stateChip.run{color:var(--cyan);border-color:rgba(127,212,255,.5)}
  @keyframes blink{50%{opacity:.35}}

  #tapeWrap{position:absolute;top:20px;left:50%;transform:translateX(-50%);text-align:center}
  #tape{width:280px;height:34px;overflow:hidden;position:relative;
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    background:linear-gradient(180deg,rgba(7,11,19,.5),rgba(7,11,19,.2));
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
  #tape::after{content:'';position:absolute;left:50%;top:0;width:1px;height:100%;background:var(--amber)}
  #tapeInner{position:absolute;top:0;height:100%;will-change:transform}
  #tapeInner i{position:absolute;bottom:6px;width:1px;background:var(--dim)}
  #tapeInner i.ts{height:5px;opacity:.5}
  #tapeInner i.tm{height:9px;opacity:.8}
  #tapeInner i.tM{height:13px;background:var(--amber)}
  #tapeInner b{position:absolute;top:2px;transform:translateX(-50%);font-family:var(--disp);
    font-size:10px;font-weight:700;color:var(--ink)}
  #hdg{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--cyan);margin-top:4px}

  #hudTR{top:22px;right:22px;min-width:180px;text-align:right;animation-delay:.08s}
  .stat{display:flex;justify-content:space-between;gap:18px;font-size:13px;color:var(--dim);
    padding:2px 0;letter-spacing:.08em}
  .stat b{font-family:var(--disp);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .stat b.hot{color:var(--amber)}
  #rec{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:8px;
    font-family:var(--disp);font-size:10px;letter-spacing:.22em;color:var(--dim)}
  #rec i{width:7px;height:7px;border-radius:50%;background:#ff5d5d;animation:blink 1.4s steps(2) infinite}

  #hudBL{bottom:22px;left:22px;font-size:12px;color:var(--dim);letter-spacing:.1em;animation-delay:.16s}
  #hudBL kbd{font-family:var(--disp);font-size:10px;border:1px solid var(--line);padding:1px 6px;
    margin-right:2px;color:var(--ink);background:rgba(255,255,255,.04)}
  #hudBL .row{margin-top:5px}

  #hudBR{bottom:22px;right:22px;min-width:196px;animation-delay:.24s}
  .nav{display:flex;align-items:center;gap:10px;padding:4px 0}
  .nav .arrow{width:14px;height:14px;flex:none;transition:transform .15s linear;
    clip-path:polygon(50% 0,100% 100%,50% 74%,0 100%);background:var(--cyan)}
  .nav.beacon .arrow{background:var(--amber)}
  .nav .name{font-size:12px;letter-spacing:.18em;color:var(--dim);width:52px}
  .nav .dist{font-family:var(--disp);font-weight:700;font-size:14px;margin-left:auto;font-variant-numeric:tabular-nums}
  .nav.flash .dist{animation:flashGold .8s ease 3}
  @keyframes flashGold{50%{color:var(--amber);text-shadow:0 0 16px rgba(255,180,84,.8)}}

  #crosshair{position:absolute;left:50%;top:50%;transform:transl.........完整代码请登录后点击上方下载按钮下载查看