不用 Unity，Three.js 也能做出这种质量的能量护盾特效

float hexPattern(vec2 p) {
  p *= uHexScale;
  const vec2 s = vec2(1.0, 1.7320508); // sqrt(3)，六边形的几何比例
  vec4 hC = floor(vec4(p, p - vec2(0.5, 1.0)) / s.xyxy) + 0.5;
  vec4 h  = vec4(p - hC.xy * s, p - (hC.zw + 0.5) * s);
  vec2 cell = (dot(h.xy, h.xy) < dot(h.zw, h.zw)) ? h.xy : h.zw;
  cell = abs(cell);
  float d = max(dot(cell, s * 0.5), cell.x);
  return smoothstep(0.5 - uEdgeWidth, 0.5, d);
}
 
// 接缝处让六边形消隐，避免投影切换时出现硬边
vec3 absN = abs(normalize(vObjPos));
float dominance = max(absN.x, max(absN.y, absN.z));
float hexFade = smoothstep(0.65, 0.85, dominance);

// Fresnel：边缘比中心亮
float fresnel = pow(1.0 - dot(vNormal, vViewDir), uFresnelPower) * uFresnelStrength;
 
// 双层流动噪声，方向不同避免周期感
float t   = uTime * uFlowSpeed;
float fn1 = snoise(vObjPos * uFlowScale + vec3(t, t * 0.6, t * 0.4));
float fn2 = snoise(vObjPos * uFlowScale * 2.1 + vec3(-t * 0.5, t * 0.9, t * 0.3));
float flowNoise = (fn1 * 0.6 + fn2 * 0.4) * 0.5 + 0.5;

for (int i = 0; i < MAX_HITS; i++) {
  float elapsed  = uTime - uHitTime[i];
  float isActive = step(0.0, elapsed) * step(elapsed, uHitDuration);
 
  // 球面大圆距离（比欧氏距离更准确）
  float dist = acos(clamp(dot(normPos, normalize(uHitPos[i])), -1.0, 1.0));
 
  // 波纹半径随时间膨胀，加噪声扰动让边缘不规则
  float ringR    = min(elapsed * uHitRingSpeed, uHitMaxRadius);
  float noiseD   = snoise(normPos * 5.0 + vec3(elapsed * 2.0)) * 0.05;
  float ring     = smoothstep(uHitRingWidth, 0.0, abs(dist + noiseD - ringR));
 
  // 时间衰减 × 半径衰减，波纹扩散到边缘后自然消失
  float fade       = 1.0 - smoothstep(uHitDuration * 0.5, uHitDuration, elapsed);
  float radialFade = 1.0 - smoothstep(uHitMaxRadius * 0.75, uHitMaxRadius, ringR);
  ringContrib += ring * fade * radialFade * isActive;
}

const handleClick = (e: ThreeEvent<MouseEvent>) => {
  const localPoint = e.object.worldToLocal(e.point.clone()); // 转到对象空间
  const idx = hitIdxRef.current % MAX_HITS;                  // 环形覆盖
  hitIdxRef.current++;
  u.uHitPos.value[idx].copy(localPoint);
  u.uHitTime.value[idx] = timeRef.current;
  lifeRef.current = Math.max(0, lifeRef.current - hitDamage / 100);
};

float noise      = snoise(vObjPos * uNoiseScale) * 0.5 + 0.5;
float revealMask = smoothstep(uReveal - uNoiseEdgeWidth, uReveal, noise);
if (revealMask < 0.001) discard; // 丢弃低于阈值的片元
 
// 用两段 smoothstep 卡出边缘发光窄带
float innerFade  = mix(0.98, 0.15, uNoiseEdgeSmoothness);
float edgeLow    = smoothstep(uReveal - uNoiseEdgeWidth,
                              uReveal - uNoiseEdgeWidth * innerFade, noise);
float edgeHigh   = smoothstep(uReveal - uNoiseEdgeWidth * 0.15, uReveal, noise);
float revealEdge = edgeLow * (1.0 - edgeHigh); // 相减得到发光环

git clone https://github.com/cortiz2894/flow-shield-effect.git
cd flow-shield-effect
pnpm install
pnpm dev