arsam
3fc7b54404
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
42 lines
1.1 KiB
React
42 lines
1.1 KiB
React
import { useRef, useMemo } from 'react'
|
|
import { Canvas, useFrame } from '@react-three/fiber'
|
|
import * as THREE from 'three'
|
|
|
|
const COUNT = 250
|
|
|
|
function Particles() {
|
|
const ref = useRef()
|
|
const positions = useMemo(() => {
|
|
const arr = new Float32Array(COUNT * 3)
|
|
for (let i = 0; i < COUNT; i++) {
|
|
arr[i * 3] = (Math.random() - 0.5) * 22
|
|
arr[i * 3 + 1] = (Math.random() - 0.5) * 18
|
|
arr[i * 3 + 2] = (Math.random() - 0.5) * 16
|
|
}
|
|
return arr
|
|
}, [])
|
|
|
|
useFrame(({ clock }) => {
|
|
if (!ref.current) return
|
|
ref.current.rotation.y = clock.getElapsedTime() * 0.03
|
|
ref.current.rotation.x = Math.sin(clock.getElapsedTime() * 0.015) * 0.08
|
|
})
|
|
|
|
return (
|
|
<points ref={ref}>
|
|
<bufferGeometry>
|
|
<bufferAttribute attach="attributes-position" args={[positions, 3]} />
|
|
</bufferGeometry>
|
|
<pointsMaterial size={0.035} color="#c9a84c" transparent opacity={0.4} sizeAttenuation />
|
|
</points>
|
|
)
|
|
}
|
|
|
|
export default function HeroParticles() {
|
|
return (
|
|
<Canvas camera={{ position: [0, 0, 5] }} gl={{ alpha: true }} style={{ background: 'transparent' }}>
|
|
<Particles />
|
|
</Canvas>
|
|
)
|
|
}
|