Pixel
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef, useMemo } from 'react';
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
import * as THREE from 'three';
|
|
|
|
function ParticleRing() {
|
|
const pointsRef = useRef<THREE.Points>(null);
|
|
const particleCount = 500;
|
|
|
|
const positions = useMemo(() => {
|
|
const pos = new Float32Array(particleCount * 3);
|
|
const radius = 2.5;
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const theta = Math.random() * Math.PI * 2;
|
|
const r = radius + (Math.random() - 0.5) * 0.5;
|
|
pos[i * 3] = Math.cos(theta) * r;
|
|
pos[i * 3 + 1] = (Math.random() - 0.5) * 0.5;
|
|
pos[i * 3 + 2] = Math.sin(theta) * r;
|
|
}
|
|
return pos;
|
|
}, []);
|
|
|
|
useFrame((_, delta) => {
|
|
if (pointsRef.current) {
|
|
pointsRef.current.rotation.y += delta * 0.15;
|
|
pointsRef.current.rotation.x += delta * 0.05;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<points ref={pointsRef}>
|
|
<bufferGeometry>
|
|
<bufferAttribute
|
|
attach="attributes-position"
|
|
count={particleCount}
|
|
array={positions}
|
|
itemSize={3}
|
|
/>
|
|
</bufferGeometry>
|
|
<pointsMaterial
|
|
size={0.04}
|
|
color="#ffffff"
|
|
transparent
|
|
opacity={0.9}
|
|
sizeAttenuation
|
|
/>
|
|
</points>
|
|
);
|
|
}
|
|
|
|
export default function Gate() {
|
|
return (
|
|
<div style={{ width: '100%', height: '100%', minHeight: '100vh', background: 'transparent' }}>
|
|
<Canvas
|
|
camera={{ position: [0, 0, 7], fov: 60 }}
|
|
gl={{ alpha: true, antialias: true }}
|
|
>
|
|
<ParticleRing />
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
}
|