import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1400; const VIEW_HEIGHT = 900; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; const PLANETS = [ { id: 'mercury', name: '水星 (Mercury)', color: ['#e2e8f0', '#94a3b8'], distance: 110, size: 8, speed: 4.1, desc: '太阳系中最小的行星，也是最接近太阳的行星。表面布满撞击坑。' }, { id: 'venus', name: '金星 (Venus)', color: ['#fde047', '#d97706'], distance: 160, size: 14, speed: 3.0, desc: '太阳系中最热的行星，拥有厚重的大气层，温室效应极强。' }, { id: 'earth', name: '地球 (Earth)', color: ['#3b82f6', '#1d4ed8'], distance: 220, size: 16, speed: 2.5, desc: '我们赖以生存的家园，目前已知唯一孕育生命的星球。' }, { id: 'mars', name: '火星 (Mars)', color: ['#ef4444', '#991b1b'], distance: 280, size: 12, speed: 2.0, desc: '被称为红色星球，地表覆盖氧化铁，是人类探索的重点目标。' }, { id: 'jupiter', name: '木星 (Jupiter)', color: ['#d97706', '#78350f'], distance: 420, size: 40, speed: 1.2, desc: '太阳系最大的行星，巨大的气态巨行星，拥有标志性的大红斑。' }, { id: 'saturn', name: '土星 (Saturn)', color: ['#fcd34d', '#b45309'], distance: 540, size: 34, speed: 0.9, hasRings: true, desc: '以其壮观的行星环系统闻名，是一颗低密度的气态巨行星。' }, { id: 'uranus', name: '天王星 (Uranus)', color: ['#67e8f9', '#0e7490'], distance: 660, size: 22, speed: 0.6, desc: '冰巨星，大气中含有甲烷使其呈现青色，自转轴几乎平躺。' }, { id: 'neptune', name: '海王星 (Neptune)', color: ['#3b82f6', '#172554'], distance: 760, size: 21, speed: 0.4, desc: '距离太阳最远的行星，拥有太阳系最强烈的风暴，呈现深蓝色。' }, ]; const generateStars = (count) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.2 + 0.3, baseOpacity: Math.random() * 0.5 + 0.1, blinkSpeed: Math.random() * 0.05 + 0.01, })); }; const generateAsteroids = (count) => { return Array.from({ length: count }, () => ({ angleOffset: Math.random() * Math.PI * 2, distOffset: Math.random() * 40 - 20, size: Math.random() * 2 + 0.8, speedFactor: Math.random() * 0.2 + 0.8, gray: Math.floor(Math.random() * 100 + 100), })); }; export const SolarSystemView = () => { const [hoveredPlanet, setHoveredPlanet] = useState(null); const timeRef = useRef(0); const requestRef = useRef(null); const planetRefs = useRef([]); const shadowRefs = useRef([]); const asteroidRefs = useRef([]); const sunHaloRefs = useRef([]); const starRefs = useRef([]); const stars = useMemo(() => generateStars(400), []); const asteroids = useMemo(() => generateAsteroids(300), []); useEffect(() => { const animate = () => { timeRef.current += 0.4; const t = timeRef.current; PLANETS.forEach((planet, index) => { const el = planetRefs.current[index]; const shadowEl = shadowRefs.current[index]; if (el) { const angle = (t * planet.speed * 0.003) % (Math.PI * 2); const x = CENTER_X + Math.cos(angle) * planet.distance; const y = CENTER_Y + Math.sin(angle) * (planet.distance * 0.35); const scale = 1 + (Math.sin(angle) * 0.15); const zIndex = Math.sin(angle) > 0 ? 1 : 0; el.setAttribute('transform', `translate(${x}, ${y}) scale(${scale})`); if (shadowEl) { const rot = (angle * 180 / Math.PI) + 90; shadowEl.setAttribute('transform', `rotate(${rot})`); } el.style.opacity = zIndex === 0 && Math.abs(Math.cos(angle)) < 0.2 ? '0.6' : '1'; } }); const asteroidBaseDist = 340; asteroidRefs.current.forEach((el, i) => { if (el) { const data = asteroids[i]; const angle = data.angleOffset + (t * 0.0008 * data.speedFactor); const dist = asteroidBaseDist + data.distOffset; const x = CENTER_X + Math.cos(angle) * dist; const y = CENTER_Y + Math.sin(angle) * (dist * 0.35); el.setAttribute('cx', x); el.setAttribute('cy', y); el.setAttribute('opacity', 0.4 + Math.sin(t * 0.05 + i) * 0.2); } }); sunHaloRefs.current.forEach((el, i) => { if (el) { const dir = i % 2 === 0 ? 1 : -1; const speed = 0.1 * (i + 1); el.setAttribute('transform', `translate(${CENTER_X}, ${CENTER_Y}) rotate(${t * speed * dir})`); } }); starRefs.current.forEach((el, i) => { if (el) { const s = stars[i]; const opacity = s.baseOpacity + Math.sin(t * s.blinkSpeed) * 0.2; el.setAttribute('opacity', opacity > 0 ? opacity : 0); } }); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [asteroids, stars]); return (

); };