Node.js React Three.js 上的杆件 FEM 计算

使用 Node.js、React 和 Three.js 实现的云端桁架有限元分析

这个基于云端的单页应用（SPA）采用 Node.js、Express.js、React.js、MobX 和 Three.js 构建，利用欧拉-伯努利梁模型模拟 3D 桁架系统。稀疏刚度矩阵通过共轭梯度迭代法求解。桁架杆件的内力图使用 GLSL 顶点和片元着色器在 GPU 上可视化，实现 3D 空间中 5 次多项式的即时渲染。

客户端是一个响应式单页应用，支持用户注册、私人模型档案、公共项目画廊和 3D 查看器。导航栏和 Three.js 场景在桌面、平板和移动设备上无缝运行。

数学基础：欧拉-伯努利梁理论

对于长度为 L、弯曲刚度为 EJ₃ 的梁，在集中力 F、力矩 M、分布荷载 q(x) = kx + q₀ 和力矩 m(x) = rx + m₀ 作用下，局部坐标系（x₁ 沿梁方向，x₂ 竖向，x₃ 横向）中的弯曲方程为：

$$EJ_3 \dfrac{d^4v}{dx^4} = q(x) - \dfrac{dm}{dx}, \quad x\in[0,L]$$

通解：

$$v(x)=\dfrac{kx^5}{120EJ_3}+\dfrac{(q_0-r)x^4}{24EJ_3}+a_4x^3+a_3x^2+a_2x+a_1$$

边界条件 v(0)=v¹, v'(0)=φ¹, v(L)=v², v'(L)=φ² 通过埃尔米特多项式 N_p^i 确定系数：

$$v(x) = \dfrac{k}{EJ_3}(\dfrac{x^5}{120}-\dfrac{x^3L^2}{40}+\dfrac{x^2L^2}{60})+\dfrac{q_0-r}{EJ_3}(\dfrac{x^4}{24}-\dfrac{x^3L}{12}+\dfrac{x^2L^2}{24})+N_p^i\alpha_i^p$$

$$N_p^1\alpha_1^p=(2\dfrac{x^3}{L^3}-3\dfrac{x^2}{L^2}+1)v^1 + (-2\dfrac{x^3}{L^3}+3\dfrac{x^2}{L^2})v^2$$

$$N_p^2\alpha_2^p=(x^3/L^2-2x^2/L+x)\phi^1 + (x^3/L^2-x^2/L)\phi^2$$

根据拉格朗日变分原理，局部刚度方程为：

$$K_{pq}^{ij}\alpha_j^q=F_p^i,\quad K_{pq}^{ij}=EJ_3 \int_0^L N_{p,11}^i N_{q,11}^j dx$$

$$F_p^i = \int_0^L [q(x) N_p^i + m(x) N_{p,1}^i] dx + f_p^i$$

对于 0xy 平面内的平面弯曲，刚度矩阵为：

$$\dfrac{EJ_3}{L^3}\begin{bmatrix} 12&6L&-12&6L\\ 6L&4L^2&-6L&2L^2\\-12&-6L&12&-6L\\6L&2L^2&-6L&4L^2\end{bmatrix} \left\lbrace \begin{matrix}v^1\\ \varphi^1\\v^2\\ \varphi^2 \end{matrix}\right\rbrace=\left\lbrace \begin{matrix} F_1\\M_1\\F_2\\M_2 \end{matrix}\right\rbrace$$

向全局坐标系的变换

局部位移通过正交变换矩阵 a_ij（局部基矢 i,j,k 在全局系中的坐标）与全局关联：

$$\alpha_i^p = a_{im} \beta_m^p \Rightarrow \mathbb{K}_{pq}^{mn} = a_{im}^T K_{pq}^{ij} a_{jn}$$

$$a_{ij}=\begin{bmatrix}ix&iy&iz\\jx&jy&jz\\kx&ky&kz\end{bmatrix}$$

全局系求解节点位移 β，反变换得到局部挠度和转角，然后生成力图：

$$M_3(x)=-EJ_3\dfrac{d^2v}{dx^2}, \quad Q(x) = -\dfrac{dM}{dx} - m(x)$$

对于轴向伸缩（i,j,m,n={1,2,3}），6×6 变换矩阵为：

$$\begin{bmatrix} ix & iy & iz & 0 & 0 & 0 \\ jx & jy &jz & 0 & 0 & 0\\ 0 & 0 & 1 & 0 & 0 & 0 \\ 0 & 0 & 0 & ix & iy & iz \\ 0&0&0&jx&jy&jz\\0&0&0&0&0&1\end{bmatrix}$$

包含 EA/L 轴向 u 和 EJ 弯曲的局部 6×6 刚度矩阵：

$$K_{pq}^{ij} = \begin{bmatrix} \frac{EA}{L} & 0 & 0 & -\frac{EA}{L} & 0 & 0 \\ 0 & \frac{12EJ}{L^3} &\frac{6EJ}{L^2} & 0 & -\frac{12EJ}{L^3} &\frac{6EJ}{L^2}\\ 0 & \frac{6EJ}{L^2} & \frac{4EJ}{L} & 0 & -\frac{6EJ}{L^2} & \frac{2EJ}{L} \\ -\frac{EA}{L} & 0 & 0 &\frac{EA}{L} & 0 & 0 \\ 0 & -\frac{12EJ}{L^3} &-\frac{6EJ}{L^2} & 0 & \frac{12EJ}{L^3} &-\frac{6EJ}{L^2}\\ 0 & \frac{6EJ}{L^2} & \frac{2EJ}{L} & 0 & -\frac{6EJ}{L^2} & \frac{4EJ}{L}\end{bmatrix}$$

力图示例与可视化

• 3D 框架在扭矩 M₃ 下的挠度 Uy 图：线性荷载 q(x) 下的 5 次多项式。
• 三杆框架中的力矩图：每根梁沿 3 次多项式。

力图基于节点位移解析计算，并通过着色器实时渲染每个杆件。

核心亮点

• 混合数值-解析求解器：精确多项式结合共轭梯度迭代，处理大型稀疏系统。
• GLSL 着色器实现 GPU 加速 3D 力图可视化。
• 完整 6 自由度模型：弯曲 + 轴向，采用正交变换。
• React/MobX/Three.js 响应式 SPA 界面，专为工程师设计。
• Node.js/Express.js 云端托管公私模型。

— Editorial Team