基于WebGL架構(gòu)的3D可視化平臺—新風(fēng)系統(tǒng)演示

buildupchao 發(fā)布于2019-08-23 13:56 / 2746人閱讀

摘要：實施方案是采用高風(fēng)壓大流量風(fēng)機依靠機械強力由一側(cè)向室內(nèi)送風(fēng)，由另一側(cè)用專門設(shè)計的排風(fēng)風(fēng)機向室外排出的方式強迫在系統(tǒng)內(nèi)形成新風(fēng)流動場。接下來就用平臺來搭建一個新風(fēng)系統(tǒng)第一步，利用搭建模擬場景。

新風(fēng)系統(tǒng)是根據(jù)在密閉的室內(nèi)一側(cè)用專用設(shè)備向室內(nèi)送新風(fēng)，再從另一側(cè)由專用設(shè)備向室外排出，在室內(nèi)會形成“新風(fēng)流動場”，從而滿足室內(nèi)新風(fēng)換氣的需要。實施方案是：采用高風(fēng)壓、大流量風(fēng)機、依靠機械強力由一側(cè)向室內(nèi)送風(fēng)，由另一側(cè)用專門設(shè)計的排風(fēng)風(fēng)機向室外排出的方式強迫在系統(tǒng)內(nèi)形成新風(fēng)流動場。在送風(fēng)的同時對進入室內(nèi)的空氣進過濾、消毒、殺菌、增氧、預(yù)熱（冬天）。

接下來就用ThingJs平臺來搭建一個新風(fēng)系統(tǒng)

第一步，利用CampusBuilder搭建模擬場景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場景更逼真。

//加載場景代碼
var app = new THING.App({
    // 場景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/新風(fēng)演示2",

});

第二步，創(chuàng)建三個數(shù)組來保存每個風(fēng)的模型。、

var hotWindGroup = [];
var coolWindGroup = [];
var newWindGroup = [];
var wind = null;

第三步，構(gòu)造一個創(chuàng)建風(fēng)的函數(shù)，為了方便創(chuàng)建風(fēng)及其位置，我們選取排風(fēng)設(shè)備為風(fēng)的父物體，將創(chuàng)建出來的風(fēng)的visiable屬性設(shè)置為false（這里這個坐標(biāo)問題可以看一下官網(wǎng)的教程中控制物體中的坐標(biāo)轉(zhuǎn)換）。

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);
}

第四步，開始創(chuàng)建風(fēng)模型，并調(diào)整一下攝像機的角度及位置。

app.on("load", function () {
    //攝像機角度
    app.camera.position = [-22.91452445633646, 30.46296743148116, -23.83548169673341];
    app.camera.target = [-13.532807014407252, 5.6565539015865856, -3.3431546399681276];
    //hotWind
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 0], "#FF0000", hotWindGroup);
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 0.5], "#FF0000", hotWindGroup);
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 1], "#FF0000", hotWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 0], "#FF0000", hotWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 0.5], "#FF0000", hotWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 1], "#FF0000", hotWindGroup);
    //coolWind
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 0], "#0000FF", coolWindGroup);
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 0.5], "#0000FF", coolWindGroup);
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 1], "#0000FF", coolWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 0], "#0000FF", coolWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 0.5], "#0000FF", coolWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 1], "#0000FF", coolWindGroup);
    //newWind
    createWind("排風(fēng)1", -50, 0, 0, [0, -0.5, 2], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 0, 0, [0, -0.5, 4], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 0, 0, [0, -0.5, 6], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [2, -0.5, 7], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [4, -0.5, 8], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [6, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [8, -0.5, 12], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [10, -0.5, 15], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [12, -0.5, 18], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [10, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [14, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [18, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [22, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [26, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)2", -50, 0, 0, [0, -0.5, 2], "#00FF00", newWindGroup);
    createWind("排風(fēng)3", -50, 0, 0, [0, -0.5, 2], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 2], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 4], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 6], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 8], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 10], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 12], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 50, [2, -0.6, 12], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 50, [4, -0.7, 12], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 50, [6, -0.8, 13], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [8, -0.8, 11], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [12, -0.8, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [16, -0.8, 7], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [20, -0.8, 5], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [24, -0.8, 3], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 0, 90, [8, -0.8, 13], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 0, 90, [12, -0.8, 13], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 0, 90, [16, -0.7, 13], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 0, 90, [20, -0.6, 13], "#00FF00", newWindGroup);
    //createWind("排風(fēng)4", -90, 0, 90, [24, -0.5, 13], "#00FF00", newWindGroup);

    //熱風(fēng)演示
    new THING.widget.Button("熱風(fēng)演示", function () {
        for (let i of coolWindGroup) {
            i.visible = false;
        };
        for (let i of hotWindGroup) {
            i.visible = true;
        };

    });

    //冷風(fēng)演示
    new THING.widget.Button("冷風(fēng)演示", function () {
        for (let i of coolWindGroup) {
            i.visible = true;
        };
        for (let i of hotWindGroup) {
            i.visible = false;
        };
    });

    //新風(fēng)演示
    new THING.widget.Button("新風(fēng)演示", 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,
            });
        }
});

第五步，運行項目。演示地址

思考與總結(jié)：

首先就是空間坐標(biāo)系下轉(zhuǎn)父物體坐標(biāo)真是弄暈了，看了官網(wǎng)的教程多少理解了一點。剛開始的時候我一直認為我的子物體以父物體坐標(biāo)下放置的時候，子物體坐標(biāo)軸的問題指向的問題?？戳私坛贪l(fā)現(xiàn)自己的擔(dān)心多余了，就好像是人戴鴨舌帽帽子不管戴在誰的頭上都一樣。

