Image to particles with three.js

Image to particles in three.js: a free React component

components/ImageParticles.tsx

"use client";
import { useEffect, useRef } from "react";
import * as THREE from "three";

type Props = { src: string; step?: number; size?: number; className?: string };

// Turns an image into coloured points that fly in and settle: one point for
// every `step`-th pixel whose alpha is above 128, coloured like that pixel.
// The image must be same-origin or served with CORS headers, or the browser
// blocks getImageData with a SecurityError.
export default function ImageParticles({ src, step = 2, size = 0.03, className = "" }: Props) {
  const host = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = host.current!;
    let disposed = false;
    let raf = 0;
    let onScreen = true;
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
    renderer.setSize(el.clientWidth, el.clientHeight);
    el.append(renderer.domElement);
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, el.clientWidth / el.clientHeight, 0.1, 100);
    camera.position.z = 9;
    const geo = new THREE.BufferGeometry();
    const mat = new THREE.PointsMaterial({ size, vertexColors: true });
    let pos = new Float32Array(0);
    let target = new Float32Array(0);
    const reduced = matchMedia("(prefers-reduced-motion: reduce)");

    const frame = () => {
      raf = 0;
      let moving = false;
      for (let i = 0; i < pos.length; i++) {
        const d = target[i] - pos[i];
        if (Math.abs(d) > 0.001) moving = true;
        pos[i] += d * 0.06;
      }
      geo.attributes.position.needsUpdate = true;
      renderer.render(scene, camera);
      if (moving) loop(); // stops by itself once every point has landed
    };
    const loop = () => {
      if (disposed || raf || !onScreen || document.hidden) return;
      raf = requestAnimationFrame(frame);
    };

    const img = new Image();
    img.crossOrigin = "anonymous"; // harmless same-origin, needed for a CORS host
    img.onload = () => {
      if (disposed) return;
      // 1. draw the image into a small canvas, longest side 320 px
      const k = 320 / Math.max(img.naturalWidth, img.naturalHeight);
      const w = Math.round(img.naturalWidth * k), h = Math.round(img.naturalHeight * k);
      const c = document.createElement("canvas");
      c.width = w; c.height = h;
      const g = c.getContext("2d")!;
      g.drawImage(img, 0, 0, w, h);
      const px = g.getImageData(0, 0, w, h).data;

      // 2. one point per kept pixel, in that pixel's colour
      const p: number[] = [], col: number[] = [], tmp = new THREE.Color();
      const unit = 6 / Math.max(w, h); // the picture is about 6 world units wide
      for (let y = 0; y < h; y += step) {
        for (let x = 0; x < w; x += step) {
          const i = (y * w + x) * 4;
          if (px[i + 3] <= 128) continue;
          p.push((x - w / 2) * unit, -(y - h / 2) * unit, (Math.random() - 0.5) * 0.2);
          // canvas pixels are sRGB; three works in linear, so convert
          tmp.setRGB(px[i] / 255, px[i + 1] / 255, px[i + 2] / 255, THREE.SRGBColorSpace);
          col.push(tmp.r, tmp.g, tmp.b);
        }
      }
      target = new Float32Array(p);
      pos = reduced.matches ? target.slice() : target.map(() => (Math.random() - 0.5) * 14);
      geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
      geo.setAttribute("color", new THREE.Float32BufferAttribute(col, 3));
      scene.add(new THREE.Points(geo, mat));
      renderer.render(scene, camera);
      loop();
    };
    img.src = src;

    const io = new IntersectionObserver(([e]) => {
      onScreen = e.isIntersecting;
      if (onScreen) loop(); else { cancelAnimationFrame(raf); raf = 0; }
    });
    io.observe(el);
    const onVis = () => { if (!document.hidden) loop(); };
    document.addEventListener("visibilitychange", onVis);
    const onResize = () => {
      camera.aspect = el.clientWidth / el.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(el.clientWidth, el.clientHeight);
      renderer.render(scene, camera);
    };
    addEventListener("resize", onResize);

    return () => {
      disposed = true;
      cancelAnimationFrame(raf);
      io.disconnect();
      document.removeEventListener("visibilitychange", onVis);
      removeEventListener("resize", onResize);
      geo.dispose();
      mat.dispose();
      renderer.dispose();
      renderer.domElement.remove();
    };
  }, [src, step, size]);

  return <div ref={host} className={`h-full w-full ${className}`} />;
}

import ImageParticles from "@/components/ImageParticles";

// logo.png sits in public/, so it is same-origin and the canvas can read it
export default function Page() {
  return (
    <section className="h-[70vh] bg-black">
      <ImageParticles src="/logo.png" step={2} />
    </section>
  );
}