ParticleField

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import * as THREE from "three"
6 
7import {
8  SceneContainer,
9  type SceneContainerProps,
10} from "@/components/threecn/scene-container"
11import {
12  useShadcnTheme,
13  type ThemeMode,
14} from "@/components/hooks/use-shadcn-theme"
15 
16type ParticlesProps = {
17  count: number
18  speed: number
19  size: number
20  theme: ThemeMode
21}
22 
23type ParticleData = {
24  positions: Float32Array
25  speeds: Float32Array
26  isPrimary: Uint8Array
27}
28 
29function seedParticles(count: number): ParticleData {
30  const positions = new Float32Array(count * 3)
31  const speeds = new Float32Array(count)
32  const isPrimary = new Uint8Array(count)
33  const radius = 9
34  for (let i = 0; i < count; i++) {
35    const i3 = i * 3
36    const r = radius * Math.cbrt(Math.random())
37    const theta = Math.random() * Math.PI * 2
38    const phi = Math.acos(2 * Math.random() - 1)
39    positions[i3] = r * Math.sin(phi) * Math.cos(theta)
40    positions[i3 + 1] = r * Math.sin(phi) * Math.sin(theta) * 0.6
41    positions[i3 + 2] = r * Math.cos(phi)
42    speeds[i] = 0.5 + Math.random()
43    // 35% of points are "primary" (foreground), the rest muted.
44    isPrimary[i] = Math.random() < 0.35 ? 1 : 0
45  }
46  return { positions, speeds, isPrimary }
47}
48 
49function Particles({ count, speed, size, theme }: ParticlesProps) {
50  const pointsRef = React.useRef<THREE.Points>(null)
51  const materialRef = React.useRef<THREE.PointsMaterial>(null)
52  const { primaryColor, mutedColor } = useShadcnTheme(theme)
53 
54  // Stable distribution; only regenerated when the count changes.
55  const { positions, speeds, isPrimary } = React.useMemo(
56    () => seedParticles(count),
57    [count]
58  )
59 
60  // A fresh color buffer is built whenever the theme changes.
61  const colors = React.useMemo(() => {
62    const arr = new Float32Array(count * 3)
63    for (let i = 0; i < count; i++) {
64      const i3 = i * 3
65      const c = isPrimary[i] ? primaryColor : mutedColor
66      arr[i3] = c.r
67      arr[i3 + 1] = c.g
68      arr[i3 + 2] = c.b
69    }
70    return arr
71  }, [count, isPrimary, primaryColor, mutedColor])
72 
73  useFrame((state, delta) => {
74    const points = pointsRef.current
75    if (!points) return
76    const t = state.clock.elapsedTime
77    points.rotation.y += delta * 0.05 * speed
78 
79    const pos = points.geometry.getAttribute("position") as THREE.BufferAttribute
80    const arr = pos.array as Float32Array
81    for (let i = 0; i < speeds.length; i++) {
82// … truncated