three.js 创建3D机房

使用three.js创建3D机房模型-分享一

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

使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)

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

使用webgl(three.js)创建3D机房(升级版)-普通机房

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

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题（机房升级版）-第九课（一）

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

如何用three.js搭建处理3D园区、3D楼层、3D机房管线（机房升级版）-第九课（二）

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

使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课

前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触,是的,强大的背后离不开我们每个人的奋力拼搏,作为基础研发的我们,我们也认认真真的做好每一次研发,不管成功失败,都是在前进的路上. 序: 今天要讲解的课程是<智慧园区与灯杆三维展示>课程. 首先我们描述一下智慧园区与灯杆的功能: 智慧园区:我们在上节课<使用webgl(three.js)搭建一

如何使用webgl(three.js)实现3D储能,3D储能站,3D智慧储能、储能柜的三维可视化解决方案——第十七课

前言上节课我们讲了<3D光伏发电>,与之配套的就是能量存储这节课我们主要讲讲储能,储能站,在分布式能源系统中起到调节用对电的尖峰平谷进行削峰填谷的作用.特别是小型储能站,更加灵活,因地适宜.能够很好的解决电力在时空上的不平衡.储能电站技术的应用贯穿于电力系统发电.输电.配电.用电的各个环节. 储能站可视化解决方案,有效直观的提升储能调节效率.对设备进行状态告警监控,储能监控. 定义介绍: 储能站:电能存储.转换及释放的设备集合站点储能柜:电能储存的基础单元,通常单个柜每日的储电量达到了几

MONO Design创建电信3D机房

前面我们简单介绍了下一分钟创建3D机房,实则mono Design的功能远远不止这些,试想一下,如果我们花上10分钟来创建一个电信机房,那么MONO design又会给我们带来什么样的惊喜呢? 我们从创建设备开始,在mono Design的起始页直接进入设备编辑界面,设备编辑和房间有所不同,在设备的编辑界面中我们可以拖拽和编辑的都是3D对象,可以直接操作各个3D对象的属性,废话不多说了,假设我们现在是要创建一个24U的机柜,机柜中放了一些网络设备,比如路由器,交换机,服务器等.那么我们先来拖拽出

第一章用three.js创建你的第一个3D场景

第一章用three.js创建你的第一个3D场景到官网下载three.js的源码和示例. 创建HTML框架界面第一个示例的代码如下: 01-basic-skeleton.html 位于 Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01 <!DOCTYPE html> <html> <head> <title>Example 01.01 - Basic skeleton<

基于 HTML5 Canvas 的 3D 机房创建

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

基于 HTML5 WebGL 的 3D 机房

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

HTML5，不仅仅是看上去非常美（第二弹：打造最美3D机房）

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

无插件纯Web 3D机房，HTML5+WebGL倾力打造

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

基于HTML5快速搭建3D机房设备面板

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果:http://www.hightopo.com/demo/blog_3d_20150810/server.html 我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步

基于HT for Web 快速搭建3D机房设备面板

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果: 我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步来. 我们先从设备开始,设备的示意图如下: 看起来有模有样的,其实呢,它就是一个长方体,然后在长方体的正面贴上一张

无插件纯Web HTML5 3D机房终结篇（新增资产管理、动环监控等内容）

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

基于 HTML5 的 WebGL 和 VR 技术的 3D 机房数据中心可视化

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

无插件纯Web HTML5 3D机房进阶篇（新增设备、线缆、巡查等功能）

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

three.js 运行3D模型

HTML <!DOCTYPE html> <html style="height: 100%;"> <head> <title>model_load</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initi

B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化

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

three.js 创建3D机房

热门专题