'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 宇宙常数与配置 const PLANET_CONFIG = [ { id: 'mercury', name: '水星', nameEn: 'MERCURY', color: '#A5A5A5', size: 4, radius: 60, speed: 4.1, orbitColor: 'rgba(165, 165, 165, 0.3)' }, { id: 'venus', name: '金星', nameEn: 'VENUS', color: '#E3BB76', size: 7, radius: 90, speed: 2.6, orbitColor: 'rgba(227, 187, 118, 0.3)' }, { id: 'earth', name: '地球', nameEn: 'EARTH', color: '#4F4CB0', size: 7.5, radius: 130, speed: 2.0, orbitColor: 'rgba(79, 76, 176, 0.3)', hasMoon: true }, { id: 'mars', name: '火星', nameEn: 'MARS', color: '#E27B58', size: 5, radius: 170, speed: 1.6, orbitColor: 'rgba(226, 123, 88, 0.3)' }, { id: 'jupiter', name: '木星', nameEn: 'JUPITER', color: '#D39C7E', size: 18, radius: 240, speed: 0.8, orbitColor: 'rgba(211, 156, 126, 0.3)' }, { id: 'saturn', name: '土星', nameEn: 'SATURN', color: '#C5AB6E', size: 15, radius: 310, speed: 0.6, orbitColor: 'rgba(197, 171, 110, 0.3)', hasRing: true }, { id: 'uranus', name: '天王星', nameEn: 'URANUS', color: '#BBE1E4', size: 10, radius: 370, speed: 0.4, orbitColor: 'rgba(187, 225, 228, 0.3)' }, { id: 'neptune', name: '海王星', nameEn: 'NEPTUNE', color: '#6081FF', size: 10, radius: 420, speed: 0.3, orbitColor: 'rgba(96, 129, 255, 0.3)' } ]; // 生成随机星空背景 const generateStars = (count) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 1.5 + 0.5, opacity: Math.random(), blinkSpeed: Math.random() * 2 + 1 })); }; // 生成小行星带 const generateAsteroids = (count, minR, maxR) => { return Array.from({ length: count }, (_, i) => { const angle = (i / count) * Math.PI * 2 + Math.random(); const r = minR + Math.random() * (maxR - minR); return { angleOffset: angle, r, size: Math.random() * 1.5 + 0.5, speed: 0.9 + Math.random() * 0.2 }; }); }; export default function SolarSystemAnimation() { const [time, setTime] = useState(0); const requestRef = useRef(); // 静态资源缓存 const stars = useMemo(() => generateStars(150), []); const asteroids = useMemo(() => generateAsteroids(180, 190, 215), []); const animate = (timestamp) => { // 使用时间戳保证动画平滑，除以系数控制整体速度 setTime(timestamp * 0.0005); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); return (

); }