'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 ORBIT_TILT = 0.3; // 轨道倾斜度 (0-1), 越小越扁 const TIME_SPEED = 0.5; // 全局时间流速 const TRAIL_LENGTH = 30; // 轨迹长度（段数） // 行星数据配置 // 增加 rotationSpeed (自转速度), textureType (纹理类型) const PLANETS_DATA = [ { name: '水星', en: 'MERCURY', r: 80, size: 5, speed: 2.0, rotationSpeed: 2.0, color: '#A5A5A5', textureType: 'crater' }, { name: '金星', en: 'VENUS', r: 120, size: 9, speed: 1.5, rotationSpeed: 1.5, color: '#E3BB76', textureType: 'atmosphere' }, { name: '地球', en: 'EARTH', r: 170, size: 10, speed: 1.0, rotationSpeed: 3.0, color: '#4F83CC', textureType: 'land', moon: true }, { name: '火星', en: 'MARS', r: 220, size: 7, speed: 0.8, rotationSpeed: 2.8, color: '#E27B58', textureType: 'crater' }, { name: '木星', en: 'JUPITER', r: 320, size: 28, speed: 0.4, rotationSpeed: 5.0, color: '#C88B3A', textureType: 'banded' }, { name: '土星', en: 'SATURN', r: 420, size: 24, speed: 0.3, rotationSpeed: 4.5, color: '#C5AB6E', textureType: 'banded', ring: true }, { name: '天王星', en: 'URANUS', r: 500, size: 16, speed: 0.2, rotationSpeed: 3.0, color: '#65B6AC', textureType: 'atmosphere' }, { name: '海王星', en: 'NEPTUNE', r: 580, size: 15, speed: 0.15, rotationSpeed: 3.2, color: '#3E54E8', textureType: 'atmosphere' }, ]; // 辅助函数：计算行星在特定时间的位置 const getPlanetPosition = (planet, t) => { const angle = t * planet.speed + (planet.r * 0.5); // 初始偏移 const x = CENTER_X + planet.r * Math.cos(angle); const y = CENTER_Y + planet.r * Math.sin(angle) * ORBIT_TILT; const z = planet.r * Math.sin(angle); // 深度 return { x, y, z, angle }; }; export const SolarSystemView = () => { const [time, setTime] = useState(0); const requestRef = useRef(); // 1. 生成背景星空 (只运行一次) const stars = useMemo(() => { return Array.from({ length: 200 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() < 0.9 ? Math.random() * 1.2 : Math.random() * 2 + 1, opacity: Math.random() * 0.6 + 0.2, twinkleSpeed: Math.random() * 3 + 1, })); }, []); // 2. 动画循环 const animate = () => { setTime(prev => prev + 0.01 * TIME_SPEED); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 3. 计算当前帧的所有渲染对象（太阳、行星、轨迹） const renderData = useMemo(() => { const objects = []; // 太阳 objects.push({ type: 'sun', x: CENTER_X, y: CENTER_Y, z: 0, size: 55, }); // 行星 PLANETS_DATA.forEach((planet) => { const currentPos = getPlanetPosition(planet, time); // 计算轨迹点 (基于过去的时间点计算，无需存储历史状态，保证平滑) const trailPoints = []; for (let i = 0; i < TRAIL_LENGTH; i++) { const trailTime = time - (i * 0.02); // 步长 const pos = getPlanetPosition(planet, trailTime); trailPoints.push(`${pos.x},${pos.y}`); } objects.push({ type: 'planet', ...planet, ...currentPos, trailPath: trailPoints.join(' '), // SVG polyline points string }); }); // Z-Sort: 决定渲染顺序 (远处的先画) return objects.sort((a, b) => a.z - b.z); }, [time]); return (

{/* --- UI 层：科技感仪表盘 --- */}

{/* 左上角：标题与状态 */}

SYSTEM ONLINE

SOLAR SYSTEM

实时引力模拟 // 3D PROJECTION

{/* 右上角：环境参数 */}

FPS MONITOR

60.0 HZ

{[...Array(5)].map((_, i) => (

))}

{/* 左下角：数据读取 */}

ORBIT_TILT: {ORBIT_TILT.toFixed(2)} RAD

VIEW_DEPTH: 100%

OBJECTS: {PLANETS_DATA.length + 1} DETECTED

{/* 右下角：时间流逝 */}

SIMULATION TIME

T+{Math.floor(time * 100).toString().padStart(5, '0')} EPOCH

{/* --- 渲染层：SVG 动画 --- */}

); };