'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; export const MoonOrbitView = () => { // 动画状态：角度 (0 ~ 2PI) const [angle, setAngle] = useState(0); const requestRef = useRef(); // 轨道参数 const centerX = VIEW_WIDTH / 2; const centerY = VIEW_HEIGHT / 2; const orbitRadiusX = 350; // 椭圆长轴 const orbitRadiusY = 120; // 椭圆短轴 (模拟3D视角倾斜) const earthRadius = 80; const moonRadius = 20; const speed = 0.005; // 运动速度 // 生成背景星空 const stars = useMemo(() => { return Array.from({ length: 150 }, (_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.8 + 0.2, blinkDuration: Math.random() * 3 + 2 + 's' })); }, []); // 动画循环 useEffect(() => { const animate = () => { setAngle(prev => (prev + speed) % (Math.PI * 2)); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // 计算月球位置 (椭圆轨道) const moonX = centerX + Math.cos(angle) * orbitRadiusX; const moonY = centerY + Math.sin(angle) * orbitRadiusY; // 模拟3D透视：当sin(angle) < 0 时，月球在地球后面 (scale变小，亮度变暗) // 当sin(angle) > 0 时，月球在地球前面 const isMoonBehind = Math.sin(angle) < 0; // 根据透视调整月球大小和亮度 const scaleFactor = 1 + (Math.sin(angle) * 0.3); // 0.7 ~ 1.3 const currentMoonRadius = moonRadius * scaleFactor; // 阴影计算 (假设光源在左上方) // 地球自转效果 (通过移动纹理/渐变模拟) const earthRotation = (-angle * 50) % 200; return ( ); };