Particle Field

import { useMemo, useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
import type { Points } from 'three';

export default function ParticleField({ color = '#22e0ff', scale = 1 }: { color?: string; scale?: number }) {
  const ref = useRef<Points>(null);
  const positions = useMemo(() => {
    const n = 1500;
    const arr = new Float32Array(n * 3);
    for (let i = 0; i < n; i++) {
      arr[i * 3] = (Math.sin(i * 12.9898) * 43758.5453 % 1) * 6 - 3;
      arr[i * 3 + 1] = (Math.sin(i * 78.233) * 43758.5453 % 1) * 6 - 3;
      arr[i * 3 + 2] = (Math.sin(i * 37.719) * 43758.5453 % 1) * 6 - 3;
    }
    return arr;
  }, []);
  useFrame((_, dt) => {
    if (ref.current) ref.current.rotation.y += dt * 0.05;
  });
  return (
    <points ref={ref} scale={scale}>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
      </bufferGeometry>
      <pointsMaterial
        color={color}
        size={0.06}
        sizeAttenuation
        transparent
        opacity={1}
        blending={THREE.AdditiveBlending}
        depthWrite={false}
      />
    </points>
  );
}