这一篇书接上文,说一说剩下的一些模块. 1. 机箱存储占用比率 机箱存储占用比其实很简单,就是在机箱上新加一个组即可,然后根据比率值来设置颜色,这个颜色我们去HSL(0.4,0.8,0.5) ~ HSL(0,0.8,0.5)就是从绿色到红色.我们就不多废话了. 2. 监控摄像视角 监控摄像相机我在强的四个角都放了一个,这里面我们引入了OBJ模型,模型是不带贴图的,因此需要自己慢慢设置,幸好这个模型不是很难,只有5个Mesh.如下图 这个模型由于是斜的,所以图上的和它对角的能够很好的展示,另外两个

先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应用几乎一致性的首选HTML5,当然Flex和Silverlight的遗留系统依然存活着,如果不考虑移动终端,不考虑将来维护人员难找,不考虑需要承载成千

先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应用几乎一致性的首选HTML5,当然Flex和Silverlight的遗留系统依然存活着,如果不考虑移动终端,不考虑将来维护人员难找,不考虑需要承载成千上万的网元数量,不考虑公司员工的职业生涯前途,哪怕其各自父母adobe和ms都已弃之,其实Flex和Silverlight作为企业应用方案技术上还

前言 近期项目开发任务告一段落,刚好有时间整理这大半年的一些成果.使用html5时间还不久,对js的认识还不够深入.没办法,曾经一直搞java,对js的一些语言特性和概念一时还转换只是来. 上一篇第一弹介绍了项目中做的一个彩虹爆炸图,主要用了 html5的canvas的2d绘制技术.这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及怎样用它打造精美的3D机房监控系统. 目标效果图 下图是客户给找的一张的效果參考图,希望机房至少能达到以下的3D效果. 懂的人都知道,这但是一张设计公司出

前言 最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果.使用html5时间还不久,对js的认识还不够深入.没办法,以前一直搞java,对js的一些语言特性和概念一时还转换不过来. 上一篇大数据呈现第一弹介绍了项目中做的一个彩虹爆炸图,主要用了 html5的canvas的2d绘制技术.这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及如何用它打造精美的3D机房监控系统. 目标效果图 下图是客户给找的一张的效果参考图,希望机房至少能达到下面的3D效果. 懂的人都知道,这可是一张

前言 初次见面的朋友们大家好,这篇文章是"无插件纯web 3D机房"系列的第四季,感兴趣的朋友可从头开始观看,以下是正确的阅读顺序: 无插件纯web 3D机房(第一季:从零开始搭建Web 3D机房) 无插件纯web 3D机房(第二季:机柜和设备) 无插件纯web 3D机房(第三季:资产管理和动环监控) 木有耐心的童鞋也可以直接简单粗暴地戳视频查看效果: 答一些读者问 阔别了半年多,哥其实没闲着,在憋大招来着.期间陆续收到朋友的留言和来信,提了不少特别棒的意见和想法,项目也有了很大的进展

序: 目前市面上的数据中心主要分两大类,一类属于普通数据中心,机柜按照XY轴 有序排放,一类属于微模块集合的数据中心,多个机柜组合而成的微模块.  本节课主要详细讲解普通数据中心的可视化展示,浏览器直接查看机房实时3D数据.  功能简述:普通3D机房搭建,机柜.服务器.端口实时监控 数据联动展示,机柜动态添加.服务器上下架,动力环境数据可视化展示(温湿度云图,防盗门禁,配店,管线控制).告警展示: 技术难点: 一.如何有效快速根据实际场景搭建机房模型 解决方案:封装各代码模型,复用代码模型,争取

写在前面的话: 说点啥好呢?就讲讲前两天的小故事吧,让我确实好好反省了一下. 前两天跟朋友一次技术对话,对方问了一下Geometry与BufferGeometry的具体不同,我一下子脑袋短路,没点到重点定义,被朋友嘲笑一番,亏还搞了three.js 这么久,这么简单的基础知识尽然不能对答如流,原来都是假把式.着实尴尬至极,尴尬至极.... 朋友间的调侃,本是玩笑,但认真思考,不无道理.正所谓温故而知新,也是我们程序员的必须课程,不仅仅是学习利用新技术,对自己常用的老技术也要时长翻看一下,加强记忆

序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的评论区终于找到了那位前辈的源码,可惜下载后发现是压缩过的.min.js文件.经过各种研究发现,那是人家公司自己卖钱的库,不能完全共享,所以我司决定,派本人研究一下web3D的技术,于是乎便有了下面的技术分享. 一.本着开源的思想,使用three.js框架,封装常用的模型库.先学着那位前辈的样子,使用

原本以为这次的机房资产管理项目告一段落,可以歇一歇,哥还是太天真了.我们伟大的甲方又拿下了第二期的项目,誓把哥的才华发挥到极致啊.国庆长假也没正经休息几天,硬是给人折腾出了个demo,加上了容量管理.电源走线.告警巡航这些实用功能,以及温湿度.风向.门禁.视频监控效果. 对了,第一次来看哥的童鞋,这里有前两篇的链接: 第一季:如何从零开始搭建基于HTML5和WebGL的3D机房场景 第二季:场景和功能的丰富,包括机柜.设备.走线.路径规划等功能 错过前两期的童鞋,依然可以邮件我:tw-servi

