```tsx 'use client'; import React, { useState, useEffect, useMemo } from 'react'; export default function OpticalImagingSciFi() { const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 物理常量 const FOCAL_LENGTH = 160; // 焦距 f const OBJ_BASE_HEIGHT = 90; // 物体基础高度 // 动画状态 const [time, setTime] = useState(0); // 动画循环 useEffect(() => { let animationFrameId; const animate = () => { setTime(t => t + 0.008); // 调整速度 animationFrameId = requestAnimationFrame(animate); }; animationFrameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationFrameId); }, []); // 物理计算核心 // 物距 u 在 1.3f 到 3.0f 之间摆动，避免成像过大或过小 const u = useMemo(() => { return 2.15 * FOCAL_LENGTH + Math.sin(time) * (0.85 * FOCAL_LENGTH); }, [time]); // 透镜公式: 1/f = 1/u + 1/v => v = uf / (u - f) const v = (u * FOCAL_LENGTH) / (u - FOCAL_LENGTH); // 放大率 m = -v/u const m = -v / u; const imgHeight = OBJ_BASE_HEIGHT * m; // 负值代表倒立 // 坐标系统 const objX = CENTER_X - u; const objY = CENTER_Y - OBJ_BASE_HEIGHT; const imgX = CENTER_X + v; const imgY = CENTER_Y - imgHeight; // 光线路径计算 // 1. 平行主光轴 -> 过焦点 F const ray1Points = [ [objX, objY], [CENTER_X, objY], [imgX, imgY], [imgX + (imgX - CENTER_X) * 0.3, imgY + (imgY - CENTER_Y) * 0.3] // 延长线 ]; // 2. 过光心 O -> 传播方向不变 const ray2Points = [ [objX, objY], [imgX, imgY], [imgX + (imgX - objX) * 0.2, imgY + (imgY - objY) * 0.2] // 延长线 ]; // 3. 过焦点 F' -> 平行主光轴 const ray3Points = [ [objX, objY], [CENTER_X, imgY], [imgX, imgY], [imgX + 150, imgY] // 延长线 ]; // 辅助函数：生成路径字符串 const makePath = (points) => points.map((p, i) => (i === 0 ? 'M' : 'L') + ` ${p[0]},${p[1]}`).join(' '); const formatNum = (n) => Math.abs(n).toFixed(0); const formatFloat = (n) => Math.abs(n).toFixed(2); return (

); } ```