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

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

很长一段时间没有写3D库房,3D密集架相关的效果文章了,刚好最近有相关项目落地,索性总结一下 与之前我写的3D库房密集架文章<如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课>相比,本次做了一些效果上的升级,以及更加贴合用户应用实际. 密集架库房再档案管理,土壤监测,标本存储等各个行业应用的比较多,从早期的货架到后来的手摇式密集架再到现在的全自动密集架,硬件上都做了升级改进. 在环境.安防监控这一块,密集架方案提供商也配套的加上了八方感知,视频监控,温湿度…

开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例,整个深圳都按下了暂停键.在此也真诚的感谢在一线辛苦抗疫的医护工作者.自愿者以及政府工作人员们. 疫情起起伏伏,着实对经济的冲击还是挺大的,大家也都切身感受到了疫情对我们的生活影响了,社会上也出现了一些质疑的声音,有质疑动态清零的,也有标榜国外放弃抗疫的.国外的国情.政治文化,我们且按下不表. 且说…

序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框架搭建出来:第二步,添砖,在框架基础上,填写各部分内容:第三步,加瓦,再写好的内容上进行修改,润湿.然后文章的质量,就因人而异了.但不管怎么说,得写,得练,得经受的起各路能人志士的批评指教,至于改不改,那也是写文章的人的事了(通常我是认真接受批评指教的). 你看,写道这里,我又不知道再序些啥了,索性…

序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框架搭建出来:第二步,添砖,在框架基础上,填写各部分内容:第三步,加瓦,再写好的内容上进行修改,润湿.然后文章的质量,就因人而异了.但不管怎么说,得写,得练,得经受的起各路能人志士的批评指教,至于改不改,那也是写文章的人的事了(通常我是认真接受批评指教的). 你看,写道这里,我又不知道再序些啥了,索性…

序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课<使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课>已经给了详细的说明比较与解决方案 技术交流邮箱1203193731@qq.com 本节概要: 继上节课我们说的消防相关的操控模拟,本节课我们继续讲解用three.js创建大场景模拟与实现 本节课我们主要实现一个园区的消防三维模拟…

本节课主要讲解如何用webgl(three.js)搭建一个建筑模型,客流量热力图模拟 使用技术说明: 这里主要用到了three.js,echart.js以及一些其它的js 与css技术,利用websoket做实时数据传输. 技术亮点: 用代码实现不规则建筑三维模型,模型层叠动画.三维会话气泡等 实时绘制三维热力云图 三维场景内外连线技术 有效控制页面内存,及时回收绘画内存,防止内存泄漏. 硬件技术: 利用 wifi探针 AI人脸识别技术 有效统计各个区域的客流量,清洗重复数据,提升统计算力 三维…

项目背景 消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位,防火器材定位,人员逃生路径规划,火情预警,消防演习都是特别重要的环节.所以一套直观的,迅速治控的系统展现,可体验式演戏游戏也就变得那么的不可或缺了. 解决方案 技术选型:使用webGL技术,无插件无安装方案.创建三维建筑消防模拟 在模型的建模方案选择上有两种方式: 1.使用建模工具(3dmax.autocad.blender等等)创建模型 优点:模型搭建速度快,开发周期短…

闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第一课程提到了在库房的基础上添加上下架 消防 温湿度等等控制 刚好 最近有接到一个客户的需求 是和库房差不多的项目 只是不是库房了 是档案室 但是基本操控还是差不多的 也有文件上下架什么的 那么第二课  我们就按照客户的需求 先做一个概述性的展现 特此说明:为了减少网络传输带宽 我特意用ScreenT…

闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第一课程提到了在库房的基础上添加上下架 消防 温湿度等等控制 刚好 最近有接到一个客户的需求 是和库房差不多的项目 只是不是库房了 是档案室 但是基本操控还是差不多的 也有文件上下架什么的 那么第二课  我们就按照客户的需求 先做一个概述性的展现 特此说明:为了减少网络传输带宽 我特意用ScreenT…

目录 一.开发背景 二.讲解代码 2.1 大标题+背景图 2.2 各区县交通事故统计图-系列柱形图 2.3 图书馆建设率-水球图 2.4 当年城市空气质量aqi指数-面积图 2.5 近7年人均生产总值变化图-面积图 2.6 城市人才占比结构图-柱形图 2.7 城市宣传片视频-大屏左上角位置 2.8 组合以上图表,生成临时大屏 2.9 生成最终大屏 2.10 部署到服务器-供外部访问 三.在线演示 一.开发背景 您好,我是 @马哥python说 ,这是我独立开发的Python可视化大屏,看下演示效…

今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房”一下,找不到合适的全景,我们也只能窥一斑思全豹了,就它了,特此声明:此图片归原作者所有 非被人所拍,拿来只是给读者做个案例) 下面是我用webgl做出来的3D效果图(当前展示没有货物时的整体模拟): 第二部.开干 1. 首先我们创建一个页面,引入各种需要的库文件 <script src="/j…

