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迅速着手開發三維可視化項目！