基于 WebGL 的 HTML5 3D 智能楼宇监控系统

前言

智能监控已经涉及到了各大领域，工控、电信、电力、轨道交通、航天航空等等，为了减小人员的消耗，监控系统必不可少。以前我写过一篇 2D 的智能地铁监控系统广受好评，忽然以为，既然 2D 的这么受欢迎，那么 3D 的需求量确定也是很是大的，3D 毕竟比 2D 来讲仍是更直观一些，因而有了这个例子以及这篇文章。智能监控系统在 3D 中应用比较普遍的除了 3D 机房之外，我以为就是楼宇的监控了，但是以前作了不少关于机房方面的 Demo，因此最终决定作 3D 楼宇监控系统。 ​​

代码生成

场景搭建

整个场景是由 HT for Web 的 3D 组件搭建而成，配合左侧的 listView 列表组件，经过点击这个 listView 列表组件中的各个项能够自由切换各个监控楼层和楼宇的场景：

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);

relativeLayout = new ht.ui.RelativeLayout(); // 相对布局器 可对界面进行布局
var ht3dView = new ht.ui.HTView(g3d); // 放置 3d 组件
relativeLayout.addView(ht3dView, { // 给相对布局器添加组件显示，参数一为组件名称，参数二可设置宽高、对齐方式等属性
    width: 'match_parent',
    height: 'match_parent'
});
var listView = window.list = new ht.ui.ListView(); // 列表组件
for (var i = 1; i <= 15; i++) {
    var data = new ht.Data(); // 建立节点
    data.setName('楼层' + i); // 设置节点名称
    listView.dm().add(data); // 将节点添加进列表组件中
}
relativeLayout.addView(listView, { // 将 listView 组件添加进布局器中
    align: 'left', // 设置对齐方式为左对齐
    vAlign: 'top', // 设置垂直对齐方式为顶部对齐
    marginTop: 120, // 设置外边距顶部为 120 像素
    marginLeft: 60, // 设置外边距左侧为 60 像素
    width: 80, // 设置宽度为 80
    height: 480, // 设置高度为 480
    index: 100 // 设置元素的堆叠顺序
});

relativeLayout.addToDOM(); // 将组件添加进 body 中
复制代码

加载模型

进入页面显示的就是整个城市的场景，经过 ht.Default.loadObj 方法加载 obj 模型：

var loadCity = function(){
    ht.Default.loadObj('obj/city.obj', 'obj/city.mtl', { // 加载模型
        center: true, // 模型是否居中，默认为 false，设置为 true 则会移动模型位置使其内容居中
        cube: true, // 是否将模型缩放到单位1的尺寸范围内，默认为 false
        prefix: 'obj/', // 图片路径前缀，即在 map_kd 值以前增长的前缀，若是是相对路径则以加载 obj 的 html 页面的路径为参考
        shape3d: 'city', // 若是指定了 shape3d 名称，则HT将自动将加载解析后的全部材质模型构建成数组的方式，以该名称进行注册
        finishFunc: function(modelMap, array, rawS3){ // 用于加载 obj 模型后的回调处理
            city.rawS3 = rawS3; // 设置变量 city 对象的 rawS3 属性 此函数中的 rawS3 属性为 obj 模型的原始大小
            showCity(); // 建立一个节点 设置节点的 shape3d 为 city 显示 city.obj 与 city.mtl 的内容
        }
    });
}
复制代码

工控楼层模型的加载也是相似，这里就再也不赘述。

直接将组件添加进场景中是不会有相关的操做的， 必需要监听事件的触发才可进行后续的操做，这里对数据选中容器中的选中变化事件进行监听：

// 列表点击
listView.dm().sm().ms(function(e){ // 监听选中变化事件
    if (e.kind === 'set') { // 设置监听事件
        showFloor(); // 显示楼层
    }
});
复制代码

调用模型

这里为了简单就只设置了一个工控楼层的 obj 模型，经过调用不一样的 obj 模型能够显示不一样的工控楼层场景，也就是说咱们能够本身经过 ht.Default.loadObj 方法加载模型，设置工控楼层模型的 shape3d 属性，而后设置到节点的 shape3d 属性上，便可修改；或者直接设置节点的 shape3d 属性为 json 格式的 obj 文件，这里仍是采起第一种方式：

