工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

前言 3D 可视化,就是把庞大抽象的数据信息,以合适的视觉元素及视角去出现,利便系统的展示、维护和治理。而在可视化系统的搭建选择上,所出现的气概样式效果多种多样,各自所突出的适用场所也不尽相同。对于科技气概上的体现,
线框模式可能是最具有代表性意义的实现方式之一。
机房数据可视化的管控维护的实现上,在
工业互联网的推动下,体现的维护数据和系统搭建也越来越多样化,而 
Hightopo(以下简称 HT )的 
HT for Web 产物上的有着厚实的组态化可供选择,本文将先容若何运用 HT 厚实的 
2/3D 组态搭建出一个线框楼宇可视化机房的解决方案。  
界面简介及效果预览 主页面的出现上以线框的科技气概为主的大楼设计,大楼环绕着数字飞升的光柱,场外漫衍着车流穿梭效果和停车场的模拟实现,其中数据中央上有着许多个装备的展示处置以及装备的预警处置,主体办公大楼侧边并列出现着楼层的漫衍——办公楼层场景以及机房楼层场景;切换到内场景中的机房场景,展示了机房装备群的排列,单击选中机柜会视角转化到此装备上,而且虚化周围装备,展示出所点击的机柜信息,同时还具备一键切换查看机柜的利用率信息;另外一个内场景办公室,则起到了展示一样平常办公的应用场景,可以添加维护的信息数据来治理。
工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现  
工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现  
系统分析 纵观在工业互联网的推动下,机房可视化系统的生长是极为重要的一环。而3D可视化作为一个可举行交互式、带有多种视觉模拟体验的机房治理平台,其具有机房资产、能源、环境等治理功效,对机房全方面集中监控、统一治理。这是作为机房内部数据监控的重要一环,而整体的气概搭建上,外部修建和装备接纳的是科技气概的线框模式,在效果展示上可以更为的酷炫,交互体验上也可以增值加分。
1、线框模式的科技气概搭建 在一模一样的场景修建建模中,大部分都是实景上的搭建,感官上差别于科技气概的数字化展示来的震撼和酷炫,线框模式就很好地诠释了这一气概。
工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现  
2、3D 可视化数据中央机房监控治理系统的搭建与应用 3D 可视化数据中央机房集中监控治理系统对机房实现远程集中监控治理,实时动态出现装备告警信息及装备参数,快速定位出故障装备,使维护和治理从人工被动看守的方式向盘算机集中控制和治理的模式转变。
工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现  
代码实现
一、线框气概科技场景 在 3D 场景气概中,有着许多实现的方式选择,而线框气概是最为体现科技感的一种实现方式。场景修建以及装备主体以线框气概展示,其中数据中央上的装备也会对应处置预警事宜的展示。 线框模式是对于模子建模 obj 的一种特殊处置,机制封装在 HT 自己内里,而我们在开启线框模式的同时,可以选定一些建模气概上的限制,例如模子 obj 的四边面或者三边面就会影响到线框里线的绘制方式,这里通过合并三边面,而且开启显示四边面来起到线框气概上的简练体现:

// 控制是否载入 obj 的四边面,否的话通过算法合并三角面
ht.Style['wf.loadQuadWireframe'] = false; 
// 控制是否显示四边面
ht.Style['wf.combineTriangle'] = true; 

工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

在气概基调确定后,在主体大楼场景做还需要做一些简朴的事宜机制处置,例如模子选中状态的显示和装备预警信息弹窗的显示。

模子状态的体现是开启了模子选中的外框高亮显示:

// 开启模子选中高亮线框宽度为1
g3d.getHighlightHelper().mode = 1;

工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

开启了模子选中高亮后,我们可以很清晰地体现出所点击的模子,搭配上点击事宜的处置,装备信息弹窗的展示,在交互体验上就会有一种很友好的效果展示。对于装备信息的弹窗展示,是先通过对装备举行绑定标签,然后通过这个唯一的标签在数据模子 dataModel 去找到这个装备,然后弹出相对应的弹窗信息或者预警事宜。

