基于 HTML WebGL 的会展中心智能监控系统

前言

随着近几年物联网、万物互联等诸多概念的大行其道，智慧城市的概念也早已经被人们耳熟能详，而作为城市的组成部分，智慧建筑也是重中之重，智慧园区，智慧小区等也如雨后春笋般的相继出现。

智慧建筑是指通过将建筑物的结构、系统、服务和管理根据用户的需求进行最优化组合，从而为用户提供一个高效、舒适、便利的人性化建筑环境，智慧建筑绝不仅仅只是智慧园区、智慧小区这种模式，这里我就通过 HT for Web 制作了一个以会展中心为主体的智慧建筑监控系统。

效果预览

代码实现

场景呈现

通过上面的效果预览，可以分辨出整个监控系统是分为 3 个层次的，分别是主体、楼内、展厅，如果是使用单个 graph3dView 加载所有场景，通过 dm.clear() 清除场景，dm.deserieialize() 加载新场景这种切换方式必然会有一个极短的渲染时间，使切换时不连贯，所以我这里就使用了 3 个 graph3dView ，去呈现各自的层级模型，通过 notifier 事件通知器监听场景切换，代码如下：

notifier.add((event) => {
    if (event.kind === 'sceneChange') {
        const oldSceneKey = event.oldScene,
            newSceneKey = event.newScene,
            oldScene = G[oldSceneKey],
            newScene = G[newSceneKey];

        oldScene.removeFromDOM();

        newScene.addToDOM();

        if (newScene.graph2d.isAnimed) {
            newScene.graph3d.animByList();
        } else {
            newScene.graph3d.animByList(newScene.graph2d.animByList, newScene.graph2d);
        }

    }
});

其中 removeFromDOM 是自行封装的一个方法

removeFromDOM() {
    const g3d = this.g3d,
        view = g3d.getView();

    if (view.remove) {
        view.remove()
    } else {
        view.parentNode.removeChild(view)
    }

    this.notifier.fire({
        kind: 'reset',
    });
}

但是这样还是有一个问题，graph3dView 默认如果不放到页面中，场景中的 obj 等模型相关资源是不会请求和渲染的，这样对性能是十分友好的，但是当我第一次切换场景时，还是会有短暂的请求和渲染时间，所以这里我需要对资源进行预加载。

资源预加载

这里我通过在 body 中添加一个不在窗口展示的与窗口等宽高的 div 元素，通过把当前不展示的 graph3dView 放到其中触发对相应 obj 等模型资源的请求和渲染，完成预加载，代码如下：

const preloadDiv = document.createElement('div');
preloadDiv.style.position = 'absolute';
preloadDiv.style.bottom = '100%';
preloadDiv.style.width = '100%';
preloadDiv.style.height = '100%';
document.body.appendChild(preloadDiv);

scene2.addToDOM(preloadDiv);
scene3.addToDOM(preloadDiv);

模型加载完成后再执行动画

web 页面加载是依赖网速的，会展中心模型 obj 等资源文件是有一定大小的，可能对于不同带宽网速的用户所需要加载的时间也不尽相同，这里就需要判断下 obj 是否全部加载完成，加载完成后再执行动画效果，通过 ht.Default.handleModelLoaded 监控是否所有模型都请求加载完成, 加载完成后开始执行动画，顺便释放之前预加载的 graph3dView ，代码如下：

let modelSize = 0;
ht.Default.handleModelLoaded = (name, model) => {
    modelSize++;
    if (modelSize === 62) {
        scene1.graph3d.enableShadow();
        scene3.graph3d.enableShadow();
        scene2.removeFromDOM();
        scene3.removeFromDOM();
        scene1.graph3d.animByList(scene1.graph2d.animByList, scene1.graph2d);
    }
};

动画依参数顺序执行

我想要场景第一次加载时，视角拉近后左右两边的面板再一点一点的加载出来，动画效果是不完全线性顺序的去执行，所以我这里通过 ht.Default.startAnim 方法封装了一套通过参数数组进行的动画的方法，代码如下：

