three模拟三维飞弹袭击等离子护盾防护罩动画效果代码-html代码-BFW代码库

three模拟三维飞弹袭击等离子护盾防护罩动画效果代码

代码语言：html

所属分类：三维

代码描述：three模拟三维飞弹袭击等离子护盾防护罩动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Three.js 等离子球形护盾 · 飞弹袭击演示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root{
      --bg:#050814;--panel:#0b1224cc;--text:#e5e7eb;--muted:#94a3b8;--accent:#22d3ee;
    }
    html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;overflow:hidden}
    #ui{
      position:fixed;left:12px;top:12px;z-index:10;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
      background:linear-gradient(180deg,#0b1226,#0a1120);border:1px solid #1d2a46;border-radius:12px;
      padding:10px 12px;box-shadow:0 10px 30px #0009, inset 0 1px 0 #ffffff0a
    }
    #ui .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    label{font-size:13px;color:#cbd5e1}
    input[type=range],input[type=number],select,button{
      background:#0b152a;border:1px solid #223053;color:#e5e7eb;border-radius:8px;padding:6px 10px;outline:none;transition:.2s
    }
    button:hover,input:hover,select:hover{border-color:#34508c}
    button.primary{background:linear-gradient(180deg,#1f3b74,#1b3364);border-color:#2b478a}
    button.warn{background:linear-gradient(180deg,#8a2d2d,#6d2323);border-color:#7b2727}
    .kbd{display:inline-block;border:1px solid #223053;background:#0b152a;border-radius:6px;padding:2px 6px;font-size:12px;color:#a5b4fc}
    #hint{position:fixed;right:12px;top:12px;background:#0b152a;border:1px solid #223053;border-radius:12px;padding:10px 12px;max-width:360px;color:#cbd5e1;font-size:13px;box-shadow:0 10px 30px #0009}
    .sep{width:1px;height:24px;background:#223053;margin:0 6px}
  </style>
</head>
<body>
  <div id="ui">
    <div class="row">
      <label>发射频率</label>
      <input id="rate" type="range" min="2" max="80" value="28" />
      <span class="kbd" id="rateVal">28/s</span>
      <span class="sep"></span>
      <label>护盾半径</label>
      <input id="radius" type="range" min="18" max="45" value="30" />
      <span class="kbd" id="radVal">30</span>
      <span class="sep"></span>
      <label>模式</label>
      <select id="mode">
        <option value="normal" selected>正常</option>
        <option value="storm">暴风</option>
        <option value="calm">稀疏</option>
      </select>
      <button id="btnPause" class="primary">暂停</button>
      <button id="btnClear" class="warn">清空飞弹</button>
    </div>
  </div>
  <div id="hint">
    操作：拖拽旋转，滚轮缩放；调节“发射频率/护盾半径”。<br>
    说明：飞弹沿贝塞尔曲线飞行，命中护盾触发等离子涟漪与冲击光环（GPU Shader）。
  </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrep.........完整代码请登录后点击上方下载按钮下载查看