// 凭据唯一标识标签从数据模子中获取节点信息
this.equipmentPanel = g3dDm.getDataByTag('equipmentPanel');
this.alarmEquipmentPanel = g3dDm.getDataByTag('alarmEquipmentPanel');
this.buildingPanel = g3dDm.getDataByTag('buildingPanel');

handleInteractive(e) {
    // 获取事宜类型 kind 和事宜处置节点 data
    const {kind, data} = e;
    if (kind === 'clickData') {
        let tag = data.getTag();
        if (!tag) return;
        if (tag === 'equipment') {
            // 获取所点击装备的位置信息
            var p3d = data.getPosition3d();
            // 装备位置信息上对应空间坐标 Y 轴上设定增添20的高度
            p3d[1] = p3d[1] + 20;
            // 获取装备面板
            var panel = this.equipmentPanel;
            // 装备面板显示展示
            panel.s('3d.visible',true);
            // 设置装备面板坐标
            panel.setPosition3d(p3d);
            // 隐藏大楼面板和预警面板
            this.buildingPanel.s('3d.visible',false);
            this.alarmPlane.s('3d.visible',false);
        }
        if (tag === 'alarmEquipment') {
            // 获取所点击装备的位置信息
            var p3d = data.getPosition3d();
            // 装备位置信息上对应空间坐标 Y 轴上设定增添20的高度
            p3d[1] = p3d[1] + 20;
            // 获取预警面板
            var panel = this.alarmEquipmentPanel;
            // 预警面板显示展示
            panel.s('3d.visible',true);
            // 设置预警面板坐标
            panel.setPosition3d(p3d);
            // 隐藏大楼面板和装备面板
            this.buildingPanel.s('3d.visible',false);
            this.equipmentPanel.s('3d.visible',false);
        }
        if(tag === 'building'){
            // 显示大楼面板
            this.equipmentPanel.s('3d.visible',true);
            // 隐藏装备面板
            this.alarmEquipmentPanel.s('3d.visible',false);
             // 隐藏预警面板
            this.buildingPanel.s('3d.visible',false);
        }
    }
    // 点击靠山则隐藏所有面板信息
    if(kind === 'clickBackground'){
        this.equipmentPanel.s('3d.visible',false);
        this.alarmEquipmentPanel.s('3d.visible',false);
        this.buildingPanel.s('3d.visible',false);
    }
}

 

二、3D 动画效果的实现 在 3D 场景中有着许多动画的聚集,可以通过简朴清晰地体现出场景中一些所需的元素,例如车流穿梭、数字飞升以及停车场停放的效果,可以给静态的场景添加活力。 通过标识获取到对应的数字、车流和光柱节点,然后通过简朴封装的动画函数驱动实现出以上的效果状态:

// 遍历数据模子获取所要寻找的标识节点做响应的动画
g3dDm.each((data) => {
    // 获取节点标识
    let tag = data.getTag();
    if (tag === 'num') {
        // 数字飞升动画
        animNum(data);
    } else if (tag === 'car') {
        // 设置车辆节点的初始 uv 偏移
        data.s('top.uv.offset', [1, 0]);
        // 车辆穿梭动画
        animCar(data);
    } else if (tag === 'light') {
        //光柱飞升动画
        animLight(data);
    }
});

而所有动画效果的实现,都是基于 HT 封装的 ht.Default.startAnim() 动画函数,支持 Frame-Based 和 Time-Based 两种方式的动画,本可视化系统中接纳的是后面一种实现方式,通过 duration 对于动画时间的控制和 easing 让用户自定义,通过数学公式控制动画,如匀速转变,先慢后快等效果。基于动画函数的实现上,对各自展示节点的效果显示上,又封装了三个函数做对应的处置。

 

工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

数字飞升动画效果实现的封装函数为:

