Blame for components/Planet.jsx

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;