diff --git a/src/components/ArtistSpotlight/ArtistParticles.jsx b/src/components/ArtistSpotlight/ArtistParticles.jsx new file mode 100644 index 0000000..cdcc4a1 --- /dev/null +++ b/src/components/ArtistSpotlight/ArtistParticles.jsx @@ -0,0 +1,51 @@ +import { useRef, useMemo } from 'react' +import { Canvas, useFrame } from '@react-three/fiber' +import * as THREE from 'three' + +const COUNT = 280 + +function Particles() { + const meshRef = useRef() + const dummy = useMemo(() => new THREE.Object3D(), []) + + const data = useMemo(() => { + return Array.from({ length: COUNT }, (_, i) => ({ + phi: Math.acos(-1 + (2 * i) / COUNT), + theta: Math.sqrt(COUNT * Math.PI) * (2 * i / COUNT) * Math.PI, + speed: 0.15 + Math.random() * 0.25, + radius: 2.2 + Math.random() * 1.4, + })) + }, []) + + useFrame(({ clock }) => { + if (!meshRef.current) return + const t = clock.getElapsedTime() + data.forEach((p, i) => { + const r = p.radius + Math.sin(t * p.speed + i * 0.3) * 0.25 + dummy.position.set( + r * Math.sin(p.phi) * Math.cos(p.theta + t * p.speed * 0.08), + r * Math.cos(p.phi), + r * Math.sin(p.phi) * Math.sin(p.theta + t * p.speed * 0.08), + ) + dummy.scale.setScalar(0.012 + Math.abs(Math.sin(t * 0.5 + i)) * 0.008) + dummy.updateMatrix() + meshRef.current.setMatrixAt(i, dummy.matrix) + }) + meshRef.current.instanceMatrix.needsUpdate = true + }) + + return ( + + + + + ) +} + +export default function ArtistParticles() { + return ( + + + + ) +}