ThingJSAPI之控制樓層效果

如何控制樓層的層級效果？比如進入樓層展開樓層？三維可視化園區中該怎麼去訪問對象？又是如何讓場景顯示和隱藏的呢？在ThingJS物聯網可視化PaaS平臺中，ThingJS提供了控制場景的方法，讓我們來看看它是如何控制的吧！

ThingJS官方示例中按分類訪問對象，使用全局APP對象，通過forEach函數遍歷園區中所有對象，並且打印出對象的id屬性。

/**
* 說明：通過 “分類對象屬性樹” 訪問場景內的對象
* 操作：無，查看log信息
* 教程：ThingJS 教程——>園區與層級——>場景層級
* 難度：★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});

// 加載場景後執行
app.on('load', function (ev) {
// 獲取園區對象
var campus = ev.campus;

// 打印園區內的 Thing 物體
campus.things.forEach(function (thing) {
console.log('Thing: ' + thing.id);
});

// 獲取園區下的建築對象
var buildings = campus.buildings;
buildings.forEach(function (building) {
console.log('Building: ' + building.id);
});

// 打印第一個建築中所有的樓層
buildings[0].floors.forEach(function (floor) {
console.log('Floor: ' + floor.id);
});

});

/**
* 說明：通過 “父子樹” 訪問場景內的對象
* 操作：無，查看log信息
* 教程：ThingJS 教程——>園區與層級——>場景層級
* 難度：★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});

// 加載場景後執行
app.on('load', function (ev) {
// 獲取園區對象
var campus = ev.campus;

// 通過場景的 父子樹 訪問對象
var children = campus.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
var id = child.id;
var name = child.name;
var type = child.type;

console.log('id: ' + id + ' name: ' + name + ' type: ' + type);
}

// id 107 爲白色廠區建築，
// parent: app.query('107')[0] 爲在廠區內創建物體
// 廠區內創建的物體，只有在進入廠區後纔會能顯示，點擊廠區進入，則看到綠色小車
// 當推出廠區後，綠色小車則隱藏
var obj = app.create({
type: 'Thing',
id: 'No1234567',
name: 'truck',
parent: app.query('107')[0],
url: 'https://model.3dmomoda.com/models/8CF6171F7EE046968B16E10181E8D941/0/gltf/', // 模型地址
position: [0, 0, 0], // 世界座標系下的位置
complete: function (ev) {
//物體創建成功以後執行函數
console.log('thing created: ' + ev.object.id);
}
});


var campus = ev.campus;
console.log('after load ' + campus.id);
// 切換層級到園區
app.level.change(campus);
});

ThingJS通過THING.widget.Button方法來創建按鈕，通過query方法來查詢，括號內可以是id也可以是name。具體如何使用可以查看API。

/**
* 說明：演示場景層級切換的相關API
* 操作：
* 園區加載完成 將層級設置爲園區後 開啓了系統的層級控制
* 點擊「進入樓層」「進入書櫃」跳轉到相應層級
* 點擊「返回上一級」返回到上一層級
* 教程：ThingJS教程——>園區與層級——>如何切換層級
* 難度：★★☆☆☆
*/
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse',
    skyBox: 'Night'
});

app.on('load', function (ev) {
    // 場景加載完成後 進入園區層級 開啓默認的層級控制
    app.level.change(ev.campus);

    new THING.widget.Button('進入樓層', function () {
        // 通過name查詢得到樓層
        var obj = app.query('108')[0];
        // 將層級切換到樓層
        app.level.change(obj);
    });

    new THING.widget.Button('進入書櫃', function () {
        // 通過name查詢得到書櫃
        var obj = app.query('cabinetB4')[0];
        // 將層級切換到書櫃
        app.level.change(obj);
    });

    new THING.widget.Button('返回上一級', function () {
        // 返回上一層級
        app.level.back();
    });
});

在ThingJS中，使用building.floors.visible方法控制樓層是否可見，使用isHorzMode、isHideRoof 屬性來控制水平或者垂直展開。

/**
* 說明：樓層展開和恢復功能
* 操作：點擊按鈕和選擇框
*/
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});

// 加載場景後執行
var building = null;
app.on('load', function (ev) {
    building = ev.buildings[0];

    new THING.widget.Button('樓層展開', test_expand);
    new THING.widget.Button('樓層合併', test_unexpand);
});

// 水平展開或垂直展開(可嘗試修改後運行看效果)
var isHorzMode = false;
// 展開樓層時是否隱藏天花板
var isHideRoof = true;

// 展開建築樓層
function test_expand() {
    // 在園區層級下 建築內的樓層默認是隱藏的
    // 因此 在園區層級下 展開樓層需設置該建築下的樓層可見
    building.floors.visible = true;
    // 隱藏建築的外立面
    building.facades.visible = false;
    building.expandFloors({
        'time': 1000,
        'distance': isHorzMode ? -30 : 10,
        'horzMode': isHorzMode,
        'hideRoof': isHideRoof,
        'complete': function () {
            console.log('expand complete ');
        }
    });
}

// 恢復建築樓層
function test_unexpand() {
    building.unexpandFloors({
        'time': 500,
        'complete': function () {
            building.floors.visible = false;
            building.facades.visible = true;
            console.log('unexpand complete ');
        }
    });
}

看到這寫代碼是不是覺得很簡單？很多人都會拿threejs來橫向對比ThingJS，誇獎threejs不但免費而且功能強大，但是實際上呢？兩者的面向羣衆是不盡相同的鏟子和挖掘機都能挖地，那是不是就不要鏟子了呢？這個比喻雖然不恰當，但也說明了這一點，threejs免費、開源，全球都有許多人使用，人羣廣，技術更是層層推進，製作一個簡單的方盒子都需要近百行代碼，因爲它“要求更高”！threejs更適合那些3D愛好者和民間大神去使用，而ThingJS的定位就是，給前端工程師看看，一週內就能上手開發項目的，ThingJS更偏向於項目的製作與交付，說白了，一個是理想主義者(threejs)，而一個是現實主義者(thingjs)，追求更精密的操作，更加高大上的效果，建議使用threejs或者是其他免費開源的軟件，而要是進行項目一級的製作，需要進行交付等等，那麼使用ThingJS，反而是一個更好的選擇。