基于 Three.js 的户外大屏参数化建模与抗倾覆力矩实时推导
### 一、 参数化网格与坐标原点对齐 户外大屏工程通常采用模块化箱体（如 $960\\text{mm} \\times 960\\text{mm}$ 标准单元箱）组合排布。前端建模时，如果直接用单个 `BoxGeometry` 拉伸，会导致接缝法线与贴图比例失真；如果每一个箱体都实例化为一个独立 Mesh，大尺寸场景（如数百箱）又会带来不必要的 Draw Call 开销。 这里采用合并几何体（`BufferGeometryUtils.mergeGeometries`）或单面划分的思路，并确保几何体的旋转中心处于底部地坪，便于后续结合离地间隙（Ground Clearance）进行高度推导。 import \* as THREE from 'three'; const CABINET\_SIZE = 0.96; // 标准箱体尺寸 960mm /\*\* \* 动态构建大屏显示表面网格与包边 \* @param {number} cols 横向箱体列数 \* @param {number} rows 纵向箱体行数 \* @param {number} baseY 离地悬挂高度 (m) \*/ export function buildScreenMesh(cols, rows, baseY) { const totalW = cols \* CABINET\_SIZE; const totalH = rows \* CABINET\_SIZE; const group = new THREE.Group(); // 1. 发光面几何体 (以屏幕底部中心为对齐基准) const displayGeo = new THREE.PlaneGeometry(totalW, totalH); displayGeo.translate(0, totalH / 2, 0); const displayMat = new THREE.MeshStandardMaterial({ roughness: 0.2, metalness: 0.1, side: THREE.FrontSide }); const displayMesh = new THREE.Mesh(displayGeo, displayMat); // 2. 背架厚度及外边框实体 const frameDepth = 0.50; // 箱体厚度加后架维护空间 const frameGeo = new THREE.BoxGeometry(totalW, totalH, frameDepth); frameGeo.translate(0, totalH / 2, -frameDepth / 2); const frameMat = new THREE.MeshStandardMaterial({ color: 0x1f242d, roughness: 0.7, metalness: 0.6 }); const frameMesh = new THREE.Mesh(frameGeo, frameMat); group.add(displayMesh); group.add(frameMesh); // 提升至指定离地标高 group.position.set(0, baseY, 0); return { group, metrics: { totalW, totalH, area: totalW \* totalH } }; } ### 动态尺寸与显示比例约简算法 在 Web 端做输入联动时，工程人员需要直观确认排布后的长宽比是否接近 16:9。采用欧几里得辗转相除法提取列数与行数的最大公约数（GCD），可以快速输出规约后的比例字符串。 /\*\* \* 欧几里得辗转相除法 \*/ function getGcd(a, b) { return b === 0 ? a : getGcd(b, a % b); } /\*\* \* 尺寸与点阵换算解析 \* @param {number} cols 列数 \* @param {number} rows 行数 \* @param {number} pitch 点间距 (mm) \*/ export function evaluateScreenSpecs(cols, rows, pitch) { const widthM = cols \* CABINET\_SIZE; const heightM = rows \* CABINET\_SIZE; const area = widthM \* heightM; // 单箱物理点阵换算 (960mm / pitch) const cabPx = Math.round(960 / pitch); const pxW = cols \* cabPx; const pxH = rows \* cabPx; // 比例约简 const divisor = getGcd(cols, rows); const ratioStr = \`${cols / divisor} : ${rows / divisor}\`; return { dimensions: { width: widthM.toFixed(2), height: heightM.toFixed(2), area: area.toFixed(2) }, resolution: { pxW, pxH, totalPixels: pxW \* pxH }, aspectRatio: ratioStr }; } ### 力学荷载推导：风载与基底抗倾覆力矩 户外立柱结构在三维视图中不能只做纯视觉渲染，结构工程师最关心的参数是**在极限风载下，基础螺栓群与混凝土承台需要承受多大的弯矩**。 根据《建筑结构荷载规范》(GB 50009-2012) 的风荷载标准值简化计算公式： $$w\_k = \\beta\_z \\cdot \\mu\_s \\cdot \\mu\_z \\cdot w\_0$$ 其中： - $w\_0$：基本风压（通常平原内陆取 $0.45 \\sim 0.65\\text{ kN/m}^2$） - $\\mu\_s$：体型系数（独立大屏迎风板状结构通常取 $1.2 \\sim 1.3$） - $\\mu\_z$：风压高度变化系数（随悬挂标高增大，取 $1.0 \\sim 1.4$） - $\\beta\_z$：风振系数 - 将参数化几何生成与标准工程公式耦合，可以摆脱纯展示型 3D 的局限。前端工程不仅能够呈现大屏的尺寸比例，还能在交互过程中为结构选型和电气配电提供具有工程参考价值的即时数值支持。后续可在管线材质着色器（Custom Shader）中进一步接入应力应变云图的高亮渲染。
