首页 文章 精选 留言 我的

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

2018-12-07 555

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

接下来就用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
642
上一篇

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
513
下一篇

相关文章

发表评论

资源下载

更多资源
优质分享App

优质分享App

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

时间: 2025-12-03 大小: 4.36MB 下载: 23次
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2025-12-12 大小: 211.28KB 下载: 54次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

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

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

欢迎您来访！

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

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

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册