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迅速着手开发三维可视化项目！