import React, { useState, useEffect, useMemo, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 物理/动画参数配置 const CONFIG = { sunRadius: 45, earthOrbitRx: 320, // 地球轨道长半轴 earthOrbitRy: 180, // 地球轨道短半轴 earthRadius: 16, earthSpeed: 0.2, // 地球公转速度 moonOrbitRadius: 40, moonRadius: 6, moonSpeed: 2.5, // 月球绕地速度 }; export const SolarSystemView = () => { const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 动画循环 useEffect(() => { const animate = () => { // 使用真实时间差保证动画平滑 const now = Date.now(); const elapsed = (now - startTimeRef.current) / 1000; setTime(elapsed); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // 生成背景星空 const stars = useMemo(() => { return Array.from({ length: 150 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.7 + 0.3, blinkSpeed: Math.random() * 2 + 1, })); }, []); // 计算位置 // 地球位置 (椭圆轨道) const earthAngle = time * CONFIG.earthSpeed; const earthX = CENTER_X + CONFIG.earthOrbitRx * Math.cos(earthAngle); const earthY = CENTER_Y + CONFIG.earthOrbitRy * Math.sin(earthAngle); // 月球位置 (圆形轨道，相对于地球) const moonAngle = time * CONFIG.moonSpeed; const moonX = earthX + CONFIG.moonOrbitRadius * Math.cos(moonAngle); const moonY = earthY + CONFIG.moonOrbitRadius * Math.sin(moonAngle); // 模拟数据展示 const velocity = (29.78 + Math.sin(time) * 0.5).toFixed(2); // 模拟速度变化 const distance = (149.6 + Math.cos(time * 0.1) * 2).toFixed(2); // 模拟距离变化 return (

); };