'use client'; import React, { useState, useEffect, useRef } from 'react'; const PhysicsCentripetalDemo = () => { const [time, setTime] = useState(0); const requestRef = useRef(); // 物理常量与配置 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2 + 50; const R = 250; // 圆盘半径 (像素) const BLOCK_R = 180; // 木块距离圆心距离 (像素) const TILT = 0.35; // 3D 视角倾斜系数 const OMEGA = 1.5; // 角速度 (rad/s) // 模拟计算值 const G_CONST = 9.8; const MU_CALC = ((OMEGA * OMEGA * (BLOCK_R / 100)) / G_CONST).toFixed(2); // 简单的模拟数值展示 // 动画循环 const animate = (t: number) => { // 转换时间为秒，保持平滑 setTime(t / 1000); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 当前角度 const theta = time * OMEGA; // 木块位置计算 (透视投影) const blockX = CENTER_X + BLOCK_R * Math.cos(theta); const blockY = CENTER_Y + BLOCK_R * Math.sin(theta) * TILT; // 判断木块在圆盘前还是后 (用于遮挡关系) const isBack = Math.sin(theta) < 0; // 颜色定义 const colors = { bg: '#0f172a', disc: '#1e293b', discGrid: '#334155', block: '#f59e0b', // Amber blockSide: '#b45309', forceFriction: '#ef4444', // Red forceNormal: '#3b82f6', // Blue forceGravity: '#10b981', // Emerald text: '#e2e8f0', highlight: '#06b6d4' // Cyan }; // 辅助函数：生成箭头路径 const createArrow = (x1: number, y1: number, x2: number, y2: number) => { return ( ); }; return (

); }; export default PhysicsCentripetalDemo;