ThingJS官方示例教程（四）

上一節我們說到了ThingJS中如何去切換層級以及對應的暫停、再啟動事件，當我們去暫停thingjs中的進出層級功能后，我們啟動時也要與我們暫停的代碼相對應，比如THING.EventType.DBLClick的暫停進入層級事件同樣需要寫與之對應的層級啟動事件，而在本節，則為大家講解如何去查詢這個物體然后結合ThingJS中的層級切換功能，進入到我們查詢的物體中去。

ThingJS獲取對象

ThingJS中獲取對象有兩種方式，一種是通過父子樹去找到要控制的對象，另一種則是使用Query方法直接去查詢我們要尋找的對象。

使用parent，children 屬性找到要控制的對象

/**
 * 說明：通過 “父子樹” 訪問場景內的對象
 * 操作：無，查看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);
});

使用Query獲取對象

/**
 * 說明：全局查詢，根據 id 、name 、類型、屬性、正則 等方式查詢
 * 操作：點擊按鈕
 * 教程：ThingJS教程——>獲取對象
 * 難度：★☆☆☆☆
 */
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});

app.on('load', function () {
    new THING.widget.Button('按id查詢', queryById);
    new THING.widget.Button('按name查詢', queryByName);
    new THING.widget.Button('按name正則查詢', queryByRegExp);
    new THING.widget.Button('按類型查詢', queryByClass);
    new THING.widget.Button('按屬性查詢', queryByProperty);
});

// 搜索 id 為 2271 的物體
function queryById() {
    var car = app.query('#2271')[0];
    car.style.color = '#ff0000';
}

// 搜索 name 為'car01'的物體
function queryByName() {
    var car = app.query('car01')[0];
    car.style.outlineColor = '#ff0000';
}
// 根據正則表達式匹配 name 中包含'car'的物體
function queryByRegExp() {
    var cars = app.query(/car/);
    // 上行代碼等同於
    // var reg = new RegExp('car');
    // var cars=app.query(reg);

    cars.forEach(function (obj) {
        obj.style.color = '#00ff00';
    })
}
// 搜索類型是'Building'的物體
function queryByClass() {
    var things = app.query('.Building');
    for (var i = 0; i < things.length; i++) {
        things[i].style.outlineColor = '#0000ff';
    }
}

// 搜索名字中包含'car'、並且屬性字段userData中馬力大於50的物體
function queryByProperty() {
    app.query(/car/).query('[userData/power>50]').forEach(function (obj) {
        obj.style.outlineColor = '#ffff00';
    });
}

在ThingJS中，該如何利用我們的查詢功能從一棟大樓跳回到另一棟大樓或者是直接進入到我們主要觀察對象上呢？其實很簡單！我們通過query功能找到我們要重點觀測的物體，然后使用以下代碼：

var obj = app.query("#110")
app.level.change(obj);

這個功能即可實現直接進入這個物體對應的層級，返回我們的園區層級只需要使用以下這一行代碼：

app.level.change(app.root.defaultCampus);

ThingJS的使用其實是非常簡單的，ThingJS將建模和開發分開，建模人員可以通過campusbuilder模模搭搭建三維園區場景，開發人員則通過查看場景信息確認對應需求去開發相應項目，只要擁有一年的JavaScript開發經驗，即可使用ThingJS迅速着手開發三維可視化項目！