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, user-scalable=no">
<title>星穹穿越 · STARBOUND VOYAGER</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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{
    --cyan:#4de8ff; --cyan-dim:rgba(77,232,255,.28);
    --amber:#ffb347; --red:#ff4d5e; --ink:#dff4ff;
    --panel:rgba(5,14,26,.62);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:#01030a;touch-action:none}
  body{font-family:'Rajdhani',system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none}
  canvas{position:fixed;inset:0;z-index:0;display:block}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;z-index:5;pointer-events:none}
  .panel{
    position:absolute;background:var(--panel);
    border:1px solid var(--cyan-dim);
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
    padding:12px 16px;
  }
  .panel::before{content:"";position:absolute;left:0;top:0;width:26px;height:2px;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
  .lbl{font-size:10px;font-weight:600;letter-spacing:.22em;color:rgba(150,220,240,.72);text-transform:uppercase}
  .lbl b{color:var(--cyan);font-weight:700;margin-left:6px}
  .lbl.amber{color:rgba(255,190,120,.8)}

  .tl{top:18px;left:18px}
  .tl .title{font-size:22px;font-weight:700;letter-spacing:.14em;text-shadow:0 0 10px rgba(77,232,255,.35)}
  .tl .title span{font-family:'Orbitron';font-size:11px;color:var(--amber);letter-spacing:.4em;display:block;margin-top:2px}
  .tl .sub{margin-top:8px;font-size:12px;letter-spacing:.12em;color:rgba(190,230,245,.85);display:flex;align-items:center;gap:7px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);animation:pulse 1.6s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
  .chips{display:flex;gap:6px;margin-top:9px}
  .chip{font-size:10px;font-weight:600;letter-spacing:.14em;padding:3px 8px;border:1px solid rgba(150,210,235,.25);color:rgba(150,200,220,.45);transition:all .2s}
  .chip b{font-family:'Orbitron';color:inherit}
  .chip.on{color:#062030;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(77,232,255,.45)}
  .chip.tick{animation:chipTick .45s}
  @keyframes chipTick{0%{transform:scale(1.25);filter:brightness(2)}100%{transform:scale(1)}}

  .tr{top:18px;right:18px;text-align:right;min-width:210px}
  .tr .coords{font-family:'Orbitron';font-size:11px;color:rgba(200,240,255,.9);margin:6px 0;letter-spacing:.06em}
  .tr .lbl + .lbl{margin-top:6px}

  .bl{bottom:18px;left:18px;min-width:230px}
  .speed{font-family:'Orbitron';font-weight:900;font-size:clamp(34px,4.6vw,46px);line-height:1;color:#eafcff;text-shadow:0 0 12px rgba(77,232,255,.4);margin:4px 0 2px}
  .speed small{font-size:12px;font-weight:500;color:rgba(150,220,240,.7);letter-spacing:.2em;margin-left:8px}
  .speed .warp{font-size:13px;color:var(--amber);font-weight:700;margin-left:10px;letter-spacing:.1em}
  .bar{height:8px;background:rgba(77,232,255,.1);border:1px solid rgba(77,232,255,.25);margin:5px 0 10px;position:relative;overflow:hidden}
  .bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#1d9fbe,var(--cyan));box-shadow:0 0 8px rgba(77,232,255,.6);transition:width .12s linear}
  .bar.heat i{background:linear-gradient(90deg,#b0641d,var(--amber));box-shadow:0 0 8px rgba(255,179,71,.6)}
  .bar.heat.hot i{background:linear-gradient(90deg,#a1232f,var(--red));box-shadow:0 0 10px rgba(255,77,94,.7)}
  .bar.hull i{background:linear-gradient(90deg,#1fae6d,#5fffa8)}
  .bar.hull.mid i{background:linear-gradient(90deg,#b0641d,var(--amber))}
  .bar.hull.low i{background:linear-gradient(90deg,#a1232f,var(--red))}

  .br{bottom:18px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:230px}
  .br .row{display:flex;align-items:center;gap:14px}
  .att{width:96px;height:96px;border-radius:50%;border:1px solid var(--cyan-dim);position:relative;overflow:hidden;background:#04101e;box-shadow:inset 0 0 22px rgba(0,0,0,.8),0 0 10px rgba(77,232,255,.12)}
  .att-in{position:absolute;left:-52px;top:-52px;width:200px;height:200px;will-change:transform}
  .att-in .sky{position:absolute;left:0;top:0;width:200px;height:100px;background:linear-gradient(180deg,#0d2f52,#155a86)}
  .att-in .ground{position:absolute;left:0;top:100px;width:200px;height:100px;background:linear-gradient(180deg,#8a5a22,#4a2f10)}
  .att-in .........完整代码请登录后点击上方下载按钮下载查看