共计 3635 个字符，预计需要花费 10 分钟才能阅读完成。
三维可视化# #3D 开发
- WebGL 3D 技术
- 新一代 3D 框架 -ThingJS
- 3D 可视化告警零碎案例
- 基于 ThingJS 的通用架构设计
WebGL 3D 技术
WebGL 是一种在网页浏览器中渲染 3D 图形的 JavaScript API，无需加装插件，只需编写网页代码即可实现 3D 图形的展现。WebGL 技术相较于传统的 Web3D 技术有两大长处：第一，通过 JavaScript 脚本语言实现网络交互式三维动画制作，无需依赖任何浏览器插件；第二，WebGL 基于底层的 OpenGL 接口实现，具备底层图形硬件 (GPU) 减速性能。
WebGL 绘制 3D 模型的过程分为四个步骤如下：
第一，获取顶点坐标。顶点坐标通常来自三维软件导出，在获取到顶点坐标后，存储到显存以便 GPU 更快读取；第二，图元拆卸，画出一个个三角形。图元拆卸就是由顶点生成一个个图元(即三角形)，这个过程是由顶点着色器实现的。顶点着色器会先将顶点坐标通过矩阵变换为屏幕坐标，而后由 GPU 进行图元拆卸；第三，进行光栅化，即生成片元 (一个个像素点)。第四，在图元生成结束之后，还须要给模型“上色”，由运行在 GPU 的“片元着色器”来实现。
新一代 3D 框架
如果间接应用 WebGL 开发 3D 效率比拟低，须要开发者对图形学常识有很深刻的理解，碎片化的概念并不易于开发。为了解决开发效率低的问题，呈现了基于 JavaScript 语言的第三方库 -three.js，这是开源的技术，受到了宽广前端转 3D 开发师的追捧。
three.js 是一个跨浏览器的脚本，它封装了底层的图形接口，对 WebGL 有很好的反对，不须要把握简单的图形学常识就能实现三维场景的渲染。如渲染彩色背景下的红色正方体和三角形, WebGL 须要编程代码大概 150 行，而 threejs 编程只须要 30 行左右的代码，工作量只有 WebGL 的五分之一，大幅提高了开发效率。
相较而言，近两年新兴的 3D 框架 -ThingJS，封装了简直所有的 3D 概念，开发人员甚至不须要 3D 专业知识储备，间接应用 JavaScript 调用 3D 源码，轻松实现 3D 成果，顺利完成二次开发。如加载 3D 场景，three.js 须要 100 行左右的代码，ThingJS 仅需 1 行，间接 JavaScript 脚本调用 3D 场景 URL。
3D 可视化告警零碎案例
3D 可视化告警零碎常见于城市交通指挥、地铁通信、智能家居、消防安全畛域，工业自动化设施运维治理过程中，常遇到故障设施定位艰难、监控数据不形象不直观等问题，基于 WebGL 技术的 3D 框架开发，本案例实现了一个通用的 3D 可视化告警零碎设计方案，不仅解脱了传统 3D 可视化计划依赖插件的解放，解决了出错率高、数据难以积淀等问题。
从用户角度登程，采纳 WebGL 技术在浏览器端对工业生产设施进行虚拟化仿真模仿，并基于综合监控治理平台采集到的设施运行数据进行车间设施运行状况的形象立体化展现，3D 场景动效给管理者以良好的沉迷感和交互感，解脱表格、文本等比拟传统的治理形式。
某港口的数字告警监控可视化利用界面
基于 ThingJS 的通用架构设计
一个通用的告警零碎，分为数据存储层、数据处理层和数据展现层。
数据存储层次要应用 mysql 数据库存储设备、数据根本信息和采集到的告警信息，应用 json 文件存储 3D 模型数据信息；数据处理层次要联合 Ajax 数据对接形式在线判断告警信息，利用 JavaScript 脚本对数据进行解决剖析以及业务逻辑的实现；数据展现层次要应用基于 WebGL 的 ThingJS 平台组件实现对 3D 场景的加载渲染，并提供在线我的项目分享性能，用户能够生成惟一 URL 和二维码，在其余 web 零碎嵌入 iframe 链接进行演示。【官网注册链接】
1. 根底性能构建
根底操作含 3 大功能模块：设施治理模块、3D 场景漫游模块以及设施衰弱状态治理。
(1) 设施治理。
用户能够查看设施根本信息，通过拖拽的模式扭转设施在场景中的地位，实现设施的缩放和旋转操作，还能够依据本人的须要增加和删除设施。ThingJS 的开发师调用 js 脚本，管制物体的地位、旋转、缩放，包含 Z 轴方向挪动。【查看残缺示例】
// 地位
app.on('click', function(event) {if (event.picked)
car.position = event.pickedPosition;
});
// 挪动，z 轴方向
function obj_translate() {car.translate([0, 0, -1]);
}
// 旋转，y 轴方向
function obj_rotate() {car.rotateY(45.0);
}
// 缩放
function obj_scale() {car.scale = [1, 2, 1];
} (2) 3D 场景自在漫游。
用户通过鼠标实现对整个 3D 场景的挪动，缩放和旋转操作，从而满足用户 360 度查看场景的须要，给用户带来良好的交互感和浸入感。ThingJS 示例采纳 js 脚本让摄像机主动盘绕某看点地位（世界坐标系下）或某物体旋转。【3D 演示】
某能源储能电站告警零碎可视化利用
(3) 设施衰弱状态治理。
用户可自在查看机房内任意设施的衰弱度，衰弱度分为三个区间，别离用红黄绿三种色彩来示意设施的衰弱状态。当零碎检测到设施呈现告警信息时，在该设施的上方弹出对应的告警标记，用户点击告警标记，弹出告警详情，包含告警工夫、告警类别、告警起因等。ThingJS 平台内，基于 Ajax 技术能够实现根本的数据申请，对设施温度、衰弱状态进行判断，并设定一个报警界线值。【查看残缺示例】
function updateData(obj) {
// 如果网站是 https 接口则对应 https 申请
// 如果网站是 http 接口则对应 http 申请即可
$.ajax({
type: "get",
url: "https://3dmmd.cn/getMonitorDataById",
data: {"id": obj.id},
dataType: "json", // 返回的数据类型 json
success: function (d) {console.log(d);
var temper = d.data.temper;
// 设置物体身上的监控数据
obj.setAttribute("monitorData/ 温度", temper);
changeColor(obj);
// 每隔 3s 申请一次数据
timer = setTimeout(function () {updateData(obj)
}, 3000);
}
});
}
// 进行申请数据
function stopUpdate() {clearTimeout(timer);
}
// 如果温度 >25 扭转色彩
function changeColor(obj) {var temper = obj.getAttribute("monitorData/ 温度");
var value = temper.substr(0, temper.indexOf("℃"));
if (value > 25) {obj.style.color = 'rgb(255,0,0)';
}
else {obj.style.color = null;}
}2. 主动巡航性能
不仅仅是主动驾驶零碎，工业设施可视化也能够退出主动巡航性能，以匀速的状态挪动后退。
用户能够依据厂房环境和设施布局状况，设定巡航门路，当用户点击主动巡航按钮时，能够沿着设定好的门路进行巡视，无需用户手动操作，就可能对门路上的设施衰弱状况进行全局理解，大大减少了用户的工作量，进步了工作效率。
ThingJS 利用 js 脚本中的摄像机概念来确定察看 3D 场景的视角，让摄像机始终追随物体，达到设定巡航路线的目标。【查看残缺示例】
new THING.widget.Button('摄像机追随物体', function () {
// 每一帧设置摄像机地位 和 指标点
car.on('update', function () {
// 摄像机地位为 挪动小车后上方
// 为了便于计算 这里用了坐标转换 将绝对于小车的地位 转换为 世界坐标
app.camera.position = car.selfToWorld([0, 5, -10]);
// 摄像机指标点为 挪动小车的坐标
app.camera.target = car.position
}, '自定义摄影机追随');
});
new THING.widget.Button('进行', function () {car.off('update', null, '自定义摄影机追随');
});
});
ThingJS 我的项目次要采纳 B / S 架构，基于 WebGL 技术并采纳更高效的 3D 封装库实现，用户间接在浏览器上通过 url 地址拜访我的项目，不须要装置任何插件。
ThingJS 平台的在线开发计划在浏览器端对自动化设施以及各个监控零碎采集到的设施运行数据进行三维仿真模仿，不仅使得 3D 数据的展现更加形象、平面，达到了辅助运维的目标；同时一次在线开发，能够在多种终端设备、多种屏幕尺寸的零碎上运行，随时随地查看监控画面，大大降低了经营老本，缩小了 3D 可视化我的项目的施行工夫和老本。
