```jsx 'use client'; import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import * as Lucide from 'lucide-react'; // ========================================== // 核心常量配置 // ========================================== const CONSTANTS = { WIDTH: 1200, HEIGHT: 700, COLORS: { BG: '#02020A', GRID: '#00FFFF', LASER: '#FFFFFF', TEXT_MAIN: '#E0F2FE', TEXT_SUB: '#64748B', ACCENT: '#0EA5E9' }, POS: { EMITTER: { X: 150, Y: 350 }, PRISM: { X: 600, Y: 350 }, SPECTRUM_START: 600, SPECTRUM_END: 1100, SPECTRUM_TOP: 100, SPECTRUM_BOTTOM: 600 } }; // ========================================== // 数学/物理辅助函数 // ========================================== const easeOutExpo = (x) => (x === 1 ? 1 : 1 - Math.pow(2, -10 * x)); const easeInOutCubic = (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; // 生成波形路径 (模拟 D3.line) const generateWavePath = (points) => { if (points.length === 0) return ""; const first = points[0]; let path = `M ${first.x} ${first.y}`; for (let i = 1; i < points.length; i++) { path += ` L ${points[i].x} ${points[i].y}`; } return path; }; // ========================================== // 主组件 // ========================================== export default function OpticalPrismLab() { // ---------------------------------------- // Refs (Mutable State) // ---------------------------------------- const frameRef = useRef(0); const rafRef = useRef(null); const startTimeRef = useRef(0); // 粒子系统 Ref (避免每帧 GC) const particlesRef = useRef( Array.from({ length: 80 }).map(() => ({ x: Math.random() * (CONSTANTS.POS.SPECTRUM_END - CONSTANTS.POS.SPECTRUM_START), y: Math.random(), // 0-1 normalized vertical position speed: Math.random() * 3 + 1, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.6 + 0.2, phaseOffset: Math.random() * Math.PI * 2 })) ); // ---------------------------------------- // State (Render Trigger) // ---------------------------------------- const [renderState, setRenderState] = useState({ phase: 0, // 0:Charge, 1:Shoot, 2:Expand, 3:Scan laserLength: 0, prismRotation: 0, spectrumScale: 0, scannerX: 0, wavePath: "", dataWavelength: 0, emitterPulse: 0, particles: [], // Copy for render elapsed: 0 }); // ---------------------------------------- // 静态资源 Memo // ---------------------------------------- const gridPath = useMemo(() => { let d = ""; // 垂直线 for (let x = 0; x <= CONSTANTS.WIDTH; x += 50) { d += `M${x},0 L${x},${CONSTANTS.HEIGHT} `; } // 水平线 for (let y = 0; y <= CONSTANTS.HEIGHT; y += 50) { d += `M0,${y} L${CONSTANTS.WIDTH},${y} `; } return d; }, []); // ---------------------------------------- // 动画主循环 // ---------------------------------------- useEffect(() => { startTimeRef.current = performance.now(); const loop = (timestamp) => { const elapsed = timestamp - startTimeRef.current; frameRef.current++; // --- 阶段控制逻辑 --- let phase = 0; let laserLen = 0; let specScale = 0; let scanX = 0; // Phase 0: 充能 (0ms - 1200ms) if (elapsed < 1200) { phase = 0; } // Phase 1: 激光发射 (1200ms - 1800ms) else if (elapsed < 1800) { phase = 1; const t = Math.min((elapsed - 1200) / 600, 1); laserLen = easeOutExpo(t) * (CONSTANTS.POS.PRISM.X - CONSTANTS.POS.EMITTER.X); } // Phase 2: 光谱展开 (1800ms - 3000ms) else if (elapsed < 3000) { phase = 2; laserLen = CONSTANTS.POS.PRISM.X - CONSTANTS.POS.EMITTER.X; const t = Math.min((elapsed - 1800) / 1200, 1); specScale = easeInOutCubic(t); } // Phase 3: 扫描循环 (3000ms +) else { phase = 3; laserLen = CONSTANTS.POS.PRISM.X - CONSTANTS.POS.EMITTER.X; specScale = 1; // 扫描循环周期 4秒 const scanT = ((elapsed - 3000) % 4000) / 4000; scanX = scanT * (CONSTANTS.POS.SPECTRUM_END - CONSTANTS.POS.SPECTRUM_START); } // --- 粒子物理更新 --- const activeParticles = []; if (phase >= 2) { const spectrumWidth = CONSTANTS.POS.SPECTRUM_END - CONSTANTS.POS.SPECTRUM_START; particlesRef.current.forEach(p => { // 移动 p.x += p.speed; // 循环 if (p.x > spectrumWidth * specScale) { p.x = 0; p.y = Math.random(); } // 仅当在当前展开范围内时才显示 if (p.x <= spectrumWidth * specScale) { activeParticles.push({ ...p }); } }); } // --- 波形计算 (Data Viz) --- let waveD = ""; let currentWavelength = 0; if (phase === 3) { const wavePoints = []; const startX = CONSTANTS.POS.SPECTRUM_START; const width = CONSTANTS.POS.SPECTRUM_END - startX; const numPoints = 100; // 计算当前扫描线对应的波长 (750nm Red -> 380nm Violet) const scanRatio = scanX / width; currentWavelength = Math.floor(750 - scanRatio * (750 - 380)); // 扫描线附近的局部波形震动 for (let i = 0; i <= numPoints; i++) { const ratio = i / numPoints; const px = startX + ratio * width; // 距离扫描线的距离影响振幅 const distToScan = Math.abs(px - (startX + scanX)); const influence = Math.max(0, 1 - distToScan / 80); // 80px 影响范围 if (influence > 0) { // 频率随位置变化 (左侧低频红光，右侧高频紫光) const freq = 0.1 + ratio * 0.4; const amp = 30 * influence * Math.sin(elapsed * 0.01); const py = 630 + Math.sin(frameRef.current * freq + i) * amp; wavePoints.push({ x: px, y: py }); } else { wavePoints.push({ x: px, y: 630 }); } } waveD = generateWavePath(wavePoints); } // --- 综合状态更新 --- setRenderState({ phase, laserLength: laserLen, prismRotation: elapsed * 0.02, spectrumScale: specScale, scannerX: scanX, wavePath: waveD, dataWavelength: currentWavelength, emitterPulse: 0.5 + 0.5 * Math.sin(elapsed * 0.005), particles: activeParticles, elapsed }); rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, []); // 依赖空数组，确保只启动一次 // ---------------------------------------- // 渲染辅助计算 // ---------------------------------------- // 计算光谱扇形的路径 const spectrumPath = useMemo(() => { // 简单的梯形/扇形模拟 return ` M ${CONSTANTS.POS.PRISM.X} ${CONSTANTS.POS.PRISM.Y} L ${CONSTANTS.POS.SPECTRUM_END} ${CONSTANTS.POS.SPECTRUM_TOP} L ${CONSTANTS.POS.SPECTRUM_END} ${CONSTANTS.POS.SPECTRUM_BOTTOM} Z `; }, []); return (

{/* 根容器：固定比例 1200x700 */}

{/* SVG 画布 */} {/* DOM UI 层 (确保文字清晰度) */}

精密光学实验室

PRECISION OPTICS LAB // SIMULATION

{/* 右上角数据监控 */}

TIME: {(renderState.elapsed / 1000).toFixed(2)}s

FRAME: {frameRef.current}

STATUS: {['CHARGING', 'EMITTING', 'REFRACTING', 'ANALYZING'][renderState.phase]}

); } ```