其次就是讓風(fēng)動起來，最初是想讓一個模型在空間中運動，發(fā)現(xiàn)效果不好用。最后就創(chuàng)建了多個模型他們對應(yīng)著有各自的點，讓每一個模型向他下一個模型的位置移動實現(xiàn)運動。

完整代碼

/加載場景代碼
var app = new THING.App({
    // 場景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/新風(fēng)演示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("空調(diào)1", 0, 0, 0, [0, -2, 0], "#FF0000", hotWindGroup);
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 0.5], "#FF0000", hotWindGroup);
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 1], "#FF0000", hotWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 0], "#FF0000", hotWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 0.5], "#FF0000", hotWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 1], "#FF0000", hotWindGroup);
    //coolWind
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 0], "#0000FF", coolWindGroup);
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 0.5], "#0000FF", coolWindGroup);
    createWind("空調(diào)1", 0, 0, 0, [0, -2, 1], "#0000FF", coolWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 0], "#0000FF", coolWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 0.5], "#0000FF", coolWindGroup);
    createWind("空調(diào)2", 0, 0, 0, [0, -2, 1], "#0000FF", coolWindGroup);

    //newWind
    createWind("排風(fēng)1", -50, 0, 0, [0, -0.5, 2], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 0, 0, [0, -0.5, 4], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 0, 0, [0, -0.5, 6], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [2, -0.5, 7], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [4, -0.5, 8], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [6, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [8, -0.5, 12], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [10, -0.5, 15], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [12, -0.5, 18], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [10, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [14, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [18, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [22, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)1", -50, 50, 50, [26, -0.5, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)2", -50, 0, 0, [0, -0.5, 2], "#00FF00", newWindGroup);
    createWind("排風(fēng)3", -50, 0, 0, [0, -0.5, 2], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 2], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 4], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 6], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 8], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 10], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -50, 0, 0, [0, -0.5, 12], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 50, [2, -0.6, 12], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 50, [4, -0.7, 12], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 50, [6, -0.8, 13], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [8, -0.8, 11], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [12, -0.8, 9], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [16, -0.8, 7], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [20, -0.8, 5], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 50, 90, [24, -0.8, 3], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 0, 90, [8, -0.8, 13], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 0, 90, [12, -0.8, 13], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 0, 90, [16, -0.7, 13], "#00FF00", newWindGroup);
    createWind("排風(fēng)4", -90, 0, 90, [20, -0.6, 13], "#00FF00", newWindGroup);
    //createWind("排風(fēng)4", -90, 0, 90, [24, -0.5, 13], "#00FF00", newWindGroup);

    //熱風(fēng)演示
    new THING.widget.Button("熱風(fēng)演示", 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])
        };

    });

    //冷風(fēng)演示
    new THING.widget.Button("冷風(fēng)演示", function () {
        for (let i of coolWindGroup) {
            i.visible = true;
        };
        for (let i of hotWindGroup) {
            i.visible = false;
        };
    });

    //新風(fēng)演示
    new THING.widget.Button("新風(fēng)演示", 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,
            });
        }
    }

});

作者：extends Thread

GPU云服務(wù)器云服務(wù)器數(shù)據(jù)可視化演示監(jiān)控平臺系統(tǒng)架構(gòu) 基于云計算的平臺三維可視化系統(tǒng)管理平臺

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99817.html

發(fā)表評論

登陸后可評論

0條評論

buildupchao

男|高級講師

我要關(guān)注我要私信

TA的文章

OUC2021軟件工程“e拼“校園拼車程序小組Alpha階段博客目錄

閱讀 1314·2021-11-15 11:37
LeetCode刷題題解：495. 提莫攻擊

閱讀 3503·2021-11-11 16:55
DediPath：$6/年/512MB內(nèi)存/5GB SSD空間/不限流量/100Mbps端口/Ope

閱讀 1756·2021-08-25 09:39
前端交互體驗優(yōu)化若干點

閱讀 3220·2019-08-30 15:44
阿里云前端周刊 - 第 14 期

閱讀 1735·2019-08-29 12:52
Django項目前端工程化的探索

閱讀 1408·2019-08-29 11:10
react-native-vector-icons使用遇到的大坑

閱讀 3244·2019-08-26 11:32
啥？四分錢就能學(xué)會開發(fā)電商和游戲小程序？！

閱讀 3226·2019-08-26 10:16

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

基于WebGL架構(gòu)的3D可視化平臺—新風(fēng)系統(tǒng)演示

相關(guān)文章

**基于WebGL架構(gòu)的3D可視化平臺ThingJS—讓糧倉“智慧”升級**

如何用基于WebGL架構(gòu)的3D可視化平臺搭建-設(shè)備管理系統(tǒng)

ThingJS物聯(lián)網(wǎng)3D可視化平臺——智慧城市的應(yīng)用

從“智能”樓宇到“智慧”樓宇—ThingJS助力“智慧”升級

發(fā)表評論

0條評論

buildupchao

男|高級講師

TA的文章

OUC2021軟件工程“e拼“校園拼車程序小組Alpha階段博客目錄

LeetCode刷題題解：495. 提莫攻擊

DediPath：$6/年/512MB內(nèi)存/5GB SSD空間/不限流量/100Mbps端口/Ope

前端交互體驗優(yōu)化若干點

阿里云前端周刊 - 第 14 期

Django項目前端工程化的探索

react-native-vector-icons使用遇到的大坑

啥？四分錢就能學(xué)會開發(fā)電商和游戲小程序？！

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

基于WebGL架構(gòu)的3D可視化平臺—新風(fēng)系統(tǒng)演示

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！