首页 文章 精选 留言 我的

基于WebGL架构的3D可视化平台—新风系统演示

2018-12-07 571

新风系统是根据在密闭的室内一侧用专用设备向室内送新风，再从另一侧由专用设备向室外排出，在室内会形成“新风流动场”，从而满足室内新风换气的需要。实施方案是：采用高风压、大流量风机、依靠机械强力由一侧向室内送风，由另一侧用专门设计的排风风机向室外排出的方式强迫在系统内形成新风流动场。在送风的同时对进入室内的空气进过滤、消毒、杀菌、增氧、预热（冬天）。

接下来就用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,
            });
        }
    }

});

 

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/681659

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

蚂蚁金服 Service Mesh 渐进式迁移方案|Service Mesh Meetup 实录

​小蚂蚁说： 本文是基于在 Service Mesher Meetup 上海站的主题分享《蚂蚁金服 Service Mesh 渐进式迁移方案》内容整理，完整的分享 PPT获取方式见文章底部。 敖小剑，蚂蚁金服高级技术专家，十六年软件开发经验，微服务专家，Service Mesh 布道师，Servicemesher 社区联合创始人；龙轼，阿里巴巴技术专家、前京东 Hadoop 负责人、Hadoop 代码贡献者、现负责UC 基于 Kubernetes 自研的 PaaS 平台整体的稳定性。 大家好，今天给大家带来的演讲主题是《蚂蚁金服 Service Mesh 渐进式迁移方案》，给大家介绍一下我们蚂蚁金服主站的 Service Mesh 迁移方案，在稍后的内容中我会给大家解释什么是“渐进式”。今天的演讲方式有些特殊，将会是两位讲师合作。我是
2018-12-08
663
上一篇

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...
2018-12-08
528
下一篇

相关文章

发表评论

资源下载

更多资源
优质分享App

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

时间: 2025-12-03 大小: 4.36MB 下载: 23次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2026-01-27 大小: 1MB 下载: 5次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-01-03 大小: 1.42GB 下载: 2次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
HarmonyOS6 Kubernetes Jdk25 SpringBoot4 Nacos3 Redis Gemini3 DeepSeek Service Mesh Docker OpenAi Rocky SpringCloud

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册