写在前面的废话: 很久没有更新文章了,这段时间一直忙于项目落地,虽然很忙,但是感觉没有总结,没有提炼的日子,总是让人感觉飘飘忽忽的. 所幸放下一些事,抽出一些时间,把近期的项目做一些整理与记录.也算是阶段性的收拾过去,整装再发吧. 作为程序员嘛,总要整理整理自己的,不管是知识储备,还是项目应用,亦或者生活种种,都要隔一段时间,整理一下,这样心不会乱,回首亦有节点. 序: 今天要讲解的课程是<物联网3D,使用webgl(three.js)与物联网设备监控运维展示>课程之物业基础设施3D运维篇.…

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

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

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

序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的汗颜.除了为了生活所必须的工作时间外,还有大部分零散的时间不是给了短视频,就是给了短讯文章,简讯媒介,不说是毫无意义吧,但也着实是浮躁虚夸了. 用豆豆作品里的话术,"透视社会依次有三个层面:技术.制度和文化.小到一个人,大到一个国家一个民族,任何一种命运归根到底都是那种文化属性的产物". …

前言 随着智慧城市建设的不断发展,智慧园区作为智慧城市的先行区,其覆盖区域越来越大,产值越来越集中,对于园区数字化建设和智能化管理的诉求也愈加强烈.园区数字化管理是以实现园区多维度业务数据汇聚.融合.共享,通过可视化技术将园区运维进行一体化管理,进而实现一区多园的建设,推进城市的数字化和智能化的建设. 通过图扑软件的可视化引擎以及地理信息系统(Geographic Information System,GIS) 相关技术,对智慧园区运营中心(Intelligent Operations Cent…

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

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

(写在前面,谈谈物联网展会)上次深圳会展中心举行物联网展会,到了展会一看,80%以上的物联网应用都是在搞RFID,室内定位,我一度怀疑物联网落地方案的方向局限性与市场导向,后来多方面了解才明白,展会上看到的不能体现目前物联网最前沿最广泛的应用,很多大的企业与技术前沿企业没有参与这样的展会,一是不屑于参加,二是展会带来的市场价值实在太少太少,展会最大的价值就是让同行之间再抄一抄(国内大部分企业基本这样,互相山寨),看看各家都做了啥,所以,展会上我们所看到的往往不是企业最核心最好的东西,不能体现当前…

前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上,各种数据一目了然.随着浏览器不断发展完善,使用 Web 做大屏展示也已经不是新鲜的事了.市面上已有不少的大屏解决方案,大部分是以放各种图表的形式呈现,基本是是 2D 的呈现.有些是根据投放屏幕的比例设计出来的,并不能自适应于其它的屏幕比例.最近学习了 Hightopo 的 HT for Web 产品…

前言 何为"无人农场"?中国工程院院士罗锡文用五句话高度概括:"耕种管收生产环节全覆盖:机库田间转移作业全自动:自动避障异况停车保安全:作物生产过程实施全监控:智能决策精准作业全无人." 随着新一代信息技术飞速融入传统产业,农业数字化.网络化.智能化逐步成为农业现代化发展的基石.依托云计算.5G.物联网等技术,部署于农业生产现场的各种传感节点和通信网络,实现农业生产环境的智能感知.智能预警.智能决策.智能分析等功能.结合当前乡村振兴战略.大规模农村土地流转等契机,为…

使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插件的情况下渲染浏览器中的3D图像-这让3D渲染操作变得异常简单. 随着虚拟现实和增强现实应用的发展,大型厂商们开始转向数字化触觉体验,这是令人动心的一项技术. 或者,至少那些已经投资的人这一年还抱有希望-11亿美金流入VR和AR领域. 从Abbey Road Studios的谷歌交互之旅到拍摄Dea…

“哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? 我们讲两个东西:1.WebGL背后的工作原理是什么?2.以Three.js为例,讲述框架在背后扮演什么样的角色? 二.我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题:1.很多东西还是做不出来,甚至没有任何思路:…

WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite/tunnel three.js的粒子系统 three.js的粒子系统主要是依靠精灵体来创建的,要实现three.js中的粒子系统创建,一般有两种方式. 第一种是在场景中使用很多歌THREE.Sprite创建单个的精灵,这样创建的每一个精灵体,我们都可以单独对它们进行操作,同时我们也可以用一个THR…

一.我们讲什么? 我们讲两个东西:1.WebGL背后的工作原理是什么?2.以Three.js为例,讲述框架在背后扮演什么样的角色? 二.我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题:1.很多东西还是做不出来,甚至没有任何思路:2.碰到bug无法解决,甚至没有方向:3.性能出现问题,完全不知道如何去优化.这个时候,我们需要了解更多. 三.先了解一个基础概念 1.什么是矩阵?简单说来,矩阵用于坐标变换,如下图:…

WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行动画设置 模型动画demo演示(网页加载速度可能会比较慢) demo地址:https://nsytsqdtn.github.io/demo/naval_craft/naval_craft demo截图如下: 原模型截图: 在我们写three.js的网页的时候,大多时候并不需要我们去手动建立模型,一些…

声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js 和 CSS实现赛博朋克2077风格视觉效果 实现炫酷 3D 数字地球大屏页面.页面使用 React + Three.js + Echarts + stylus 技术栈,本文涉及到的主要知识点包括:THREE.Spherical 球体坐标系的应用.Shader 结合 TWEEN 实现飞线和冲击波动画效…