65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useMemo } from "react";
|
|
import { Canvas, useFrame } from "@react-three/fiber";
|
|
import { Points, PointMaterial, Preload } from "@react-three/drei";
|
|
import * as THREE from "three";
|
|
|
|
function Particles(props: any) {
|
|
const ref = useRef<THREE.Points>(null!);
|
|
|
|
// Generate 5000 random points inside a sphere
|
|
const sphere = useMemo(() => {
|
|
const coords = new Float32Array(5000 * 3);
|
|
for (let i = 0; i < 5000; i++) {
|
|
const r = 1.2 * Math.cbrt(Math.random()); // Radius
|
|
const theta = Math.random() * 2 * Math.PI; // Theta
|
|
const phi = Math.acos(2 * Math.random() - 1); // Phi
|
|
|
|
const x = r * Math.sin(phi) * Math.cos(theta);
|
|
const y = r * Math.sin(phi) * Math.sin(theta);
|
|
const z = r * Math.cos(phi);
|
|
|
|
coords[i * 3] = x;
|
|
coords[i * 3 + 1] = y;
|
|
coords[i * 3 + 2] = z;
|
|
}
|
|
return coords;
|
|
}, []);
|
|
|
|
useFrame((state, delta) => {
|
|
if (ref.current) {
|
|
// Rotate the entire cloud slowly
|
|
ref.current.rotation.x -= delta / 10;
|
|
ref.current.rotation.y -= delta / 15;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<group rotation={[0, 0, Math.PI / 4]}>
|
|
<Points ref={ref} positions={sphere} stride={3} frustumCulled={false} {...props}>
|
|
<PointMaterial
|
|
transparent
|
|
color="#22d3ee" // Cyan-400
|
|
size={0.005}
|
|
sizeAttenuation={true}
|
|
depthWrite={false}
|
|
opacity={0.6}
|
|
/>
|
|
</Points>
|
|
</group>
|
|
);
|
|
}
|
|
|
|
const NeuralNetwork = () => {
|
|
return (
|
|
<div className="absolute inset-0 z-0 h-full w-full">
|
|
<Canvas camera={{ position: [0, 0, 1] }}>
|
|
<Particles />
|
|
<Preload all />
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NeuralNetwork; |