'use client'; import React, { useEffect, useState, useRef } from 'react'; const ElectromagneticWave = () => { const [time, setTime] = useState(0); const requestRef = useRef(); const animate = (t: number) => { setTime(t / 1000); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); const width = 1000; const height = 600; const centerX = 150; const centerY = 300; const waveLength = 200; const amplitude = 80; const speed = 4; // 生成波形路径 const generateEFieldPath = () => { let path = `M ${centerX} ${centerY}`; for (let x = 0; x < 700; x += 5) { const y = centerY + Math.sin((x / waveLength) * Math.PI * 2 - time * speed) * amplitude; path += ` L ${centerX + x} ${y}`; } return path; }; const generateBFieldPath = () => { let path = `M ${centerX} ${centerY}`; for (let x = 0; x < 700; x += 5) { // 模拟3D透视效果，磁场在水平面（XZ平面）振荡 const offset = Math.sin((x / waveLength) * Math.PI * 2 - time * speed) * amplitude * 0.6; path += ` L ${centerX + x + offset} ${centerY - offset * 0.5}`; } return path; }; // 生成电场矢量线条 const renderVectors = (type: 'E' | 'B') => { const vectors = []; const step = 40; for (let x = 20; x < 680; x += step) { const val = Math.sin((x / waveLength) * Math.PI * 2 - time * speed); const currentAmp = val * amplitude; if (type === 'E') { vectors.push( ); // 箭头 if (Math.abs(currentAmp) > 10) { vectors.push( 0 ? 5 : -5)} L ${centerX + x} ${centerY + currentAmp} L ${centerX + x + 3} ${centerY + currentAmp - (currentAmp > 0 ? 5 : -5)}`} fill="none" stroke="#00f2ff" strokeWidth="2" /> ); } } else { const ox = currentAmp * 0.6; const oy = -currentAmp * 0.3; vectors.push( ); // 箭头 if (Math.abs(currentAmp) > 10) { vectors.push( ); } } } return vectors; }; const chargeY = centerY + Math.sin(-time * speed) * amplitude; return (

); }; export default ElectromagneticWave;