Three.js Magnetic Particles — Cursor-Repelled WebGL Particle Field

<canvas id="magCanvas"></canvas>
<div class="mp-caption">Move your cursor to repel the field</div>

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#040611}
#magCanvas{display:block;width:100%;height:100%;cursor:none}
.mp-caption{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);color:#c7d2fe;font:12.5px system-ui,sans-serif;letter-spacing:.03em;opacity:.65;pointer-events:none;text-transform:uppercase}

const canvas = document.getElementById('magCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 50);
camera.position.z = 12;

// An invisible plane at z=0 gives the raycaster something flat to
// intersect, converting the 2D cursor into a 3D point that always sits
// on the same plane as the particle grid.
const pickPlane = new THREE.Mesh(
  new THREE.PlaneGeometry(60, 60),
  new THREE.MeshBasicMaterial({ visible: false })
);
scene.add(pickPlane);

const GRID = 46;
const SPACING = 0.34;
const COUNT = GRID * GRID;

const positions = new Float32Array(COUNT * 3);
const home = new Float32Array(COUNT * 3);   // each particle's resting position
const velocity = new Float32Array(COUNT * 3);
const colors = new Float32Array(COUNT * 3);

let idx = 0;
for (let x = 0; x < GRID; x++) {
  for (let y = 0; y < GRID; y++) {
    const px = (x - GRID / 2) * SPACING;
    const py = (y - GRID / 2) * SPACING;
    positions[idx * 3] = px; positions[idx * 3 + 1] = py; positions[idx * 3 + 2] = 0;
    home[idx * 3] = px; home[idx * 3 + 1] = py; home[idx * 3 + 2] = 0;
    colors[idx * 3] = 0.4; colors[idx * 3 + 1] = 0.6; colors[idx * 3 + 2] = 1;
    idx++;
  }
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({ size: 0.06, vertexColors: true, transparent: true, opacity: 0.9, depthWrite: false });
const points = new THREE.Points(geometry, material);
scene.add(points);

const posAttr = geometry.getAttribute('position');
const colorAttr = geometry.getAttribute('color');

const raycaster = new THREE.Raycaster();
const pointerNDC = new THREE.Vector2(999, 999);
let cursor3D = null;

canvas.addEventListener('pointermove', e => {
  const rect = canvas.getBoundingClientRect();
  pointerNDC.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
  pointerNDC.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
});
canvas.addEventListener('pointerleave', () => { cursor3D = null; });

const REPEL_RADIUS = 2.2;
const REPEL_STRENGTH = 0.045;
const SPRING = 0.02;   // pull back toward home
const DAMPING = 0.9;   // velocity decay each frame

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame(animate);

  raycaster.setFromCamera(pointerNDC, camera);
  const hit = raycaster.intersectObject(pickPlane)[0];
  cursor3D = hit ? hit.point : null;

  for (let i = 0; i < COUNT; i++) {
    const x = posAttr.getX(i), y = posAttr.getY(i), z = posAttr.getZ(i);
    let vx = velocity[i * 3], vy = velocity[i * 3 + 1], vz = velocity[i * 3 + 2];

    // Spring pulls every particle back toward its own resting grid slot —
    // this is what makes the field "heal" once the cursor moves away.
    vx += (home[i * 3] - x) * SPRING;
    vy += (home[i * 3 + 1] - y) * SPRING;
    vz += (home[i * 3 + 2] - z) * SPRING;

    // Cursor repulsion: particles within REPEL_RADIUS of the 3D cursor
    // point get pushed directly away from it, scaled by how close they are.
    if (cursor3D) {
      const dx = x - cursor3D.x, dy = y - cursor3D.y, dz = z - cursor3D.z;
      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) || 0.001;
      if (dist < REPEL_RADIUS) {
        const force = (1 - dist / REPEL_RADIUS) * REPEL_STRENGTH;
        vx += (dx / dist) * force;
        vy += (dy / dist) * force;
        vz += (dz / dist) * force;
      }
    }

    vx *= DAMPING; vy *= DAMPING; vz *= DAMPING;
    velocity[i * 3] = vx; velocity[i * 3 + 1] = vy; velocity[i * 3 + 2] = vz;

    posAttr.setXYZ(i, x + vx, y + vy, z + vz);

    // Color reacts to how far a particle currently sits from its home
    // slot, so displaced particles visibly glow brighter than settled ones.
    const displacement = Math.min(1, Math.sqrt(vx * vx + vy * vy + vz * vz) * 12);
    colorAttr.setXYZ(i, 0.35 + displacement * 0.5, 0.55 + displacement * 0.35, 1);
  }
  posAttr.needsUpdate = true;
  colorAttr.needsUpdate = true;

  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();