FEM Calculation of Rods on Node.js React Three.js

Cloud-Based FEA for Truss Systems Using Node.js, React, and Three.js

This cloud-based single-page app (SPA) built with Node.js, Express.js, React.js, MobX, and Three.js simulates 3D truss systems using the Euler-Bernoulli beam model. The sparse stiffness matrix system is solved via the conjugate gradient iterative method. Internal force diagrams in truss members are visualized on the GPU using GLSL vertex and fragment shaders, delivering instant rendering of 5th-degree polynomials in 3D space.

The client side features a responsive single-page app with user registration, private model profiles, a public project gallery, and a 3D viewer. The navigation bar and Three.js scene work seamlessly across desktops, tablets, and mobile devices.

Mathematical Foundation: Euler-Bernoulli Beam Theory

For a beam of length L with bending stiffness EJ₃ under point loads F, moments M, distributed loads q(x) = kx + q₀, and moments m(x) = rx + m₀, the bending equation in local coordinates (x₁ along the beam, x₂ vertical, x₃ transverse) is:

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

General solution:

$$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$$

Boundary conditions v(0)=v¹, v'(0)=φ¹, v(L)=v², v'(L)=φ² determine coefficients via Hermite polynomials 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)φ^1 + (x^3/L^2-x^2/L)φ^2$$

From Lagrange variational principles, the local stiffness equation is:

$$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$$

For planar bending in the 0xy plane, the stiffness matrix is:

$$\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$$

Transformation to Global Coordinates

Local displacements link to global via orthogonal transformation matrix a_ij (local basis i,j,k coordinates in global system):

$$\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}$$

The global system is solved for nodal displacements β. Back-transformation yields local deflections and rotations, then force diagrams:

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

For axial extension-compression (i,j,m,n={1,2,3}), the 6x6 transformation matrix is:

$$\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}$$

Local 6x6 stiffness matrix including EA/L for axial u and EJ bending:

$$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}$$

Force Diagram Examples and Visualization

• Deflection Uy diagrams for a 3D frame under torsion M₃: 5th-degree polynomial under linear load q(x).
• Moment diagrams in a 3-member frame: 3rd-degree polynomial along each beam.

Diagrams are computed analytically from nodal displacements and rendered in real-time via shaders for each member.

Key Highlights

• Hybrid numerical-analytic solver pairs exact polynomials with conjugate gradient iteration for large sparse systems.
• GLSL shaders enable GPU-accelerated 3D force diagram visualization.
• Full 6-DOF model: bending + axial with orthogonal transformations.
• Responsive SPA interface on React/MobX/Three.js tailored for engineers.
• Cloud-hosted public/private models via Node.js/Express.js.

— Editorial Team