55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useRef } from "react";
|
|
import { Canvas, useFrame } from "@react-three/fiber";
|
|
import { Points, PointMaterial } from "@react-three/drei";
|
|
import * as THREE from "three";
|
|
|
|
function ParticleField() {
|
|
const ref = useRef<THREE.Points>(null);
|
|
|
|
// Generate random points in a sphere
|
|
const particleCount = 5000;
|
|
const positions = new Float32Array(particleCount * 3);
|
|
for (let i = 0; i < particleCount * 3; i += 3) {
|
|
const radius = Math.random() * 1.5;
|
|
const theta = Math.random() * Math.PI * 2;
|
|
const phi = Math.acos(Math.random() * 2 - 1);
|
|
|
|
positions[i] = radius * Math.sin(phi) * Math.cos(theta);
|
|
positions[i + 1] = radius * Math.sin(phi) * Math.sin(theta);
|
|
positions[i + 2] = radius * Math.cos(phi);
|
|
}
|
|
|
|
useFrame((state, delta) => {
|
|
if (ref.current) {
|
|
ref.current.rotation.x -= delta / 10;
|
|
ref.current.rotation.y -= delta / 15;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<group rotation={[0, 0, Math.PI / 4]}>
|
|
<Points ref={ref} positions={positions} stride={3} frustumCulled={false}>
|
|
<PointMaterial
|
|
transparent
|
|
color="#3b82f6"
|
|
size={0.005}
|
|
sizeAttenuation={true}
|
|
depthWrite={false}
|
|
/>
|
|
</Points>
|
|
</group>
|
|
);
|
|
}
|
|
|
|
export function ParticleBackground() {
|
|
return (
|
|
<div className="fixed inset-0 -z-10 opacity-30 pointer-events-none">
|
|
<Canvas camera={{ position: [0, 0, 1] }}>
|
|
<ParticleField />
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
}
|