序: 上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html) 紧接着上节课的内容 我们这节可来详细讲解机房微模块的三维实现 首先我们先看一下整体的效果图: 这是单个微模块的模拟最后的系统效果 下面我们进入正文,详细讲解创建过程(机房的以及其它动力环境的创建 前面的课程已经讲诉 这里不在累赘描述) 一.创建组件 正所谓造车得现有轮子,那么搭建整个机房得先创建一个个小的组件,最后组合成大的模块.我们的步骤是

接着上一篇文章,<如何用webgl(three.js)搭建处理3D园区.3D楼层.3D机房管线问题(机房升级版)-第九课(一)> 继续讲解关于三维数据中心管线可视化的解决方案. 上一篇我们主要讲解了园区的方案,这一片主要讲解楼层内的以及机房内的可视化管线方案. 因为是继着上一篇文章,这里就不做概念性讲解了. 闲话少叙,我们继着上一篇直接上干货. 1.首先,我们双击某移动楼,进入楼层内部,看一下楼层结构,效果如下: 进入楼层后,线展开显示楼层以及主要管线全貌,然后再合并楼层,隐藏管线. 实现代码

three.js使用的人太少了,一个博文就几百个人看,之前发js基础哪怕是d3都会有几千的阅读量,看看以后考虑说一说d3了,哈哈.吐槽完毕回归正题.前几天郭先生看到网上有人开发了3D机房,正愁博客没什么写的,于是昨天熬夜也做了一个,今天就把大体的流程告诉萌新们,先说说主要功能模块. 墙体.地面.窗户以及门的实现(双击门禁门可开关). 机柜实现(机柜门的开关.机箱的推拉以及开关推拉的条件). 机箱存储占用比率(用颜色表示占用率,并附颜色谱图). 监控摄像视角(包括监控摄像机的模型导入,和四视角监控

序: 能源是文明和发展的重要保障,人类命运不可避开的话题,无论是战争还是发展,都有它存在的身影.从石器时代到现代文明,人类的能源应用在进步,也在面临能源枯竭的危机与恐惧,而开发与应用可再生能源才是解决这一难题的主要途径.中国在这一方面,一直走着实事求是,可持续发展的道路,追求新能源的开发与创新是每一个能源企业的使命. 太阳能能发电应运而生,这是一种清洁有效并且可持续的优质能源,这一能源即解决了能源短缺.持续供应等问题,还保障了环境卫生.中国政府出台了大量鼓励和支持光伏产业的政策法规.企业补贴,碳

对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用.本例是将灯光.雾化以及 eye 的最大最小距离等等功能在 3D 机房中进行的一个综合性的例子.接下来我将对这个例子的实现进行解析,算是自己对这个例子的一个总结吧.整个例子因为没有设计师的参与,所以样式上可能比较简陋,但是在一些细节的地方,比如墙上的贴图.门框嵌入以及灭火器等等,都是尽可能地还原真实的场景,也是花了些心思做这个例子的! 本例地址:http:

前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最符合我的要求,就拿来作为记录. 效果图 这个 3D 机房的 Demo 做的还不错,比较美观,基础的交互也都满足,接下来看看怎么实现. 代码生成 定义类 首先从 index.html 中调用的 js 路径顺序一个一个打开对应的 js,server.js 中自定义了一个 Editor.Server 类由

前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问题:海量视频分散.孤立.视角不完整.位置不明确等问题,始终围绕着使用者.因此,如何更直观.更明确的管理摄像机和掌控视频动态,已成为提升视频应用价值的重要话题.所以当前项目正是从解决此现状问题的角度,应运而生.围绕如何提高.管理和有效利用前端设备采集的海量信息为公共

前情提要 前阵子写了一篇无插件纯Web 3D机房,介绍了如何用html5在网页上创建无插件的精美3d机房场景.这两个月以来,陆续收到很多朋友的鼓(膝)励(盖),受宠若惊之余,对索要源代码的朋友都已经尽力邮件回复.由于精力所限,未能收到的朋友请留言或给我发送邮件:tw-service@servasoft.com.最近项目第二期又要紧锣密鼓地开始了,所以想抓紧把一些新增的内容补充上,进一步完善这个html5 3d机房的呈现效果. 上一篇中主要介绍的是如何从最基础的webgl封装到创建3d物体对象,再

前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问题:海量视频分散.孤立.视角不完整.位置不明确等问题,始终围绕着使用者.因此,如何更直观.更明确的管理摄像机和掌控视频动态,已成为提升视频应用价值的重要话题.所以当前项目正是从解决此现状问题的角度,应运而生.围绕如何提高.管理和有效利用前端设备采集的海量信息为公共

前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问题:海量视频分散.孤立.视角不完整.位置不明确等问题,始终围绕着使用者.因此,如何更直观.更明确的管理摄像机和掌控视频动态,已成为提升视频应用价值的重要话题.所以当前项目正是从解决此现状问题的角度,应运而生.围绕如何提高.管理和有效利用前端设备采集的海量信息为公共

前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问题:海量视频分散.孤立.视角不完整.位置不明确等问题,始终围绕着使用者.因此,如何更直观.更明确的管理摄像机和掌控视频动态,已成为提升视频应用价值的重要话题.所以当前项目正是从解决此现状问题的角度,应运而生.围绕如何提高.管理和有效利用前端设备采集的海量信息为公共