'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; const FOCAL_LENGTH = 120; // 焦距 f export default function ConvexLensImaging() { 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 () => cancelAnimationFrame(requestRef.current!); }, []); // 计算物体位置 (u) - 在 2f 和 f 之间往复运动，演示成像变化 // f=120, 2f=240. 范围设定在 180 (1.5f) 到 350 (>2f) 之间 const cycle = Math.sin(time * 0.8); // -1 to 1 const u = 265 + cycle * 85; // Object distance (u), range 180 ~ 350 // 计算像位置 (v) 使用透镜公式: 1/f = 1/u + 1/v => v = (u*f) / (u-f) const v = (u * FOCAL_LENGTH) / (u - FOCAL_LENGTH); // 计算放大倍率 M = -v/u const m = -v / u; // 物体高度 const h_obj = 60; // 像高度 const h_img = h_obj * m; // 颜色定义 const colors = { bg: '#0f172a', grid: '#1e293b', axis: '#475569', lens: '#a5f3fc', object: '#facc15', // Yellow image: '#22d3ee', // Cyan ray1: '#f87171', // Red-ish ray2: '#4ade80', // Green-ish ray3: '#c084fc', // Purple-ish text: '#94a3b8' }; // 生成网格 const gridLines = useMemo(() => { const lines = []; const step = 50; for (let x = 0; x <= VIEW_WIDTH; x += step) { lines.push(); } for (let y = 0; y <= VIEW_HEIGHT; y += step) { lines.push(); } return lines; }, []); // 光线路径计算 // 坐标系以透镜中心为 (0,0)，SVG中需偏移 (CENTER_X, CENTER_Y) // 物体在左侧 (-u, -h_obj) // Ray 1: 平行于主光轴 -> 经透镜折射过右焦点 F const r1_start = { x: -u, y: -h_obj }; const r1_lens = { x: 0, y: -h_obj }; const r1_focus = { x: FOCAL_LENGTH, y: 0 }; const r1_end = { x: v + 100, y: (h_img / v) * (v + 100) }; // 延长线 // Ray 2: 过光心 -> 不改变方向 const r2_start = { x: -u, y: -h_obj }; const r2_end = { x: v + 100, y: h_img * ((v + 100) / v) }; // 延长线 // Ray 3: 过左焦点 F -> 经透镜折射平行于主光轴 const r3_start = { x: -u, y: -h_obj }; const r3_lens = { x: 0, y: h_img }; // 此时像在下方，h_img为负，但在平行光出射时高度等于像高 const r3_end = { x: v + 100, y: h_img }; // 平行出射 // 辅助函数：将逻辑坐标转换为SVG坐标 const toSVG = (x: number, y: number) => `${CENTER_X + x},${CENTER_Y + y}`; return ( ); }