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

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

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

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

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

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

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

});

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

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

第三步，構(gòu)造一個(gè)創(chuàng)建風(fēng)的函數(shù)，為了方便創(chuàng)建風(fēng)及其位置，我們選取排風(fēng)設(shè)備為風(fēng)的父物體，將創(chuàng)建出來(lái)的風(fēng)的visiable屬性設(shè)置為false（這里這個(gè)坐標(biāo)問(wèn)題可以看一下官網(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)整一下攝像機(jī)的角度及位置。

app.on("load", function () {
    //攝像機(jī)角度
    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,
            });
        }
});

第五步，運(yùn)行項(xiàng)目。演示地址

思考與總結(jié)：

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

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

完整代碼

/加載場(chǎng)景代碼
var app = new THING.App({
    // 場(chǎng)景地址
    "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 () {
    //攝像機(jī)角度
    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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99817.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

buildupchao

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

閱讀 1793·2019-08-29 12:52
Django項(xiàng)目前端工程化的探索

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

**基于WebGL架構(gòu)的3D可視化平臺(tái)ThingJS—讓糧倉(cāng)“智慧”升級(jí)**

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

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

從“智能”樓宇到“智慧”樓宇—ThingJS助力“智慧”升級(jí)

發(fā)表評(píng)論

0條評(píng)論

buildupchao

男|高級(jí)講師

TA的文章

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

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

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

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

阿里云前端周刊 - 第 14 期

Django項(xiàng)目前端工程化的探索

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

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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