无插件纯web 3D机房 (第四季:大型园区、地球仪效果和其他扩展应用)

本文主要是介绍无插件纯web 3D机房 (第四季:大型园区、地球仪效果和其他扩展应用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

初次见面的朋友们大家好,这篇文章是“无插件纯web 3D机房”系列的第四季,感兴趣的朋友可从头开始观看,以下是正确的阅读顺序:

无插件纯web 3D机房(第一季:从零开始搭建Web 3D机房)
无插件纯web 3D机房(第二季:机柜和设备)
无插件纯web 3D机房(第三季:资产管理和动环监控)

木有耐心的童鞋也可以直接简单粗暴地戳视频查看效果:

答一些读者问

阔别了半年多,哥其实没闲着,在憋大招来着。期间陆续收到朋友的留言和来信,提了不少特别棒的意见和想法,项目也有了很大的进展,在接下来的文章里,哥会无私和大家分享。

不扯了,进入正题。首先,想说一个最近一直在和大家探讨的问题:HTML5好还是插件好?

无论是在学习还是在做项目的一些朋友都提到了这个问题。尽管web3d技术风起云涌,大体还是分为两大流派:插件派和HTML5派。插件派的技术路线是,在浏览器中安装一个企业自己做的插件,然后在这个插件上提供3D的开发能力。典型代表例如Flash插件、Unity3D插件(简称U3D)。另外一派就是无插件的HTML5路线,它使用H5的WEBGL标准和Canvas技术来实现浏览器中的3D/2D技术,而无需安装插件。

插件的好处是可以适配各种老型号的浏览器(例如老版本的IE),效率应该也会好一点。缺点是,需要安装插件,跨手机平板也麻烦,语言上要使用插件要求的语言。HTML5的好处是不安装插件,效率也很不错,语言简单统一,都是javascript,而且是目前最火的技术方向。

本人相信 “插件必死”的发展趋势。要是不服,就看看Flash,和那些被坑在Flex技术上现在还爬不出来眼看着别人学HTML5拿高薪恨得吐血的程序猿们吧。谁又能保证Unity3D不会有一天变成另外一个Flash呢?看看现在日新月异每天大量涌现的HTML5技术和应用,我们有时间争论插件好还是H5好这样的无聊问题,还不如实实在在地干起来。达成共识后,我们来开始看此次的一大波更新。

鹰眼

上次的小机房功能已经基本完成了,客户对演示效果也非常满意。由于客户使用过我们之前做的2D系统,看到过鹰眼功能(也就是缩略图),所以这次毫不犹豫也要求3D机房监控界面增加鹰眼功能。这个把哥难了一阵子。

为了寻找思路,哥首先打开了我们之前做过的2D的拓扑图,寻找灵感。鹰眼看上去是这样子的:
图片描述

上面的界面是同事给客户做的虚拟机开通、配置的编辑界面,右下角的这块试图就是鹰眼缩略图。咨询同事,他说鹰眼在2D实现的时候,可以考虑把2D大图做一个内存缩略图更新到鹰眼视图,或在大图发生任何属性变化时候进行监听,然后动态生成缩略图更新鹰眼视图。不过在3D里面会有所不同:弄一个小尺寸的webgl的canvas实时刷新,应该负载也不大。所以决定再new一个network放在右下角试试:

var overview = new mono.Overview3D(network);
overview.adjustBounds(200,200);
var rootView = overview.getRootView();
network3d.getRootView().appendChild(rootView);

同时,还要把镜头固定到头顶上方垂直向下看,并去掉鼠标的交互机制。经过一番折腾,终于把一个鹰眼画布放在大的场景画布的右下方,看看效果:
图片描述

设备编辑器

这次项目中据说有200多种不同的设备,每个设备面板都不一样,要给每一个设备建模,这不是纯体力活吗?就算丢给美工组做,也得耗费好多个人天呢,而且模型的复用性也不高。考虑再三,项目组紧急开发了设备面板的编辑器,很好地解决了这个问题。我试了一下,以做一个标准的机架设备为例,还是很快的:
图片描述

编辑器里面把常见的端口和面板都做好了,拖拖拽拽、对齐吸附,放上logo,很快一个像模像样的交换机就出来了,真是个良心产品!点击按钮导出json,可以直接在项目里面用了。当然,我这边的用法是把设备继续往机柜上放。机架编辑器是我这里开发的,效果差不多,可以直接把设计好的设备拖放到机柜的位置上:
图片描述

接下来,再把机柜往房间里面拖,房间的形状也要编辑的:
图片描述

直接点击3D按钮可以预览一下:
图片描述

对了,这里要注意的是一排机柜一般都会配置一个列头柜,专门控制电路等信息的,双击它会弹出一个电路配置界面:
图片描述

据说这个界面也有编辑器可以直接拖拽生成,这样就更方便了。

更多场景

其实对于机柜场景的编辑,模型稍作变化,就可以应付其他行业的应用。

3D仓库

例如把机柜变成货架,把服务器变成货物,简单拖拽,会是什么场景呢?可以想象一下。
图片描述

3D工厂

继续想象,如果把机柜变成生产加工车间的机床,简单拖拽、添加告警信息,又是怎么样一番景象呢?
图片描述

图片描述

3D变电站

再比如,把场景里面的模型换为变电站里面的变压器、楼房、龙门架等,加上告警和交互,不就是一个户外变电站监控的应用吗?
图片描述

3D加油站

如果把模型换为加油站,就是一个加油站SCADA和监控的应用:

图片描述

图片描述

3D工控应用

当然如果跟硬件连上,就可以做工业上各种检测和控制了:
图片描述

当然自动控制应用需要数据采集存储转发云平台组态系统等内容,等以后有机会单独写一篇和大家探讨。

管线

机房里有很多物理的或逻辑的链路信息,例如网线、光纤,一些业务上的连接关系等。这些管线要显示在机房中,就需要对管线进行建模、存储、显示。显示的部分,我这里做了简单的空间自动路径,寻找最合适的路线走向,并将A端和Z端设备之外的物体虚化,可以把管线显示的更清晰:

图片描述

对于跨楼层的链路,也可以清晰的呈现:
图片描述

会议室

根据客户要求,会议室场景也应该建模。经过同事现场拍照考察,会议室结构并不复杂,于是依旧让美工妹妹操刀,很快做完了会议室模型:

图片描述

当然,这里面的场景并不是固定不变的,例如双击投影仪可以让他在投影幕布上播放视频;双击门可以打开,等等。这是因为我们对这里面的模型进行了分拆、动作定义。

例如下面墙上的电视屏幕,双击可以显示机房的统计信息图。
图片描述

继续双击屏幕上的统计图,可以把2D的统计图程序界面直接显示出来,进行交互。
图片描述

这也是使用HTML5的2D和3D技术的混合优势。

园区

客户要求机房所在的园区也要加到场景中,想一想也合理。项目大了后,机房会分布在好几个楼宇的不同楼层,要查看必须有一个3D全景场景进去才方便。这个难度倒是不大,找美工妹子帮忙。妹子比开发商还快,用了几个小时,一个全新楼盘便在3D Max中诞生了。转obj,导入系统,急忙打开浏览器看效果:
图片描述

这里的一个经验是,如果要做到双击大楼能够进去,就要把大楼拆成单独的模型进行加载、监听事件。

地球

问题又来了。客户说北京上海全国各地有多处机房,需要统一显示和管理。看来园区已经不够用了,需要一个全国地图。如果过几天客户说美国还有一个机房怎么办?干脆直接整个地球显示吧,一步到位。等客户要求火星有机房的时候再说吧。

弄一个地球用3D太简单方便了,贴图加光晕,分分钟出来:
图片描述

接下来把中国的区域高亮出来,突出我国的地位。这个做法是准备一个透明的中国地图轮廓,如下图:
图片描述

然后把地图作为贴图叠加在地球上,调整位置:
图片描述

接下来做几个数据中心的节点。用一个小小的球就可以吧!
图片描述

为了防止看上去枯燥,把数据中心的连线用流动动画显示,每个数据中心用一个发光的图片动画做成旋转发光效果,看上去就生动多了。

当然我们项目里最后做成的效果是这样的:

图片描述

有没有瞬间高大上的感觉?这还不算完,另外一个同事把我的代码拿过去,又增加了一些乱七八糟的效果,变成了这样:

图片描述

主要是增加了一些地理位置的热点,环绕地球的卫星,以及一些弹道导弹的攻击动画效果。据说某国防单位需要这样的显示方法,具体咱就不了解啦,总之有点科幻感了。

说道弹道攻击效果,想起项目中另外一个网络攻击的显示界面,也很有意思,虽然是2D的,但是也有不错的动画效果:

图片描述

这里面的爆炸效果、弹道效果,都用了HTML5的canvas里面2D的一些API绘制,例如模糊、渐变等。综合利用2D+3D来呈现网络攻击,还是非常直观的。还可以把网络攻击的应对流程通过3D化的泳道图显示出来进行分析:
图片描述

至此,一个“从地球到设备端口”的多层次、大型综合3D机房系统就构建成了。怎么样,HTML5的3D技术不是“小玩具”吧?只要认真打造,完全可以支撑各种大型行业应用了。咱们程序猿也不要徘徊等待了,抓紧学习HTML5的2D、3D技术吧!

最后老规矩,觉得图片不过瘾,需要一睹3D机房真容的同学,可以发邮件到tw-service@servasoft.com,索取程序代码,依然真诚欢迎大家各抒已见,共同进步~

图片描述

转载于:https://www.cnblogs.com/twaver/p/5620432.html

这篇关于无插件纯web 3D机房 (第四季:大型园区、地球仪效果和其他扩展应用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/308677

相关文章

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

hdu1394(线段树点更新的应用)

题意:求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质,在0到n-1这些数字组成的乱序排列,将第一个数字A移到最后一位,得到的逆序数为res-a+(n-a-1) 知道上面的知识点后,可以用暴力来解 代码如下: #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in

zoj3820(树的直径的应用)

题意:在一颗树上找两个点,使得所有点到选择与其更近的一个点的距离的最大值最小。 思路:如果是选择一个点的话,那么点就是直径的中点。现在考虑两个点的情况,先求树的直径,再把直径最中间的边去掉,再求剩下的两个子树中直径的中点。 代码如下: #include <stdio.h>#include <string.h>#include <algorithm>#include <map>#

科研绘图系列:R语言扩展物种堆积图(Extended Stacked Barplot)

介绍 R语言的扩展物种堆积图是一种数据可视化工具,它不仅展示了物种的堆积结果,还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异,为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)