function animNum(data) {
    // 设置节点巨细的局限随机数处置
    var temp3 = 16 - 8 * (Math.random());
    // 设置动画运行时间的局限随机数处置
    var temp4 = 1200 + Math.random() * 2000;
    // 设置节点在空间坐标 Y 轴上的局限随机高度
    var temp5 = 400 + Math.random() * 200;
    // 开启动画函数
    ht.Default.startAnim({
        duration: temp4,
        easing: function (t) {
            return t * t
        },
        action: function (v, t) {
            // 获取节点的位置坐标信息
            var p3d = data.getPosition3d();
            // 设置节点的新位置坐标信息
            data.setPosition3d(p3d[0], temp5 - temp5 * v, p3d[2]);
            // 设置节点的巨细信息
            data.setSize3d(temp3, temp3, temp3);
        },
        // 动画函数竣事后继续回调此动画函数
        finishFunc: function () {
            animNum(data);
        }
    });
}

 

工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

车辆穿梭动画效果实现的封装函数为:

function animCar(data) {
    // 开启动画函数
    ht.Default.startAnim({
        duration: 5000,
        easing: function (t) {
            return t
        },
        action: function (v, t) {
            // 判断节点的顶面贴图是否为所需的对应信息贴图
            if (data.s('top.image') === 'symbols/htdesign/填充/飞光渐变 2.png') {
                // 获取节点的 uv 偏移信息
                var offsetX = data.s('top.uv.offset')[0];
                // 设置偏移新值到节点上
                offsetX = (offsetX - 0.01) % 1;
                data.s('top.uv.offset', [offsetX, 0]);
            }
        },
        // 动画函数竣事后继续回调此动画函数
        finishFunc: function () {
            animCar(data);
        }
    });
}

而光柱的实现方式上也是与数字飞升的效果一样,通过在随机的局限位置坐标内通过设定差别的时间差随机天生,来形成与数字飞升为对立面的光柱下降效果,与线框修建的科技气概融为一体,很好地诠释了整体气概的展示,这里对于光柱的动画就不再多加赘述了。

金融SaaS平台之构思篇,金融行业数据仓库的建设思路

 

工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

相对应的是,停车场随机停放的效果展示,差别于以上的动画视觉展示,自己照样具有其效果意义的,可以对接真实的数据举行对整个停车场的车辆安放做可视化的数据维护和治理,而我们这里的实现上,则很好地模拟了这一事宜的处置方式,也是通过一个简朴的封装函数来体现停车场的动画效果:

function animPark(data) {
    // 设置随机值来体现车辆随机停放的信息
    var temp = Math.random();
    // 凭据随机值判断车辆安放的状态
    if (temp<0.15) {
        data.s('all.color','rgb(255,184,77)');
    } else if (temp>0.6) {
        data.s('all.color','rgba(0,153,255,0.10)');
    }
    ht.Default.startAnim({
        duration: 2000,
        easing: function (t) {
            return t
        },
        action: function (v, t) {
        },
        // 动画函数竣事后继续回调此动画函数
        finishFunc: function () {
            animPark(data);
        }
    });
}

 

三、机房的实现 机房的实现上,通过点击机柜转移锁定视角后展示机柜的内部信息,而且虚化周围装备的状态,双击靠山则会返回到初始的视角而且恢复默认状态;其次,通过按钮触发显示机柜的利用率色块展示,可以很周全地观察到各个机柜的内部消耗信息,利便整体机房的维护和治理。
工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现 在机柜的点击事宜处置上,先使得整体的机房机柜所有开启透明而且降低透明度到达整体虚化的效果,然后通过点击事宜的处置,获取到节点信息,此时运用到封装好的开门动画函数,开门后虚化掉这个机柜的外壳后,显示展示机柜的内部装备信息;双击靠山则恢复之前所做的效果处置操作,视角转移到默认机房视角。 在点击事宜监听后,通过 HT 封装的视角转移函数 flyTo() 锁定到对应的机柜:

  • direction:默认undefined,眼睛处于目的的偏向(相对目的,受到目的自身旋转影响),例如[0,1,5]在目的正面的斜向上;
  • animation:默认false,是否使用动画,可以设置为true或者false或者animation动画工具;
  • ratio:默认0.8,浮点类型,示意眼睛跟中央的距离动态盘算(例如 0.8 示意眼睛在上述偏向上动态盘算距离以将目的笼罩盒的8个角所有适配到屏幕80%局限内);
