'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CX = VIEW_WIDTH / 2; const CY = VIEW_HEIGHT / 2; // 行星配置数据 const PLANETS = [ { name: '水星', en: 'Mercury', r: 4, orbitR: 60, speed: 4.1, color: ['#a1a1aa', '#52525b'] }, { name: '金星', en: 'Venus', r: 7, orbitR: 90, speed: 2.6, color: ['#fde047', '#ca8a04'] }, { name: '地球', en: 'Earth', r: 7.5, orbitR: 130, speed: 2.0, color: ['#3b82f6', '#1d4ed8'] }, { name: '火星', en: 'Mars', r: 5, orbitR: 170, speed: 1.5, color: ['#ef4444', '#991b1b'] }, { name: '木星', en: 'Jupiter', r: 22, orbitR: 260, speed: 0.8, color: ['#fb923c', '#c2410c'] }, { name: '土星', en: 'Saturn', r: 18, orbitR: 340, speed: 0.5, color: ['#facc15', '#a16207'], hasRing: true }, { name: '天王星', en: 'Uranus', r: 12, orbitR: 410, speed: 0.3, color: ['#22d3ee', '#0891b2'] }, { name: '海王星', en: 'Neptune', r: 11, orbitR: 470, speed: 0.2, color: ['#60a5fa', '#2563eb'] }, ]; export const SolarSystemView = () => { const [time, setTime] = useState(0); const requestRef = useRef(); // 动画循环 const animate = (t: number) => { // 速度系数，控制整体流速 setTime(prev => prev + 0.2); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 生成背景星星 const stars = useMemo(() => { return Array.from({ length: 150 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.7 + 0.3, blinkSpeed: Math.random() * 2 + 1, })); }, []); // 生成小行星带 (位于火星和木星之间) const asteroids = useMemo(() => { return Array.from({ length: 120 }).map((_, i) => { const angle = (Math.random() * 360 * Math.PI) / 180; const dist = 205 + Math.random() * 30; // Orbit radius range return { angle, dist, size: Math.random() * 1.5 + 0.5 }; }); }, []); return ( ); };