FrameBrace 3D 技术开发报告

系统名称：FrameBrace 3D (FB-3D)
定位：单层工业厂房排架结构支撑体系三维轻量化虚拟仿真系统

1. 软件架构与渲染引擎

技术栈：纯原生前端单文件架构（HTML5 + Canvas 2D + ES6+ + Tailwind CSS）。
零依赖运行：无 WebGL、Three.js 等重型第三方库依赖，单个自包含 .html 文件（~150KB）秒级启动，全平台通用。
自研伪三维投影管线：
- 空间坐标三维旋转矩阵变换：
  $$X’ = X \cos\phi – Z \sin\phi, \quad Z’ = X \sin\phi + Z \cos\phi$$
  $$Y’ = Y \cos\theta – Z’ \sin\theta, \quad Z” = Y \sin\theta + Z’ \cos\theta$$
- 弱透视屏幕映射：
  $$X_{\mathrm{screen}} = X_0 + X’ \cdot s \cdot \text{scale}, \quad Y_{\mathrm{screen}} = Y_0 – Y’ \cdot s \cdot \text{scale}$$
  其中透视缩放比 $s = \frac{d}{d + Z”}$，并按构件几何深度实施分层消隐排序。
摄像机轨道控制器：
双轴球坐标姿态控制，仰角范围硬性限制为 $[-85^{\circ}, +85^{\circ}]$ 防翻转：

$$\begin{cases} X_{\mathrm{cam}} = R \cdot \cos(\theta_{\mathrm{elev}}) \cdot \sin(\theta_{\mathrm{azim}}) \\ Y_{\mathrm{cam}} = R \cdot \sin(\theta_{\mathrm{elev}}) \\ Z_{\mathrm{cam}} = R \cdot \cos(\theta_{\mathrm{elev}}) \cdot \cos(\theta_{\mathrm{azim}}) \end{cases}$$

2. 结构力学仿真模型

2.1 上弦受压欧拉侧向屈曲（防侧弯失稳）

正弦连续位移场：
$$z_{\mathrm{wave}}(x, t) = A(n) \cdot \sin\left(\frac{n\pi x}{L}\right) \cdot \left[1.0 + 0.3 \cdot \sin(\omega t)\right]$$
式中 $L = 24.0\text{ m}$，支撑约束节间数 $n \in {1, 2, 4, 8}$。
计算长度与临界力联动：
$$l_0 = \frac{L}{n}, \quad P_{\mathrm{cr}} = \frac{\pi^2 E I}{l_0^2} = n^2 \cdot P_{\mathrm{cr},0}$$
当 $n$ 从 1 增至 8 时，上弦杆计算长度从 $24\text{ m} \to 3\text{ m}$，临界失稳压力提升 64 倍。
交互表征：三维视口实时渲染大波形侧向凸出、两端轴向受压脉冲箭头（➡ 与 ⬅）及约束点发光支座反力销轴。

2.2 纵向温度应力与伸缩呼吸变形

环境温差动态循环：
$$T(t) = T_0 + \Delta T_{\max} \cdot \sin(\omega_{\mathrm{temp}} t), \quad T(t) \in [-25^{\circ}\text{C}, +35^{\circ}\text{C}]$$
居中布置（自由伸缩）：
$$\Delta L(z) = \alpha \cdot \Delta T \cdot (z – z_{\mathrm{center}})$$
结构刚度中心置于纵向开间跨中，柱顶沿纵向自由呼吸伸缩，柱身无额外剪切弯曲。
端部布置（约束憋弯）：
两端设置刚性约束使 $\Delta L = 0$，构件内产生温度压力，触发排架柱 S 形受迫屈曲变形与柱底高应力脉冲预警环（⚡）。

2.3 Warren 人字形带竖杆屋架拓扑算法

$24.0\text{ m}$ 跨度划分为 8 个节间（节间距 $3.0\text{ m}$），节点坐标：
$$X_k \in {-12, -9, -6, -3, 0, 3, 6, 9, 12}\text{ m}$$

竖腹杆：在所有内节点均匀布置，直接承托屋面荷载；
斜腹杆交替倾斜（纯三角形几何不变体系）：

$$\mathrm{Diagonal}(k) = \begin{cases} (P_{\mathrm{bot}, k}, ; P_{\mathrm{top}, k+1}), & k \in {0, 2, 4, 6} \quad \text{(右上 /)} \\ (P_{\mathrm{top}, k}, ; P_{\mathrm{bot}, k+1}), & k \in {1, 3, 5, 7} \quad \text{(右下 } \backslash \text{)} \end{cases}$$

在 $X = \pm 6.0\text{ m}$ 处与抗风柱系杆节点立体交汇咬合。

3. 全链路连续传力流引擎

摒弃步进切换，采用 60 FPS 连续脉冲光流粒子渲染：

山墙风荷载链路：
$$\text{山墙迎风面} \xrightarrow{\text{面荷载}} \text{抗风柱} \xrightarrow{\text{支座反力}} \text{贯穿刚性系杆} \xrightarrow{\text{轴向受压}} \text{第2开间屋面横向支撑} \xrightarrow{\text{桁架分解}} \text{柱顶/牛腿标高刚性杆} \xrightarrow{} \text{柱间支撑} \xrightarrow{} \text{基础}$$
吊车刹车力链路：
行车轮轨冲击点 $\to$ 吊车梁及制动桁架 $\to$ 牛腿标高纵向刚性杆 $\to$ 柱间下段支撑 $\to$ 杯口基础。

4. 空间构造对齐与交互系统

真实空间立体错位：
- 纵向开间定位轴线 ① ~ ⑦ 与排架柱中心线绝对重合；
- 排架柱轴线与牛腿标高柱间刚性杆位于 $X = \pm 12.0\text{ m}, Y = 7.0\text{ m}$；
- 吊车梁位于挑出牛腿面上 $X = \pm 10.6\text{ m}, Y = 7.6\text{ m}$，物理空间严格分离。
受压系杆连续贯穿：
山墙抗风柱顶刚性系杆贯穿第一、第二开间，严密锚入横向水平支撑节点。
交互体系：
- 支持图层独立多选、一键【全部取消】（白模拼装教学）与【全选显示】；
- 鼠标射线拾取（Raycasting）：实时高亮构件并浮现受力力学属性卡片。