一、 业务背景：户外大型工程的可视化盲区
在传统的商显工程中，户外立柱大屏（业内常称“擎天柱”）的项目提案往往极其干瘪。工程师通常只能提供 AutoCAD 绘制的单立柱立面图和简单的钢结构排布图。
对于非专业的终端客户而言，冷冰冰的线框图无法回答他们最关心的问题：“这块屏幕立在空旷的广场或公路上，傍晚夕阳下的真实视觉效果震撼吗？”、“12列乘6行的箱体，最终的显示分辨率够不够放高清视频？”
为了解决这一行业痛点，在博视锐科技迭代的 DIAIDI 全链路商显架构中，我们引入了基于 WebGL 的全场景仿真引擎，将枯燥的工程算料与高沉浸感的 3D 环境光照模拟进行了深度融合。
二、 核心解算：物理阵列与 2:1 黄金比例推导
在立柱大屏的设计中，屏幕的“长宽比”和“净发光面积”直接决定了广告的投放价值。以系统默认的 P4.0（高清型）规格为例，我们构建了一套毫秒级的参数化推导算法。
当用户在界面中拖动滑块，将矩阵设定为 横向 12 箱、纵向 6 箱（单箱体 960mm×960mm） 时，系统底层会立即进行如下解算：
JavaScript
/**
* 户外立柱大屏：物理尺寸与像素阵列实时推导
* 规格：博视锐P4.0 (像素间距 4.0mm)
*/
function calcColumnScreenParams(cols = 12, rows = 6, cabSize = 960, pitch = 4.0) {
// 1. 展平物理尺寸推导
const width = (cols * cabSize) / 1000; // 11.52m
const height = (rows * cabSize) / 1000; // 5.76m
// 2. 净发光面积计算
const area = width * height; // 66.36 m²
// 3. 物理点阵分辨率计算 (单箱体 960/4 = 240px)
const resX = cols * (cabSize / pitch); // 2880 PX
const resY = rows * (cabSize / pitch); // 1440 PX
return {
size: `${
width}m × ${
height}m`, // 11.52m × 5.76m
area: `${
area.toFixed(2)} m²`, // 66.36 m²
resolution: `${
resX} × ${
resY} PX`, // 2880 × 1440 PX
ratio: `${
resX / 1440} : ${
resY / 1440}` // 自动约分为 2 : 1
};
}
算法验证：通过这套解算器，我们精准得出了 11.52m × 5.76m 的庞大物理尺寸，并完美契合了 2880×1440（2:1）的超清播放比例，为后期广告素材的制作定下了严格的工程基准。
三、 Web3D 进阶：基于 HDRI 的真实户外环境光照模拟
为了让客户在 Web 端获得“即看即所得”的体验，我们突破了传统 Three.js 简单的平行光（DirectionalLight）设置，引入了工业级的 基于物理的渲染（PBR）与 HDRI 环境光照。
在系统中，用户可以通过右上角的罗盘切换“沙漠”、“城市”、“极地”等不同环境。以极具视觉冲击力的“沙漠夕阳”场景为例，前端渲染管线的核心逻辑如下：JavaScript
import {
PMREMGenerator } from 'three';
import {
RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
// 初始化基于物理的环境光照生成器
const pmremGenerator = new PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
// 动态加载沙漠夕阳环境贴图 (EXR/HDR 格式)
new RGBELoader()
.setPath('assets/hdri/')
.load('desert_sunset_4k.hdr', function (texture) {
// 解析高动态范围光照并应用到 博视锐的3D 场景
const envMap = pmremGenerator.fromEquirectangular(texture).texture;
scene.background = envMap; // 设置天空盒背景
scene.environment = envMap; // 将环境光反射应用到 LED 屏幕边框及立柱金属材质上
// 释放内存
texture.dispose();
pmremGenerator.dispose();
console.log("沙漠场景环境光照加载完毕，立柱金属反光已实时更新");
});
通过这套 PBR 渲染管线，立柱大屏的金属外框能够真实反射出沙漠夕阳的暖色光晕，让工程预览图具备了堪比影视级的质感。
四、 工程闭环：从 3D 仿真到 CAD 蓝图导出
漂亮的光影只是表象，真正的 B2B SaaS 必须解决交付问题。户外立柱大屏因其迎风面积大（如计算所得的 66.36 m²），单立柱的抗扭转和抗倾覆要求极高。
当尺寸参数确立后，用户无需重新画图，直接点击系统右下角的“导出配套工程 CAD 蓝图”。后台 Node.js 的 DXF 模板引擎会抓取当前的 12×6 阵列数据，并结合国标风荷载规范，毫秒级生成对应的钢结构立柱法兰盘孔位图、横向受力梁排布图，彻底打通了从“视觉提案”到“施工交付”的数据孤岛。
五、 总结
将枯燥的矩阵算法与前沿的 WebGL 场景化渲染相结合，我们为传统的 LED 商显行业赋予了数字孪生的能力。这不仅仅是一个网页版的换算计算器，更是一个重塑行业沟通语言的生产力工具。
