From 60f54181d6d5e21d3140953dece51fee7a0d40c5 Mon Sep 17 00:00:00 2001
From: LofiSu <163713803+LofiSu@users.noreply.github.com>
Date: Sun, 26 Jan 2025 04:27:57 +0000
Subject: home components

---
 src/components/ThreeBackground.tsx | 72 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/components/ThreeBackground.tsx

(limited to 'src/components/ThreeBackground.tsx')

diff --git a/src/components/ThreeBackground.tsx b/src/components/ThreeBackground.tsx
new file mode 100644
index 0000000..1a6337c
--- /dev/null
+++ b/src/components/ThreeBackground.tsx
@@ -0,0 +1,72 @@
+import React, { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+
+export const ThreeBackground: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ alpha: true });
+    
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    containerRef.current.appendChild(renderer.domElement);
+
+    // Create particles
+    const geometry = new THREE.BufferGeometry();
+    const vertices = [];
+    
+    for (let i = 0; i < 5000; i++) {
+      vertices.push(
+        THREE.MathUtils.randFloatSpread(2000), // x
+        THREE.MathUtils.randFloatSpread(2000), // y
+        THREE.MathUtils.randFloatSpread(2000)  // z
+      );
+    }
+
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+    
+    const material = new THREE.PointsMaterial({
+      color: 0x88ccff,
+      size: 2,
+      transparent: true,
+      opacity: 0.5
+    });
+
+    const particles = new THREE.Points(geometry, material);
+    scene.add(particles);
+
+    camera.position.z = 1000;
+
+    const animate = () => {
+      requestAnimationFrame(animate);
+      particles.rotation.x += 0.0001;
+      particles.rotation.y += 0.0001;
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    const handleResize = () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      containerRef.current?.removeChild(renderer.domElement);
+    };
+  }, []);
+
+  return (
+    <div 
+      ref={containerRef} 
+      className="fixed top-0 left-0 w-full h-full z-0"
+    />
+  );
+};
-- 
cgit v1.2.3-70-g09d2

