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="#050810">
<title>星際之門 · STARGATE</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=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --cyan:#5fe0ff; --cyan-dim:rgba(95,224,255,.28); --amber:#ffb454;
  --panel:rgba(6,12,22,.78); --text:#d8ecff; --dim:#7d97b4; --ink:#04070d;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#000;font-family:'Noto Sans SC',sans-serif;color:var(--text);user-select:none;-webkit-user-select:none}
canvas{display:block}
#stage{position:fixed;inset:0}
.en{font-family:'Orbitron','Noto Sans SC',sans-serif}

/* ---------- 面板通用 ---------- */
.panel{position:absolute;background:var(--panel);border:1px solid var(--cyan-dim);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 24px rgba(0,180,255,.06), inset 0 0 30px rgba(20,60,90,.12);
  pointer-events:auto}
.panel::before,.panel::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--cyan);opacity:.85}
.panel::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.panel::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.ptitle{font-family:'Orbitron';font-size:10px;letter-spacing:.32em;color:var(--cyan);
  padding:9px 14px 8px;border-bottom:1px solid rgba(95,224,255,.15);display:flex;justify-content:space-between;align-items:center}
.ptitle small{color:var(--dim);letter-spacing:.18em;font-size:9px}

/* ---------- 顶部标题 ---------- */
#brand{position:absolute;top:22px;left:26px;pointer-events:none;z-index:5}
#brand .eyebrow{font-family:'Orbitron';font-size:9px;letter-spacing:.46em;color:var(--amber);margin-bottom:6px}
#brand h1{font-size:30px;font-weight:900;letter-spacing:.14em;line-height:1;color:#eef8ff;
  text-shadow:0 0 18px rgba(95,224,255,.45)}
#brand .sub{font-family:'Orbitron';font-size:11px;letter-spacing:.52em;color:var(--cyan);margin-top:7px}
#brand .sub i{display:inline-block;width:7px;height:12px;background:var(--cyan);margin-left:8px;vertical-align:-1px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- 状态面板 ---------- */
#status{top:22px;right:26px;width:236px;z-index:5}
#status .rows{padding:11px 14px 13px;font-size:12px}
#status .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
#status .row:last-child{margin-bottom:0}
#status .k{color:var(--dim);font-size:10px;letter-spacing:.2em}
#status .v{font-weight:700;color:#eaf6ff}
#status .v.warn{color:var(--amber)}
#integ{height:5px;background:rgba(95,224,255,.12);margin-top:4px;overflow:hidden}
#integFill{height:100%;width:0%;background:linear-gradient(90deg,#1f7fae,var(--cyan),#d9fbff);
  box-shadow:0 0 10px var(--cyan);transition:width .25s}
#sndBtn{margin-top:10px;width:100%;background:transparent;border:1px solid var(--cyan-dim);color:var(--cyan);
  font-family:'Orbitron';font-size:10px;letter-spacing:.3em;padding:6px 0;cursor:pointer;transition:.2s}
#sndBtn:hover{background:rgba(95,224,255,.12)}

/* ---------- DHD 拨号终端 ---------- */
#dhd{left:26px;bottom:26px;width:330px;z-index:5}
#dhdList{padding:8px}
.dhd-row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;
  padding:9px 10px;margin:4px 0;border:1px solid rgba(95,224,255,.10);border-left:2px solid transparent;
  cursor:pointer;transition:transform .18s,border-color .18s,background .18s;position:relative}
.dhd-row:hover{transform:translateX(5px);border-color:rgba(95,224,255,.4);border-left-color:var(--cyan);background:rgba(95,224,255,.06)}
.dhd-row.locked{opacity:.35;pointer-events:none}
.dhd-row.current{border-left-color:var(--amber);opacity:.85;pointer-events:none}
.dhd-row.targeted{border-left-color:var(--amber);background:rgba(255,180,84,.07)}
.dhd-glyph{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--cyan);border:1px solid var(--cyan-dim);background:rgba(8,20,34,.7);
  text-shadow:0 0 10px var(--cyan)}
.dhd-row.current .dhd-glyph{color:var(--amber);border-color:rgba(255,180,84,.4);text-shadow:0 0 10px var(--amber)}
.dhd-info b{display:block;font-size:14.5px;font-weight:700;color:#eef7ff;letter-spacing:.06em}
.dhd-info span{font-family:'Orbitron';font-size:8.5px;letter-spacing:.22em;color:var(--dim)}
.dhd-meta{text-align:right}
.dhd-meta em{display:block;font-style:normal;font-family:'Orbitron';font-size:9px;color:var(--dim);letter-spacing:.06em}
.dhd-meta i{font-style:normal;font-size:10px;color:var(--amber);letter-spacing:.2em}
#dhd .foot{padding:7px 14px 10px;font-size:10px;color:var(--dim);border-top:1px solid rgba(95,224,255,.12);letter-spacing:.06em}
#dhd .foot b{color:var(--cyan);font-weight:500}

/* ---------- 行动按钮 ---------- */
#actions{position:absolute;right:26px;bottom:26px;display:flex;flex-direction:column;gap:10px;z-index:5;align-items:flex-end}
.btn{pointer-events:auto;border:none;cursor:pointer;font-family:'Orbitron','Noto Sans SC';
  letter-spacing:.3em;font-size:13px;padding:15px 30px 14px;color:#04.........完整代码请登录后点击上方下载按钮下载查看