DragonParticles.astro

<div id="particle-canvas-container"></div>

<script>
  import * as THREE from "three";

  let scene, camera, renderer, particleSystem;
  let mouse = new THREE.Vector2(-10, -10);
  let targetMouse = new THREE.Vector2(-10, -10);
  let coords = [];
  let isReady = false;

  const container = document.getElementById("particle-canvas-container");
  const IMAGE_SRC = "/dragon-logo.png";

  // --- 视觉参数调节面板 (通过 uniforms 传递，避免编译错误) ---
  const CONFIG = {
    particleCount: 8000, // 粒子数量
    uBaseSize: 20.0, // 基准尺寸
    uCoreRadius: 0.46, // 核心硬度 (0.4-0.49)
    uGlowIntensity: 0.4, // 光晕强度
    uGlowFalloff: 3.5, // 光晕衰减速度
  };

  const vertexShader = `
    varying vec3 vColor;
    uniform float uPixelRatio;
    uniform float uTime;
    uniform float uBaseSize;
    void main() {
      vColor = mix(vec3(0.44, 0.37, 0.76), vec3(0.92, 0.71, 0.65), position.y * 0.5 + 0.5);
      vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
      
      float blink = 1.0 + sin(uTime * 2.5 + position.x * 8.0) * 0.2;
      gl_PointSize = uBaseSize * blink * uPixelRatio * (1.0 / -mvPosition.z); 
      
      gl_Position = projectionMatrix * mvPosition;
    }
  `;

  const fragmentShader = `
    varying vec3 vColor;
    uniform float uCoreRadius;
    uniform float uGlowIntensity;
    uniform float uGlowFalloff;
    void main() {
      float r = distance(gl_PointCoord, vec2(0.5));
      if (r > 0.5) discard;

      // 刚体核心：产生实心圆感
      float core = smoothstep(0.5, uCoreRadius, r);
      
      // 微弱泛光：使用指数函数模拟物理衰减
      float glow = pow(max(0.0, 1.0 - r * 2.0), uGlowFalloff);
      
      // 颜色混合：core 部分为 1.0 亮度，glow 提供微弱溢出
      vec3 finalColor = vColor * (1.0 + glow * uGlowIntensity);
      
      // 透明度：core 保证中心不透，glow 负责边缘极微弱的羽化
      float alpha = core + (glow * 0.2);
      
      gl_FragColor = vec4(finalColor, alpha); 
    }
  `;

  function handleResize() {
    if (!container || !renderer) return;
    const width = container.clientWidth;
    const height = container.clientHeight;
    renderer.setSize(width, height);
    const aspect = width / height;
    camera.left = -2.8 * aspect;
    camera.right = 2.8 * aspect;
    camera.top = 2.8;
    camera.bottom = -2.8;
    camera.updateProjectionMatrix();
  }

  async function init() {
    scene = new THREE.Scene();
    camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
    camera.position.z = 10;

    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    container.appendChild(renderer.domElement);

    handleResize();
    const resizeObserver = new ResizeObserver(() => handleResize());
    resizeObserver.observe(container);

    const partGeo = new THREE.BufferGeometry();
    const partMat = new THREE.ShaderMaterial({
      vertexShader,
      fragmentShader,
      uniforms: {
        uPixelRatio: { value: renderer.getPixelRatio() },
        uTime: { value: 0 },
        uBaseSize: { value: CONFIG.uBaseSize },
        uCoreRadius: { value: CONFIG.uCoreRadius },
        uGlowIntensity: { value: CONFIG.uGlowIntensity },
        uGlowFalloff: { value: CONFIG.uGlowFalloff },
      },
      transparent: true,
      blending: THREE.NormalBlending, // 关键：非叠加模式保持粒子独立感
      depthTest: false,
    });

    particleSystem = new THREE.Points(partGeo, partMat);
    scene.add(particleSystem);

    loadPoints();

    window.addEventListener("mousemove", (e) => {
      const rect = container.getBoundingClientRect();
      targetMouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
      targetMouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
    });

    animate();
  }

  function loadPoints() {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.src = IMAGE_SRC;
    img.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = 128;
      canvas.height = 128;
      ctx.drawImage(img, 0, 0, 128, 128);
      const data = ctx.getImageData(0, 0, 128, 128).data;
      const tempCoords = [];

      for (let i = 0; i < CONFIG.particleCount; i++) {
        const x = Math.floor(Math.random() * 128);
        const y = Math.floor(Math.random() * 128);
        if (data[(y * 128 + x) * 4 + 3] > 100) {
          const px = (x / 128 - 0.5) * 5.0;
          const py = -(y / 128 - 0.5) * 5.0;
          tempCoords.push({
            x: px,
            y: py,
            ox: px,
            oy: py,
            vx: 0,
            vy: 0,
            phase: Math.random() * Math.PI * 2,
            speed: 0.2 + Math.random() * 0.3,
            amp: 0.05 + Math.random() * 0.05,
          });
        }
      }
      coords = tempCoords;
      isReady = true;
    };
  }

  function animate() {
    requestAnimationFrame(animate);
    if (!isReady) return;

    // 物理参数保持原样
    const STRENGTH = 0.009;
    const RADIUS = 2.0;
    const SOFTNESS = 0.8;
    const RETENTION = 0.02;

    const time = performance.now() * 0.001;
    particleSystem.material.uniforms.uTime.value = time;
    mouse.lerp(targetMouse, 0.05);

    const posArray = new Float32Array(coords.length * 3);

    for (let i = 0; i < coords.length; i++) {
      const p = coords[i];
      const driftX = Math.sin(time * p.speed + p.phase) * p.amp;
      const driftY = Math.cos(time * p.speed * 1.1 + p.phase) * p.amp;
      const dx = p.x - mouse.x * 5.0;
      const dy = p.y - mouse.y * 5.0;
      const d = Math.sqrt(dx * dx + dy * dy);

      if (d < RADIUS) {
        const t = d / RADIUS;
        const f = STRENGTH * (1.0 - t * t * (3.0 - 2.0 * t));
        const invDist = 1.0 / (d + SOFTNESS);
        p.vx += dx * invDist * f;
        p.vy += dy * invDist * f;
      }

      p.vx += (p.ox + driftX - p.x) * RETENTION;
      p.vy += (p.oy + driftY - p.y) * RETENTION;
      p.vx *= 0.92;
      p.vy *= 0.92;
      p.x += p.vx;
      p.y += p.vy;

      posArray[i * 3] = p.x;
      posArray[i * 3 + 1] = p.y;
      posArray[i * 3 + 2] = 0;
    }

    particleSystem.geometry.setAttribute(
      "position",
      new THREE.BufferAttribute(posArray, 3),
    );
    renderer.render(scene, camera);
  }

  init();
</script>

<style>
  #particle-canvas-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }
  canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
</style>