《交互式桁架结构力学性能在线实验系统》技术开发报告
项目属性：《建筑力学与结构》数字化建设成果
实验模块：静定拱与桁架内力分析 · 交互式虚拟仿真实验
技术架构：纯客户端单文件架构（HTML5 Canvas 2D + ES6+ + Tailwind CSS）
1. 系统技术架构与层级设计
系统采用纯客户端单文件架构（Single-File Web Application），无后端服务器与数据库依赖，所有运算与渲染完全在浏览器本地执行：
| 架构层级 | 采用技术 | 核心职责 |
|---|---|---|
| 表现层 | Tailwind CSS + SVG | 现代化响应式布局，模式切换、支座选择、荷载调节面板 |
| 交互渲染层 | HTML5 Canvas 2D | 高分屏高清抗锯齿重绘，网格吸附与矢量外力箭头 |
| 力学求解核心 | 原生 JavaScript (ES6+) | 矩阵位移法有限元求解、罚函数边界、高斯消元 |
| 失稳物理引擎 | 原生 JavaScript (ES6+) | Verlet 积分、杆长约束迭代、重力微扰与碰撞检测 |
2. 核心功能与关键算法实现
2.1 交互式几何拓扑建模与规范强校验
- 自适应网格吸附系统：画布构建基准步长 $S = 40,\text{px}$ 的正交网格，鼠标操作时坐标自动量化吸附：
$$x_{\text{snap}} = \text{round}(x / S) \times S, \quad y_{\text{snap}} = \text{round}(y / S) \times S$$
- 二合一交互模式：点击空白网格交点自动创建铰接节点；点击已有节点即刻触发光晕选中态，并在右侧属性面板同步展示支座约束与荷载数据。
- 单元拓扑拼装：依次拾取两节点构建二力杆构件，实时绘制弹性虚线辅助对齐，支持
Esc键快捷放弃。 - 力学建模规范智能拦截：基于”所有构件均为两端铰接二力杆”的假定，内置点-线空间投影距离检测算法。若学生在已有杆件跨中尝试添加节点，系统自动拦截并弹出红色警告窗，强化**”先布置节点，再在节点间布置杆件，严禁在杆件上布置节点”**的力学建模规范。
2.2 边界约束与节点外载荷系统
- 约束支座类型：
- 固定铰支座 (Pinned)：限制 $X$ 与 $Y$ 双向自由度（$u=0,, v=0$）
- 滚动铰支座 (Roller)：仅限制 $Y$ 向垂直自由度（$v=0$）
- 自由节点 (Free)：无约束
- 双向荷载交互调节：属性面板以”选择节点，滑动数值杆添加节点荷载“为引导，提供水平力 $F_x$ 与垂直力 $F_y$ 双向滑块（$\pm 100,\text{kN}$），画布动态绘制粉色外力矢量箭头与数值标签。
2.3 有限元力学求解器（矩阵位移法）
系统采用经典有限元矩阵位移法对平面铰接桁架进行准静态精确内力求解。
(1) 单元刚度矩阵构建
设任意杆单元 $e$ 连接节点 $1(x_1, y_1)$ 与节点 $2(x_2, y_2)$，杆长与方向余弦为：
$$L = \sqrt{(x_2-x_1)^2 + (y_2-y_1)^2}, \quad \lambda_x = \frac{x_2-x_1}{L}, \quad \lambda_y = \frac{y_2-y_1}{L}$$
经局部-整体坐标系旋转变换后，其 $4 \times 4$ 单元刚度矩阵 $k^e$ 为（自由度顺序：$u_1, v_1, u_2, v_2$）：
$$k^e = \frac{EA}{L} \begin{bmatrix} \lambda_x^2 & \lambda_x \lambda_y & -\lambda_x^2 & -\lambda_x \lambda_y \\ \lambda_x \lambda_y & \lambda_y^2 & -\lambda_x \lambda_y & -\lambda_y^2 \\ -\lambda_x^2 & -\lambda_x \lambda_y & \lambda_x^2 & \lambda_x \lambda_y \\ -\lambda_x \lambda_y & -\lambda_y^2 & \lambda_x \lambda_y & \lambda_y^2 \end{bmatrix}$$
其中 $EA$ 为截面轴向刚度（系统统一取 $EA = 10^7$ 作为教学模拟值）。
(2) 总刚组装与大数罚函数边界处理
全局刚度矩阵集成：根据节点编号拓扑，将各杆单元的 $k^e$ 叠加至 $2n \times 2n$ 的总体刚度矩阵 $K$ 中。
大数罚函数法（Penalty Method）施加支座：在受约束自由度 $i$ 对应的对角元素附加极大刚度值 $\alpha = 10^{12}$，同时对应外力置零：
$$K_{ii} = K_{ii} + \alpha, \quad F_i = 0$$
该方法无需改变矩阵阶数与内存布局，运算效率高且数值极其稳定。
(3) 线性方程组求解与内力可视化
采用列主元高斯消元法求解总体刚度平衡方程 $K \cdot U = F$，获取各节点位移向量 $U$。
求得各节点位移后，提取构件两端节点位移分量 $(u_1, v_1, u_2, v_2)$，计算轴向内力 $N$：
$$N = \frac{EA}{L} \left( -\lambda_x u_1 – \lambda_y v_1 + \lambda_x u_2 + \lambda_y v_2 \right)$$
受力状态彩色拓扑渲染：
| 判定条件 | 状态 | 渲染颜色 | 说明 |
|---|---|---|---|
| $N > 0$ | 受拉 (Tension) | 蓝色 | 杆件被拉伸 |
| $N < 0$ | 受压 (Compression) | 红色 | 杆件被压缩 |
| $N \approx 0$ | 零杆 (Zero Force) | 灰色 | 杆件无轴力 |
杆件线宽随归一化轴力大小 $|N|/N_{\max}$ 动态加粗，直观呈现桁架内部传力路径与内力流分布。
2.4 几何可变体系与大变形失稳倒塌物理引擎
针对传统软件失稳仅提示”刚度奇异”导致学生理解困难的问题，系统首创引入基于位置的物理动力学（PBD / Verlet Integration）大变形倒塌引擎：
① 失稳状态自动判别：消元过程中主元接近于 0（$|a_{ii}| < 10^{-8}$）或结构未满足必要支座约束时，自动诊断为几何可变或瞬变体系。
② 非线性位置积分（Verlet Integration）：记录结构初始坐标，叠加微弱非对称扰动初速度，在时间步长 $\Delta t$ 内执行积分位移预测：
$$x_{t+\Delta t} = x_t + (x_t – x_{t-\Delta t}) \cdot \gamma + a \cdot \Delta t^2$$
其中 $\gamma = 0.98$ 为空气阻尼衰减系数，$a$ 综合外荷载与伪重力加速度。
③ 刚性杆长距离约束迭代：为确保杆件在动态失稳中保持原有刚性长度 $L_0$，通过多次迭代修正节点间距，配合地面弹性碰撞与摩擦减速，生动展现未布设斜杆的四边形机构在荷载下的倾斜、晃动、失稳倒塌与触地全过程，生动诠释**”三角形是桁架基本几何不变单元”**的力学本质。
3. 关键技术指标与性能实测
| 评估维度 | 实测参数 | 教学与工程应用价值 |
|---|---|---|
| 部署形态 | HTML 文件（约 76 KB） | 零环境配置，免编译打包，离线即开即用 |
| 求解耗时 | ≤ 2 ms（20~50 杆常用桁架） | 拖拽节点与调节荷载时实时无感重算 |
| 动画帧率 | 稳定 60 FPS | Canvas 2D 硬件加速，极低资源消耗 |
| 防错机制 | 杆身布点智能拦截 | 规避二力杆力学模型失真，培养工程严谨性 |
，转载注明来源）