animByList(callback, obj) {
    this.isAnimed = true;
    const animList = this.animList,
        self = this;

    let callAnim = (ind) => {
        const param = animList.get(ind);

        param && self.anim(param, () => {
            callAnim(ind + 1);
            const lastParam = animList.get(ind + 1);
            lastParam || callback && callback.call(obj || this);
        });

    };

    callAnim(0);
}

anim(animParam, callback) {
    const self = this,
        time = animParam['time'] || 1000,
        easing = animParam['easing'] || function (t) {
            return t * t;
        },
        func = animParam['func'];

    this.__animObj = ht.Default.startAnim({
        duration: time || 1000,
        easing: easing,
        action: function (v, t) {
            const V = v,
                T = t;

            function animFunc(param) {
                let v = V,
                    t = T;
                if (param instanceof Function) {
                    param(v, t);
                } else {
                    const type = param['type'],
                        object = param['object'],
                        objectTag = param['objectTag'],
                        key = param['key'],
                        oldValue = param['oldValue'],
                        newValue = param['newValue'],
                        oneTime = param['time'],
                        scope = param['scope'];

                    if (scope) {
                        v = v < scope[0] ? 0 : v > scope[1] ? 1 : (v - scope[0]) / (scope[1] - scope[0]);
                    } else {
                        v = !oneTime || oneTime > time ? v : v * time / oneTime < 1 ? v * time / oneTime : 1;
                    }

                    let obj, value;

                    obj = object ? object : objectTag ? self.view.dm().getDataByTag(objectTag) : undefined;

                    if (!obj) return;

                    if (!isSameType(oldValue, newValue) || !isNumORNumArray(oldValue)) return;

                    if (oldValue instanceof Array) {
                        if (oldValue.length !== newValue.length) return;
                        const darr = newValue.map((n, i) => {
                            return n - oldValue[i];
                        });

                        value = oldValue.map((n, i) => {
                            return n + darr[i] * v;
                        });
                    } else {
                        const d = newValue - oldValue;

                        value = oldValue + d * v;
                    }

                    ht.Default.setPropertyValue(obj, type, key, value);
                }
            }
            if (animParam instanceof Array) {
                animParam.forEach(ele => {
                    animFunc(ele);
                });
            } else {
                animFunc(animParam);
            }
        },
        finishFunc: function () {
            func && func(func);
            callback && callback();
        },
    });
}

参数格式如下：

// 视角移动
param = {
    object: g3d,
    type: undefined,
    key: 'eye',
    oldValue:  [-118, 5130, 15858],
    newValue: [-26, 1130, 3494],
    time: 1000,
}
 animList.add();
// 标题从左到右出现
param = {
    object: title,
    type: 'style',
    key: 'clip.percentage',
    oldValue: 0,
    newValue: 1,
    time: 1500,
};
animList.add(param);

可点击部分高亮效果

为了突出可以点击的部分，我加了高亮效果，设置鼠标悬浮高亮模式，并通过 g3d.getHighlightHelper().setFetchTargetFunc 方式筛选需要鼠标高亮的图元，代码如下：

g3d.setHighlightMode('mouseover');

g3d.getHighlightHelper().setFetchTargetFunc(function (nodes) {
    let sortList = new ht.List(nodes);
    return sortList.toArray(node => {
        return jumpList.contains(node);
    });
});

楼层视角跳转

因为整体的楼层比较大，而每个楼层中可选择的展区又比较小，所以这里我做了一个视角调整，可以使用单独移动视角到正视相应楼层的视角 flyTo，这里除了采用右侧边栏选中移动，也做了鼠标移入相应楼层右键改变视角的处理，使用了新建的类 messageView 做交互提示。

g3d.flyTo(floor, {
    animation: true,
    direction: [0, 1, 2],
    center: floor.p3().map((n, i) => {
        return i !==1 ? n : n + floor.getTall() / 2;
    }),
    distance: distances[newFloor - 1],
});

总结

随着科技的井喷式发展，智慧建筑将如雨后春笋般崛起，其应用的场景也会不断拓展，应运而生的数据可视化管理系统也应该配套升级，为其把数字信息变为直观的、以图形图像信息表示的信息，清晰的展现在客户的面前，这将是无可阻挡的时代大趋势。

还有更多的可视化案例可以参考：https://www.hightopo.com/demos/index.html