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">
<title>地心拆解 · 地球内部结构三维科普</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@300;400;500;700&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg0:#04070d; --ink:#f2ece1; --mut:#8ea3b8; --dim:#5c7186;
  --magma1:#ffd166; --magma2:#ff7a3d; --magma3:#d92f1f; --teal:#3fa9c9;
  --line2:rgba(120,170,220,.14);
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC',sans-serif;
  --num:'Rajdhani',var(--body);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--body);color:var(--ink);
  background:
    radial-gradient(1100px 700px at 78% 10%, #132540 0%, transparent 55%),
    radial-gradient(900px 620px at 10% 92%, #0d2833 0%, transparent 55%),
    radial-gradient(closest-side at 50% 48%, #0a1424 0%, #05080f 100%);
}
#c{position:fixed;inset:0;z-index:1;touch-action:none;cursor:grab}
#c:active{cursor:grabbing}
#veil{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 42%, transparent 55%, rgba(3,6,12,.55) 100%)}
#leaders{position:fixed;inset:0;z-index:3;pointer-events:none}
#labels{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}

/* ---------- 3D 标注 ---------- */
.llabel{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;
  display:flex;align-items:baseline;gap:8px;padding:5px 10px 5px 9px;white-space:nowrap;
  background:rgba(6,11,20,.88);border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--c);
  opacity:0;transition:opacity .35s,box-shadow .25s,border-color .25s;will-change:transform}
.llabel b{font-family:var(--disp);font-size:14px;letter-spacing:2px;font-weight:400}
.llabel span{font-family:var(--num);font-size:11px;color:var(--mut);letter-spacing:.5px}
.llabel:hover,.llabel.active{border-color:var(--c);box-shadow:0 0 16px -3px var(--c)}
.llabel.active b{color:var(--c)}

/* ---------- HUD 面板 ---------- */
.hud{position:fixed;z-index:6;
  background:linear-gradient(160deg, rgba(13,22,38,.93), rgba(7,12,22,.9));
  border:1px solid var(--line2);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 20px 50px -22px rgba(0,0,0,.85)}
.hud::before{content:'';position:absolute;top:0;left:14px;right:0;height:2px;
  background:linear-gradient(90deg,var(--magma1),var(--magma2) 45%,transparent 92%)}
.panel-title{font-family:var(--num);font-size:10px;letter-spacing:3px;color:var(--dim);
  margin:0 0 10px;display:flex;align-items:center;gap:8px}
.panel-title::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07)}

/* 标题区 */
#titleBlock{position:fixed;top:28px;left:30px;z-index:6;max-width:400px}
#titleBlock h1{font-family:var(--disp);font-weight:400;font-size:48px;line-height:1;
  letter-spacing:8px;text-shadow:0 2px 26px rgba(255,122,61,.28)}
#titleBlock h1 span{color:var(--magma2)}
#titleBlock .sub{margin-top:9px;font-family:var(--num);font-size:11px;letter-spacing:3.5px;color:var(--mut)}
#titleBlock .sub em{font-style:normal;color:var(--magma1)}
#titleBlock .tag{margin-top:11px;font-size:12.5px;line-height:1.8;color:var(--dim);font-weight:300}
.live{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:9px;letter-spacing:2px;color:var(--teal)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 8px var(--teal)}50%{opacity:.25;box-shadow:none}}

/* 控制台 */
#controlPanel{left:24px;top:50%;transform:translateY(-50%);width:236px;padding:18px 18px 16px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px}
.mode{padding:9px 2px 7px;text-align:center;cursor:pointer;user-select:none;
  font-family:var(--disp);font-size:16px;letter-spacing:3px;color:var(--mut);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:.25s}
.mode small{display:block;font-family:var(--num);font-size:8.5px;letter-spacing:1.5px;color:var(--dim);margin-top:2px}
.mode:hover{color:var(--ink);border-color:rgba(255,158,94,.45);transform:translateY(-1px)}
.mode.active{color:var(--magma1);border-color:var(--magma2);
  background:linear-gradient(180deg,rgba(255,122.........完整代码请登录后点击上方下载按钮下载查看