天天看點
傳回

基于WebGL架構的3D可視化平台—新風系統示範

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

接下來就用

ThingJs

平台來搭建一個新風系統

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

基于WebGL架構的3D可視化平台—新風系統示範

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

});
資料可視化 webgl系統 資料場景化 webgl開啟 套接字var mysql連接配接 webgl效果
上一篇: Thingjs 開門示例：以3D機櫃為例 示範thingjs如何開門
下一篇: 【教程】ThingJS 3D開發快速入門 第一講 開發概述&amp;#183;優勢&amp;#183;項目流程

繼續閱讀