'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 视图常量 const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 800; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 行星数据配置 (为了视觉效果，比例并非完全真实，而是经过艺术调整) // speed: 轨道角速度, distance: 轨道半径, size: 行星大小, color: 颜色 const PLANETS_DATA = [ { name: '水星 (Mercury)', speed: 4.1, distance: 70, size: 4, color: '#A5A5A5', type: 'rocky' }, { name: '金星 (Venus)', speed: 1.6, distance: 100, size: 7, color: '#E3BB76', type: 'rocky' }, { name: '地球 (Earth)', speed: 1.0, distance: 140, size: 7.5, color: '#4F83CC', type: 'rocky' }, { name: '火星 (Mars)', speed: 0.53, distance: 180, size: 5, color: '#E27B58', type: 'rocky' }, { name: '木星 (Jupiter)', speed: 0.08, distance: 260, size: 22, color: '#C88B3A', type: 'gas' }, { name: '土星 (Saturn)', speed: 0.03, distance: 340, size: 18, color: '#C5AB6E', type: 'gas', ring: true }, { name: '天王星 (Uranus)', speed: 0.01, distance: 410, size: 12, color: '#93B8BE', type: 'ice' }, { name: '海王星 (Neptune)', speed: 0.006, distance: 470, size: 11, color: '#597DBE', type: 'ice' }, { name: '冥王星 (Pluto)', speed: 0.004, distance: 530, size: 3, color: '#D1C4C0', type: 'dwarf' }, ]; // 生成随机背景星星 const generateStars = (count: number) => { 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() * 0.7 + 0.3, })); }; // 生成小行星带 const generateAsteroids = (count: number) => { return Array.from({ length: count }, () => { const angle = Math.random() * Math.PI * 2; // 小行星带大致位于火星(180)和木星(260)之间 const distBase = 220; const spread = 25; const distance = distBase + (Math.random() - 0.5) * spread; return { angle, distance, size: Math.random() * 1.5 + 0.5, speedOffset: Math.random() * 0.02 + 0.05 }; }); }; export const SolarSystemView = () => { const [time, setTime] = useState(0); const requestRef = useRef(); const stars = useMemo(() => generateStars(200), []); const asteroids = useMemo(() => generateAsteroids(150), []); // 动画循环 const animate = (timestamp: number) => { // 减慢时间流逝速度以便观察 setTime(timestamp * 0.0005); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); return ( ); };