Spaces:
Build error
Build error
| import React from 'react'; | |
| import * as THREE from 'three'; | |
| const StarField = ({ count = 1000 }) => { | |
| const starRef = React.useRef(); | |
| React.useEffect(() => { | |
| const geometry = new THREE.BufferGeometry(); | |
| const positions = []; | |
| const colors = []; | |
| const color = new THREE.Color(); | |
| for (let i = 0; i < count; i++) { | |
| // Random position in a large cube | |
| const x = (Math.random() - 0.5) * 2000; | |
| const y = (Math.random() - 0.5) * 2000; | |
| const z = (Math.random() - 0.5) * 2000; | |
| positions.push(x, y, z); | |
| // Random colors for stars | |
| color.setHSL(Math.random(), 0.8, Math.random() * 0.5 + 0.5); | |
| colors.push(color.r, color.g, color.b); | |
| } | |
| geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); | |
| geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); | |
| const material = new THREE.PointsMaterial({ | |
| size: 2, | |
| vertexColors: true, | |
| transparent: true, | |
| opacity: 0.8, | |
| }); | |
| const stars = new THREE.Points(geometry, material); | |
| starRef.current = stars; | |
| return () => { | |
| if (starRef.current) { | |
| starRef.current.geometry.dispose(); | |
| starRef.current.material.dispose(); | |
| } | |
| }; | |
| }, [count]); | |
| return <primitive ref={starRef} />; | |
| }; | |
| export default StarField; |