g3d.flyTo(data, {
    direction: [0, 10, 10],
    animation: true,
    ratio: 0.9,
});

 

工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

对于门的开启动画,首先是将门设置对应的机柜为父节点,通过点击事宜的监听处置后,凭据多点击的节点,将对应的门节点和旋转角度信息,去挪用门的封装动画函数:

// 传入节点和旋转角度信息
export function animDoor(data, x) {
    // 开启动画函数
    ht.Default.startAnim({
        duration: 1200,
        easing: function (t) {
            return t
        },
        // 动画执行函数,凭据传入的角度信息做旋转角度的动画
        action: function (v, t) {
           data.setRotation3d(0,-v * x,0);
        },
        finishFunc: function () {
            // 设置门的父节点机柜透明度为0.1
            data.getParent().s('shape3d.opacity', 0.1);
            // 遍历门的父节点机柜并设置透明度为0.1
            data.getParent().eachChild(function (data) {
                data.s('shape3d.opacity', 0.1);
            })
        }
    });
}

 

工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

对于双击靠山的视角返回处置,是通过 HT 封装的相机移动函数 moveCamera(),可以凭据所要到达的视角中央(center)和眼睛(eye),通过开启动画函数到达一种视角切换的过渡效果:

  • eye:相机位置坐标;
  • center:中央点位置坐标;
  • anim:默认 false,是否使用动画,可以设置为true或者false或者animation动画工具;
 g3d.moveCamera([1294, 898, 1671], [0, 0, 0], true);

 

工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现

对于机柜所占用的能耗和处置能力,可以通过机柜利用率来体现,这样不仅能直观地体现每一个机柜的使用情况,还能通过反馈的使用情况,即时对一些负载的机柜或者是低使用率的机柜,做出智能调整,使其机柜群到达最大效率化的事情状态。而详细的实现方式是通过在机柜群上动态天生,占用机柜高度比例巨细的节点,通过随机取值的方式,而且约定能耗颜色的显示,来体现出机柜当前的利用率信息。

loadCapacityNode(g3dDm, cabinetList) {
    cabinetList.forEach((data) => {
        // 建立新的利用率容量节点
        var node = new ht.Node();
        // 天生随机数
        var randomNumber = Math.random() * 100;
        // 通过随机数值来体现对应的机柜利用率颜色的转变
        var color;
        if (randomNumber <= 30) {
            color = 'rgb(51,153,255)';
        } else if (randomNumber > 30 && randomNumber < 60) {
            color = 'rgb(240,225,19)';
        } else {
            color = 'rgb(242,83,75)';
        }
        // 设置利用率容量节点的位置信息
        node.p3(data.p3());
        // 设置利用率容量节点的锚点信息
        node.setAnchor3d(data.getAnchor3d());
        // 设置利用率容量节点的高度信息
        node.s3(data.getWidth(), data.getTall() * (randomNumber/100), data.getHeight());
        // 设置利用率容量节点的一些基本属性
        node.s({
            '3d.visible': false,
            '3d.movable': false,
            'all.color': color,
            'wf.visible': true,
            'wf.color': 'rgb(247,247,247)'
        });
        // 设置容量节点为机柜,利便返回房间视角的时刻遍历机柜节点一并隐藏
        g3dDm.add(node);
        this.capacityList.push(node);
    })
}

 

总结 线框气概只是科技气概上效果展示的一种形态,HT 自身通过数年来的行业积累,总结出了许多的气概基调设定和对应的行业应用场所,加上自身厚实的组态化快速搭建上,顺应工业互联网的浪潮,可以推动实现许多行业上的解决方案,例如数字孪生的衍生,新基建的可视化系统等普遍的行业上都有涉及,在多种多样的行业领域上,信赖 HT 一定带你挖掘不一样的工业互联网!
工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现 2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新颖的实例,也能探索许多好玩的效果实现和工业互联网的展示:
https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA 同时,你也可以查看更多案例及效果:
https://www.hightopo.com/demos/index.html

原创文章,作者:28x29新闻网,如若转载,请注明出处:https://www.28x29.com/archives/13436.html