基于WebGL架构的3D可视化平台—新风系统演示
新风系统是根据在密闭的室内一侧用专用设备向室内送新风,再从另一侧由专用设备向室外排出,在室内会形成“新风流动场”,从而满足室内新风换气的需要。实施方案是:采用高风压、大流量风机、依靠机械强力由一侧向室内送风,由另一侧用专门设计的排风风机向室外排出的方式强迫在系统内形成新风流动场。在送风的同时对进入室内的空气进过滤、消毒、杀菌、增氧、预热(冬天)。
接下来就用ThingJs平台来搭建一个新风系统
第一步,利用CampusBuilder搭建模拟场景。CampusBuilder的模型库有各种各样的模型,使我们搭建出的场景更逼真。
1 //加载场景代码 2 var app = new THING.App({ 3 // 场景地址 4 "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/新风演示2", 5 6 });
第二步,创建三个数组来保存每个风的模型。
1 var hotWindGroup = []; 2 var coolWindGroup = []; 3 var newWindGroup = []; 4 var wind = null;
第三步,构造一个创建风的函数,为了方便创建风及其位置,我们选取排风设备为风的父物体,将创建出来的风的visiable属性设置为false(这里这个坐标问题可以看一下官网的教程中控制物体中的坐标转换)。
1 function createWind(parent, x, y, angle, localPosition, color, group) { 2 rs = app.query(parent)[0]; 3 wind = app.create({ 4 type: 'Thing', 5 name: 'hotWind', 6 url: 'http://model.3dmomoda.cn/models/4da706d8a37047298c0318a5b9546abd/0/gltf/', 7 localPosition: localPosition, 8 scale: [1, 2, 1], 9 angle: angle, 10 parent: rs, 11 }); 12 wind.style.color = color; 13 wind.visible = false; 14 wind.rotateX(x); 15 wind.rotateY(y); 16 group.push(wind); 17 }
第四步,开始创建风模型,并调整一下摄像机的角度及位置。
1 app.on('load', function () { 2 //摄像机角度 3 app.camera.position = [-22.91452445633646, 30.46296743148116, -23.83548169673341]; 4 app.camera.target = [-13.532807014407252, 5.6565539015865856, -3.3431546399681276]; 5 //hotWind 6 createWind('空调1', 0, 0, 0, [0, -2, 0], '#FF0000', hotWindGroup); 7 createWind('空调1', 0, 0, 0, [0, -2, 0.5], '#FF0000', hotWindGroup); 8 createWind('空调1', 0, 0, 0, [0, -2, 1], '#FF0000', hotWindGroup); 9 createWind('空调2', 0, 0, 0, [0, -2, 0], '#FF0000', hotWindGroup); 10 createWind('空调2', 0, 0, 0, [0, -2, 0.5], '#FF0000', hotWindGroup); 11 createWind('空调2', 0, 0, 0, [0, -2, 1], '#FF0000', hotWindGroup); 12 //coolWind 13 createWind('空调1', 0, 0, 0, [0, -2, 0], '#0000FF', coolWindGroup); 14 createWind('空调1', 0, 0, 0, [0, -2, 0.5], '#0000FF', coolWindGroup); 15 createWind('空调1', 0, 0, 0, [0, -2, 1], '#0000FF', coolWindGroup); 16 createWind('空调2', 0, 0, 0, [0, -2, 0], '#0000FF', coolWindGroup); 17 createWind('空调2', 0, 0, 0, [0, -2, 0.5], '#0000FF', coolWindGroup); 18 createWind('空调2', 0, 0, 0, [0, -2, 1], '#0000FF', coolWindGroup); 19 //newWind 20 createWind('排风1', -50, 0, 0, [0, -0.5, 2], '#00FF00', newWindGroup); 21 createWind('排风1', -50, 0, 0, [0, -0.5, 4], '#00FF00', newWindGroup); 22 createWind('排风1', -50, 0, 0, [0, -0.5, 6], '#00FF00', newWindGroup); 23 createWind('排风1', -50, 50, 50, [2, -0.5, 7], '#00FF00', newWindGroup); 24 createWind('排风1', -50, 50, 50, [4, -0.5, 8], '#00FF00', newWindGroup); 25 createWind('排风1', -50, 50, 50, [6, -0.5, 9], '#00FF00', newWindGroup); 26 createWind('排风1', -50, 50, 50, [8, -0.5, 12], '#00FF00', newWindGroup); 27 createWind('排风1', -50, 50, 50, [10, -0.5, 15], '#00FF00', newWindGroup); 28 createWind('排风1', -50, 50, 50, [12, -0.5, 18], '#00FF00', newWindGroup); 29 createWind('排风1', -50, 50, 50, [10, -0.5, 9], '#00FF00', newWindGroup); 30 createWind('排风1', -50, 50, 50, [14, -0.5, 9], '#00FF00', newWindGroup); 31 createWind('排风1', -50, 50, 50, [18, -0.5, 9], '#00FF00', newWindGroup); 32 createWind('排风1', -50, 50, 50, [22, -0.5, 9], '#00FF00', newWindGroup); 33 createWind('排风1', -50, 50, 50, [26, -0.5, 9], '#00FF00', newWindGroup); 34 createWind('排风2', -50, 0, 0, [0, -0.5, 2], '#00FF00', newWindGroup); 35 createWind('排风3', -50, 0, 0, [0, -0.5, 2], '#00FF00', newWindGroup); 36 createWind('排风4', -50, 0, 0, [0, -0.5, 2], '#00FF00', newWindGroup); 37 createWind('排风4', -50, 0, 0, [0, -0.5, 4], '#00FF00', newWindGroup); 38 createWind('排风4', -50, 0, 0, [0, -0.5, 6], '#00FF00', newWindGroup); 39 createWind('排风4', -50, 0, 0, [0, -0.5, 8], '#00FF00', newWindGroup); 40 createWind('排风4', -50, 0, 0, [0, -0.5, 10], '#00FF00', newWindGroup); 41 createWind('排风4', -50, 0, 0, [0, -0.5, 12], '#00FF00', newWindGroup); 42 createWind('排风4', -90, 50, 50, [2, -0.6, 12], '#00FF00', newWindGroup); 43 createWind('排风4', -90, 50, 50, [4, -0.7, 12], '#00FF00', newWindGroup); 44 createWind('排风4', -90, 50, 50, [6, -0.8, 13], '#00FF00', newWindGroup); 45 createWind('排风4', -90, 50, 90, [8, -0.8, 11], '#00FF00', newWindGroup); 46 createWind('排风4', -90, 50, 90, [12, -0.8, 9], '#00FF00', newWindGroup); 47 createWind('排风4', -90, 50, 90, [16, -0.8, 7], '#00FF00', newWindGroup); 48 createWind('排风4', -90, 50, 90, [20, -0.8, 5], '#00FF00', newWindGroup); 49 createWind('排风4', -90, 50, 90, [24, -0.8, 3], '#00FF00', newWindGroup); 50 createWind('排风4', -90, 0, 90, [8, -0.8, 13], '#00FF00', newWindGroup); 51 createWind('排风4', -90, 0, 90, [12, -0.8, 13], '#00FF00', newWindGroup); 52 createWind('排风4', -90, 0, 90, [16, -0.7, 13], '#00FF00', newWindGroup); 53 createWind('排风4', -90, 0, 90, [20, -0.6, 13], '#00FF00', newWindGroup); 54 //createWind('排风4', -90, 0, 90, [24, -0.5, 13], '#00FF00', newWindGroup); 55 56 //热风演示 57 new THING.widget.Button('热风演示', function () { 58 for (let i of coolWindGroup) { 59 i.visible = false; 60 }; 61 for (let i of hotWindGroup) { 62 i.visible = true; 63 }; 64 65 }); 66 67 //冷风演示 68 new THING.widget.Button('冷风演示', function () { 69 for (let i of coolWindGroup) { 70 i.visible = true; 71 }; 72 for (let i of hotWindGroup) { 73 i.visible = false; 74 }; 75 }); 76 77 //新风演示 78 new THING.widget.Button('新风演示', function () { 79 playNewWind(); 80 }); 81 82 function playNewWind() { 83 for (var i = 0; i < newWindGroup.length; i++) { 84 if(i==newWindGroup.length-1) 85 return; 86 newWindGroup[i].visible = true; 87 newWindGroup[i].moveTo({ 88 "time": 4000, 89 "position": newWindGroup[i+1].position, 90 }); 91 } 92 });
第五步,运行项目。演示地址
思考与总结:
首先就是空间坐标系下转父物体坐标真是弄晕了,看了官网的教程多少理解了一点。刚开始的时候我一直认为我的子物体以父物体坐标下放置的时候,子物体坐标轴的问题指向的问题。看了教程发现自己的担心多余了,就好像是人戴鸭舌帽帽子不管戴在谁的头上都一样。
其次就是让风动起来,最初是想让一个模型在空间中运动,发现效果不好用。最后就创建了多个模型他们对应着有各自的点,让每一个模型向他下一个模型的位置移动实现运动。
完整代码
//加载场景代码 var app = new THING.App({ // 场景地址 "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/新风演示2", }); var hotWindGroup = []; var coolWindGroup = []; var newWindGroup = []; var wind = null; function createWind(parent, x, y, angle, localPosition, color, group) { rs = app.query(parent)[0]; wind = app.create({ type: 'Thing', name: 'hotWind', url: 'http://model.3dmomoda.cn/models/4da706d8a37047298c0318a5b9546abd/0/gltf/', localPosition: localPosition, scale: [1, 2, 1], angle: angle, parent: rs, }); wind.style.color = color; wind.visible = false; wind.rotateX(x); wind.rotateY(y); group.push(wind); } app.on('load', function () { //摄像机角度 app.camera.position = [-22.91452445633646, 30.46296743148116, -23.83548169673341]; app.camera.target = [-13.532807014407252, 5.6565539015865856, -3.3431546399681276]; //hotWind createWind('空调1', 0, 0, 0, [0, -2, 0], '#FF0000', hotWindGroup); createWind('空调1', 0, 0, 0, [0, -2, 0.5], '#FF0000', hotWindGroup); createWind('空调1', 0, 0, 0, [0, -2, 1], '#FF0000', hotWindGroup); createWind('空调2', 0, 0, 0, [0, -2, 0], '#FF0000', hotWindGroup); createWind('空调2', 0, 0, 0, [0, -2, 0.5], '#FF0000', hotWindGroup); createWind('空调2', 0, 0, 0, [0, -2, 1], '#FF0000', hotWindGroup); //coolWind createWind('空调1', 0, 0, 0, [0, -2, 0], '#0000FF', coolWindGroup); createWind('空调1', 0, 0, 0, [0, -2, 0.5], '#0000FF', coolWindGroup); createWind('空调1', 0, 0, 0, [0, -2, 1], '#0000FF', coolWindGroup); createWind('空调2', 0, 0, 0, [0, -2, 0], '#0000FF', coolWindGroup); createWind('空调2', 0, 0, 0, [0, -2, 0.5], '#0000FF', coolWindGroup); createWind('空调2', 0, 0, 0, [0, -2, 1], '#0000FF', coolWindGroup); //newWind createWind('排风1', -50, 0, 0, [0, -0.5, 2], '#00FF00', newWindGroup); createWind('排风1', -50, 0, 0, [0, -0.5, 4], '#00FF00', newWindGroup); createWind('排风1', -50, 0, 0, [0, -0.5, 6], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [2, -0.5, 7], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [4, -0.5, 8], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [6, -0.5, 9], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [8, -0.5, 12], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [10, -0.5, 15], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [12, -0.5, 18], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [10, -0.5, 9], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [14, -0.5, 9], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [18, -0.5, 9], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [22, -0.5, 9], '#00FF00', newWindGroup); createWind('排风1', -50, 50, 50, [26, -0.5, 9], '#00FF00', newWindGroup); createWind('排风2', -50, 0, 0, [0, -0.5, 2], '#00FF00', newWindGroup); createWind('排风3', -50, 0, 0, [0, -0.5, 2], '#00FF00', newWindGroup); createWind('排风4', -50, 0, 0, [0, -0.5, 2], '#00FF00', newWindGroup); createWind('排风4', -50, 0, 0, [0, -0.5, 4], '#00FF00', newWindGroup); createWind('排风4', -50, 0, 0, [0, -0.5, 6], '#00FF00', newWindGroup); createWind('排风4', -50, 0, 0, [0, -0.5, 8], '#00FF00', newWindGroup); createWind('排风4', -50, 0, 0, [0, -0.5, 10], '#00FF00', newWindGroup); createWind('排风4', -50, 0, 0, [0, -0.5, 12], '#00FF00', newWindGroup); createWind('排风4', -90, 50, 50, [2, -0.6, 12], '#00FF00', newWindGroup); createWind('排风4', -90, 50, 50, [4, -0.7, 12], '#00FF00', newWindGroup); createWind('排风4', -90, 50, 50, [6, -0.8, 13], '#00FF00', newWindGroup); createWind('排风4', -90, 50, 90, [8, -0.8, 11], '#00FF00', newWindGroup); createWind('排风4', -90, 50, 90, [12, -0.8, 9], '#00FF00', newWindGroup); createWind('排风4', -90, 50, 90, [16, -0.8, 7], '#00FF00', newWindGroup); createWind('排风4', -90, 50, 90, [20, -0.8, 5], '#00FF00', newWindGroup); createWind('排风4', -90, 50, 90, [24, -0.8, 3], '#00FF00', newWindGroup); createWind('排风4', -90, 0, 90, [8, -0.8, 13], '#00FF00', newWindGroup); createWind('排风4', -90, 0, 90, [12, -0.8, 13], '#00FF00', newWindGroup); createWind('排风4', -90, 0, 90, [16, -0.7, 13], '#00FF00', newWindGroup); createWind('排风4', -90, 0, 90, [20, -0.6, 13], '#00FF00', newWindGroup); //createWind('排风4', -90, 0, 90, [24, -0.5, 13], '#00FF00', newWindGroup); //热风演示 new THING.widget.Button('热风演示', function () { for (let i of coolWindGroup) { i.visible = false; }; for (let i of hotWindGroup) { i.visible = true; //playWind(i,[0,-0.6499999999999999,0],[0,-0.7234152255572697,0.46352549156242107],[0,-1.2683221215612903,1.2135254915624212],[0,-2.15,1.5]) }; }); //冷风演示 new THING.widget.Button('冷风演示', function () { for (let i of coolWindGroup) { i.visible = true; }; for (let i of hotWindGroup) { i.visible = false; }; }); //新风演示 new THING.widget.Button('新风演示', function () { playNewWind(); }); function playNewWind() { for (var i = 0; i < newWindGroup.length; i++) { if(i==newWindGroup.length-1) return; newWindGroup[i].visible = true; newWindGroup[i].moveTo({ "time": 4000, "position": newWindGroup[i+1].position, }); } } });
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
蚂蚁金服 Service Mesh 渐进式迁移方案|Service Mesh Meetup 实录
小蚂蚁说: 本文是基于在 Service Mesher Meetup 上海站的主题分享《蚂蚁金服 Service Mesh 渐进式迁移方案》内容整理,完整的分享 PPT获取方式见文章底部。 敖小剑,蚂蚁金服高级技术专家,十六年软件开发经验,微服务专家,Service Mesh 布道师,Servicemesher 社区联合创始人;龙轼,阿里巴巴技术专家、前京东 Hadoop 负责人、Hadoop 代码贡献者、现负责UC 基于 Kubernetes 自研的 PaaS 平台整体的稳定性。 大家好,今天给大家带来的演讲主题是《蚂蚁金服 Service Mesh 渐进式迁移方案》,给大家介绍一下我们蚂蚁金服主站的 Service Mesh 迁移方案,在稍后的内容中我会给大家解释什么是“渐进式”。今天的演讲方式有些特殊,将会是两位讲师合作。我是
- 下一篇
Mysql 流增量写入 Hdfs(一) --从 mysql 到 kafka
一. 概述 在大数据的静态数据处理中,目前普遍采用的是用 Spark + Hdfs (Hive / Hbase) 的技术架构来对数据进行处理。 但有时候有其他的需求,需要从其他不同数据源不间断得采集数据,然后存储到 Hdfs 中进行处理。而追加(append)这种操作在 Hdfs 里面明显是比较麻烦的一件事。所幸有了 Storm 这么个流数据处理这样的东西问世,可以帮我们解决这些问题。 不过光有 Storm 还不够,我们还需要其他中间件来协助我们,让所有其他数据源都归于一个通道。这样就能实现不同数据源以及 Hhdfs 之间的解耦。而这个中间件 Kafka 无疑是一个很好的选择。 这样我们就可以让 Mysql 的增量数据不停得抛出到 Kafka ,而后再让 storm 不停得从 Kafka 对应的 Topic 读取数据并写入到 Hdfs 中。 二. 基本知识 2.1 Mysql binlog 介绍 binlog 即 Mysql 的二进制日志。它可以说是 Mysql 最重要的日志了,它记录了所有的DDL和DML(除了数据查询语句)语句,以事件形式记录,还包含语句所执行的消耗的时间,MySQ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Linux系统CentOS6、CentOS7手动修改IP地址
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS关闭SELinux安全模块
- Docker使用Oracle官方镜像安装(12C,18C,19C)