Spaces:
Build error
Build error
| import React from 'react'; | |
| import { useFrame } from '@react-three/fiber'; | |
| import * as THREE from 'three'; | |
| const Planet = ({ | |
| name, | |
| size, | |
| distance, | |
| speed, | |
| color, | |
| texture, | |
| onClick, | |
| hasRings = false | |
| }) => { | |
| const planetRef = React.useRef(); | |
| const pivotRef = React.useRef(); | |
| useFrame((state) => { | |
| if (pivotRef.current) { | |
| pivotRef.current.rotation.y += speed * 0.005; | |
| } | |
| if (planetRef.current) { | |
| planetRef.current.rotation.y += 0.01; | |
| } | |
| }); | |
| return ( | |
| <group ref={pivotRef}> | |
| {/* Orbit path */} | |
| <mesh rotation={[-Math.PI / 2, 0, 0]} onClick={onClick}> | |
| <ringGeometry args={[distance - 0.1, distance + 0.1, 64]} /> | |
| <meshBasicMaterial color="#FFFFFF" transparent opacity={0.1} /> | |
| </mesh> | |
| {/* Planet */} | |
| <mesh | |
| ref={planetRef} | |
| position={[distance, 0, 0]} | |
| onClick={onClick} | |
| onPointerOver={() => document.body.style.cursor = 'pointer'} | |
| onPointerOut={() => document.body.style.cursor = 'auto'} | |
| > | |
| <sphereGeometry args={[size, 32, 32]} /> | |
| <meshStandardMaterial | |
| color={color} | |
| roughness={0.7} | |
| metalness={0.1} | |
| map={texture ? new THREE.TextureLoader().load(texture) : null} | |
| /> | |
| {/* Rings for Saturn */} | |
| {hasRings && ( | |
| <mesh rotation={[-Math.PI / 2.5, 0, 0]}> | |
| <ringGeometry args={[size * 1.4, size * 2.2, 64]} /> | |
| <meshStandardMaterial | |
| color="#CDBA86" | |
| transparent | |
| opacity={0.8} | |
| side={THREE.DoubleSide} | |
| /> | |
| </mesh> | |
| )} | |
| </mesh> | |
| </group> | |
| ); | |
| }; | |
| export default Planet; |