import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const SUN_RADIUS = 50; const EARTH_RADIUS = 25; const ORBIT_RX = 380; // Orbit X radius const ORBIT_RY = 120; // Orbit Y radius (flattened for 3D effect) const AXIS_TILT = 23.5; // Earth's tilt in degrees // Helper for generating random stars const generateStars = (count) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.5 + 0.3, })); }; export const EarthScienceDemo = () => { // Animation state (driven by Ref for performance, synced to state for render) const [frame, setFrame] = useState(0); const animationRef = useRef({ orbitAngle: 0, // Radians (0 to 2PI) rotationAngle: 0, // Degrees (0 to 360) dayCount: 0, lastTime: 0 }); // Static assets const stars = useMemo(() => generateStars(150), []); useEffect(() => { let rafId; const loop = (time) => { const state = animationRef.current; if (!state.lastTime) state.lastTime = time; const delta = time - state.lastTime; // Update logic // Revolution speed (Orbital movement) const orbitSpeed = 0.002; state.orbitAngle = (state.orbitAngle + orbitSpeed) % (Math.PI * 2); // Rotation speed (Self-spin) - much faster than revolution // In reality 365 rotations per revolution, here reduced for visual clarity but still fast state.rotationAngle = (state.rotationAngle + 2) % 360; // Calculate approximate "Days" passed based on orbit (just for educational UI) // 0 to 2PI = 365 days const days = Math.floor((state.orbitAngle / (Math.PI * 2)) * 365); state.dayCount = days; setFrame(prev => prev + 1); // Trigger render state.lastTime = time; rafId = requestAnimationFrame(loop); }; rafId = requestAnimationFrame(loop); return () => { cancelAnimationFrame(rafId); }; }, []); // Derived calculations for rendering const { orbitAngle, rotationAngle, dayCount } = animationRef.current; // Earth Position (3D projection) // We use Math.cos for X and Math.sin for Y to create the ellipse // Note: coordinate system (0,0) is center of SVG usually, but here we center at VIEW_WIDTH/2 const centerX = VIEW_WIDTH / 2; const centerY = VIEW_HEIGHT / 2; const earthX = centerX + Math.cos(orbitAngle) * ORBIT_RX; const earthY = centerY + Math.sin(orbitAngle) * ORBIT_RY; // Scale Earth based on Y position to simulate depth (closer = bigger) // Y range is -120 to +120. Scale range 0.8 to 1.2 const depthScale = 1 + (Math.sin(orbitAngle) * 0.2); // Z-Index simulation: If sin(angle) < 0, Earth is behind Sun. // However, for educational clarity, we usually don't want the sun to fully obscure the earth unless necessary. // We will draw orbit path behind everything, then Sun, then Earth (or Earth behind Sun if far back). const isBehindSun = Math.sin(orbitAngle) < -0.1; // Small buffer // Season Calculation // We assume standard diagram: // Right (0 rad) = Winter Solstice (Northern Hemisphere tilts away) // Left (PI rad) = Summer Solstice (Northern Hemisphere tilts towards) // Top (3PI/2 rad) = Spring Equinox // Bottom (PI/2 rad) = Autumn Equinox // Note: This depends on the fixed tilt direction. We will fix tilt to the Right (/ shape). let currentSeason = ""; // Normalize angle to 0-360 deg for easier logic const angleDeg = (orbitAngle * 180 / Math.PI + 360) % 360; if (angleDeg >= 315 || angleDeg < 45) currentSeason = "冬至 (Winter)"; else if (angleDeg >= 45 && angleDeg < 135) currentSeason = "春分 (Spring)"; else if (angleDeg >= 135 && angleDeg < 225) currentSeason = "夏至 (Summer)"; else currentSeason = "秋分 (Autumn)"; // Shadow Rotation // The shadow must always face away from the Sun. // Since the Earth group translates, we need to rotate the shadow mask to oppose the center. // The angle from Earth to Sun is (orbitAngle + PI). // Visual rotation needs to compensate for the Earth's position. const shadowRotation = (orbitAngle * 180 / Math.PI) + 90; return ( ); };