```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const MOON_RADIUS = 140; // 稍微增大月球尺寸以增强视觉冲击力 const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2 - 20; // 星星生成逻辑 const generateStars = (count) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.8 + 0.2, blinkDuration: Math.random() * 3 + 2, // 闪烁周期 delay: Math.random() * 5, })); }; // 月相名称映射 (中文 + 专业代码) const getPhaseInfo = (phase) => { const p = phase % 1; if (p < 0.02 || p > 0.98) return { name: '新月', sub: 'NEW MOON', code: 'NM-00', type: 'new' }; if (p < 0.23) return { name: '蛾眉月 (盈)', sub: 'WAXING CRESCENT', code: 'WXC-01', type: 'waxing' }; if (p < 0.27) return { name: '上弦月', sub: 'FIRST QUARTER', code: 'FQ-02', type: 'waxing' }; if (p < 0.48) return { name: '盈凸月', sub: 'WAXING GIBBOUS', code: 'WXG-03', type: 'waxing' }; if (p < 0.52) return { name: '满月', sub: 'FULL MOON', code: 'FM-04', type: 'full' }; if (p < 0.73) return { name: '亏凸月', sub: 'WANING GIBBOUS', code: 'WNG-05', type: 'waning' }; if (p < 0.77) return { name: '下弦月', sub: 'LAST QUARTER', code: 'LQ-06', type: 'waning' }; return { name: '残月 (亏)', sub: 'WANING CRESCENT', code: 'WNC-07', type: 'waning' }; }; export default function MoonPhase3D() { const [phase, setPhase] = useState(0); const [rotation, setRotation] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 生成静态星星数据 const stars = useMemo(() => generateStars(200), []); // 生成环形刻度 const ringTicks = useMemo(() => { return Array.from({ length: 72 }, (_, i) => { const angle = (i * 5) * (Math.PI / 180); const r1 = MOON_RADIUS + 40; const r2 = MOON_RADIUS + 48; return { x1: CENTER_X + Math.cos(angle) * r1, y1: CENTER_Y + Math.sin(angle) * r1, x2: CENTER_X + Math.cos(angle) * r2, y2: CENTER_Y + Math.sin(angle) * r2, isMajor: i % 9 === 0 }; }); }, []); // 动画循环 const animate = () => { const now = Date.now(); const elapsed = now - startTimeRef.current; // 月相周期：15秒完成一次全循环 const cycleDuration = 15000; const p = (elapsed % cycleDuration) / cycleDuration; // UI 旋转动画 const rot = (elapsed / 100) % 360; setPhase(p); setRotation(rot); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 计算月相的光照路径 (核心算法) const getMoonPath = (p) => { const r = MOON_RADIUS; const cx = CENTER_X; const cy = CENTER_Y; // 0=新月, 0.5=满月, 1=新月 // 我们需要计算晨昏线 (Terminator Line) const angle = p * 2 * Math.PI; const sweep = -Math.cos(angle); // -1 (满) 到 1 (新) const terminatorX = r * sweep; const isWaxing = p <= 0.5; const top = `${cx},${cy - r}`; const bottom = `${cx},${cy + r}`; // 基础半圆路径 let d = ''; if (isWaxing) { // 盈：右侧亮 // 外弧：从上到下画右半圆 d = `M ${top} A ${r} ${r} 0 0 1 ${bottom}`; // 内弧：根据 sweep 正负决定是凸还是凹 const sweepFlag = p > 0.25 ? 0 : 1; d += ` A ${Math.abs(terminatorX)} ${r} 0 0 ${sweepFlag} ${top}`; } else { // 亏：左侧亮 // 外弧：从下到上画左半圆 d = `M ${bottom} A ${r} ${r} 0 0 1 ${top}`; // 内弧 const sweepFlag = p > 0.75 ? 0 : 1; d += ` A ${Math.abs(terminatorX)} ${r} 0 0 ${sweepFlag} ${bottom}`; } return d; }; const phaseInfo = getPhaseInfo(phase); const illumination = ((1 - Math.cos(phase * 2 * Math.PI)) / 2 * 100).toFixed(1); const moonAge = (phase * 29.53).toFixed(1); // 月龄 return (

); } ```