'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 动画视口配置 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 行星数据配置 (为了视觉效果，比例非真实天文比例) const PLANETS = [ { id: 'mercury', name: '水星', nameEn: 'Mercury', color: '#A5A5A5', size: 6, distance: 70, speed: 2.5, orbitColor: '#ffffff30' }, { id: 'venus', name: '金星', nameEn: 'Venus', color: '#E3BB76', size: 10, distance: 100, speed: 1.8, orbitColor: '#ffffff30' }, { id: 'earth', name: '地球', nameEn: 'Earth', color: '#4F4CB0', size: 11, distance: 140, speed: 1.2, orbitColor: '#4F4CB040' }, { id: 'mars', name: '火星', nameEn: 'Mars', color: '#E27B58', size: 8, distance: 180, speed: 0.9, orbitColor: '#E27B5840' }, { id: 'jupiter', name: '木星', nameEn: 'Jupiter', color: '#D6A574', size: 28, distance: 260, speed: 0.5, orbitColor: '#ffffff20' }, { id: 'saturn', name: '土星', nameEn: 'Saturn', color: '#F4D03F', size: 24, distance: 340, speed: 0.35, orbitColor: '#ffffff20', hasRing: true }, { id: 'uranus', name: '天王星', nameEn: 'Uranus', color: '#73C6B6', size: 16, distance: 410, speed: 0.2, orbitColor: '#ffffff15' }, { id: 'neptune', name: '海王星', nameEn: 'Neptune', color: '#5DADE2', size: 15, distance: 470, speed: 0.15, orbitColor: '#ffffff15' }, ]; export const SolarSystemView = () => { // 动画状态：仅仅使用一个 frame 计数器或者 time 值来驱动渲染 // 使用 ref 存储实际的累积时间，避免闭包问题 const timeRef = useRef(0); // 使用 state 触发重绘 const [, setTick] = useState(0); // 动画循环引用 const requestRef = useRef(); // 鼠标交互状态 (用于视差或暂停) const [hoveredPlanet, setHoveredPlanet] = useState(null); // 1. 初始化星空背景 (只生成一次) 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() * 0.05 + 0.01, })); }, []); // 2. 初始化小行星带 (火星和木星之间) const asteroidBelt = useMemo(() => { return Array.from({ length: 120 }).map((_, i) => { const angle = (Math.PI * 2 * i) / 120; const dist = 220 + (Math.random() * 30 - 15); return { angleOffset: Math.random() * Math.PI * 2, dist, size: Math.random() * 1.5 + 0.5, speed: 0.7, // 介于火星和木星之间 }; }); }, []); // 动画主循环 useEffect(() => { const animate = () => { // 增加时间增量，如果 hover 某个行星，可以减慢时间流逝 (这里暂不减慢，保持流畅) timeRef.current += 0.5; // 触发 React 更新 setTick(prev => prev + 1); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 计算当前帧的行星位置 const t = timeRef.current; return ( ); };