React Three Fiber particles: free routes first

React Three Fiber particles that morph: a free useFrame swarm

components/ParticleSwarm.tsx

"use client";
import { useMemo, useRef, useState } from "react";
import * as THREE from "three";
import { Canvas, useFrame } from "@react-three/fiber";
import { PointMaterial } from "@react-three/drei";

const COUNT = 6000;

// Read COUNT points off any three.js geometry, so every shape has the same count.
function sample(geo: THREE.BufferGeometry): Float32Array {
  const src = geo.getAttribute("position");
  const out = new Float32Array(COUNT * 3);
  for (let i = 0; i < COUNT; i++) {
    const j = Math.floor((i / COUNT) * src.count);
    out.set([src.getX(j), src.getY(j), src.getZ(j)], i * 3);
  }
  geo.dispose();
  return out;
}

function Swarm({ shape }: { shape: number }) {
  const points = useRef<THREE.Points>(null);
  const shapes = useMemo(
    () => [sample(new THREE.SphereGeometry(2, 96, 64)), sample(new THREE.TorusKnotGeometry(1.5, 0.45, 300, 20))],
    [],
  );
  const pos = useMemo(() => shapes[0].slice(), [shapes]);
  const vel = useMemo(() => new Float32Array(COUNT * 3), []);

  // Mutate in useFrame, never setState per frame.
  useFrame((_, delta) => {
    const p = points.current;
    if (!p) return;
    const target = shapes[shape % shapes.length];
    const step = Math.min(delta * 60, 3); // 1 at 60 fps
    const keep = Math.pow(0.9, step); // damping per step
    for (let i = 0; i < COUNT * 3; i++) {
      vel[i] = (vel[i] + (target[i] - pos[i]) * 0.02 * step) * keep;
      pos[i] += vel[i] * step;
    }
    p.geometry.attributes.position.needsUpdate = true;
    p.rotation.y += delta * 0.25;
  });

  return (
    <points ref={points}>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" args={[pos, 3]} />
      </bufferGeometry>
      <PointMaterial transparent color="#8B6CFF" size={0.035} sizeAttenuation depthWrite={false} />
    </points>
  );
}

export default function ParticleSwarm() {
  const [shape, setShape] = useState(0);
  return (
    <div className="h-[480px] cursor-pointer" onClick={() => setShape((s) => s + 1)}>
      <Canvas camera={{ position: [0, 0, 7], fov: 45 }} dpr={[1, 2]}>
        <Swarm shape={shape} />
      </Canvas>
    </div>
  );
}