var showFloor = function(){
    g3d.setCenter([210, 0, 210]); // 设置 3d 组件的“中心”位置
    dm.clear(); // 清除数据容器中的全部节点
    var rawS3 = floor.rawS3, // 获取 obj 模型的原始大小
        node = new ht.Node(); // 建立一个新的节点
    node.s({ // 设置节点的样式属性
        'shape3d': 'floor', // 此项设置的值为 ht.Default.loadObj 中设置的 shape3d 属性的值
        'wf.visible': 'selected', // 设置选中节点时显示节点外部的线框
        '3d.selectable': false // 设置节点不可选中
    });
    node.s3(rawS3[0] / 10,rawS3[1]/ 10,rawS3[2] / 10); // 设置节点的大小为原始大小的十分之一
    node.p3(140, 0, 230); // 设置节点的位置

    dm.add(node); // 将节点添加进数据容器中

    // 添加四个“相机”的节点
    createNode([0, 20, 0]);
    createNode([110, 20, 220]);
    createNode([330, 20, 420]);
    createNode([210, 20, 120]);
    createNode([420, 20, 120]);

};
复制代码

这里顺便说一下另外一种简便的调用 obj 模型的方式，直接设置节点的 shape3d 属性为导入的 json 格式的文件：

var node = new ht.Node();
node.s("shape3d", "./symbols/city.json");
复制代码

可是这个 json 的内容必需要有如下几个元素：

{
    "modelType": "obj", // 必须设置此属性为 obj 格式
    "obj": "./obj/city.obj", // 必须设置 obj 属性
    "mtl": "./obj/city.mtl" // 此项可写可不写，若是须要设置 obj 模型的样式（如颜色等），则必须设置此项
}
复制代码

可是这种模式不适用于这个场景，由于个人模型有些大，须要调用到 obj 模型的原始大小 rawS3 属性除以必定比例后再显示。

建立面片

上面提到了 createNode 方法，这个方法主要是用来建立显示为“面片”类型的节点。所谓“面片”，即为只有一个面。经过这种在一个面上显示一张矢量图的方式，结果会比在一个六面体上显示一张图的性能好， HT 3D 场景简单的时候可能看不出来效果，若是场景卡顿，立马就能看出“面片”的优点了：

function createNode(p3, s3){
    var node = new ht.Node(); // 建立一个新的节点
    node.p3(p3); // 设置节点的位置
    // node.s3(s3);
    node.s({
        'shape3d': 'billboard', // 设置节点的 shape3d 类型为 billboard 类型，显示为“面片”
        'shape3d.image': './symbols/智能楼宇/camera.json', // 3d图形总体贴图
        'shape3d.image.cache' : true, // 若是贴图是矢量，是否缓存（缓存后性能会获得提高）
        'shape3d.autorotate': true, // 是否自动朝向相机
        'shape3d.transparent': true, // 决定3d图形是否透明
        'shape3d.alwaysOnTop': true,// 是否老是在最前
        'shape3d.fixSizeOnScreen': [ 38, 47 ] // 是否不管缩放远近，在屏幕内呈现固定大小，值可为 true（使用图片或矢量自身大小）/false, 也能够是[100, 200]（对应宽高）
    });
    dm.add(node); // 将节点添加进数据容器中

    g3d.invalidateShape3dCachedImage(node); // cache 的代价是，这里须要更新
    return node;
}
复制代码

事件交互

而后我就在想，既然到了楼层的 3D 模型显示，那么怎么返回？以哪一种方式返回最好？想来想去比较没有违和感的仍是点击列表组件比较好，就选中了列表组件的顶部：

listView.getView().addEventListener('click', function(e){ // 监听点击事件
    e.preventDefault(); // 阻止默认操做
    if (e.clientY - 120 < 50) {
        showCity(); // 显示初始 3D 楼宇场景
        listView.dm().sm().cs(); // 列表设置清除全部选中元素
    }
});
复制代码

全部代码结束！

总结

这个 3D 智能楼宇监控系统很是的简单，对于技术人员来讲是彻底没有挑战性的，主要工做内容在美工上，这么一来，若是要添加比较复杂的需求，技术人员就能够全身心地投入到产品上，而不是一些繁琐的 3D 模型的搭建了。总而言之，我以为这个 Demo 很是具备表明性，因此想拿出来跟你们分享一下，一块儿讨论一下前端的趋势所在。

hightopo.com/demo/intell…