Node.js React Three.js에서 로드 FEM 계산

# Node.js, React, Three.js를 활용한 클라우드 기반 트러스 시스템 FEA

Node.js, Express.js, React.js, MobX, Three.js로 구축된 이 클라우드 기반 싱글 페이지 앱(SPA)은 오일러-베르누이 빔 모델을 사용해 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)φ^1 + (x^3/L^2-x^2/L)φ^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})에 대한 6x6 변환 행렬:

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

축 u에 대한 EA/L과 굽힘 EJ를 포함한 국부 6x6 강성 행렬:

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

힘 다이어그램 예시와 시각화

• 비틀림 M₃ 하중 3D 프레임의 처짐 Uy 다이어그램: 선형 하중 q(x) 하의 5차 다항식.
• 3부재 프레임의 모멘트 다이어그램: 각 빔을 따라 3차 다항식.

다이어그램은 노드 변위로부터 해석적으로 계산되어 각 부재마다 셰이더를 통해 실시간 렌더링됩니다.

주요 특징

• 하이브리드 수치-해석 솔버: 대형 희소 시스템을 위한 정확한 다항식과 공액 기울기 반복 결합.
• GLSL 셰이더로 GPU 가속 3D 힘 다이어그램 시각화.
• 완전 6-DOF 모델: 굽힘 + 축방향, 직교 변환 포함.
• 엔지니어를 위한 React/MobX/Three.js 반응형 SPA 인터페이스.
• Node.js/Express.js를 통한 클라우드 호스팅 공개/개인 모델.

— Editorial Team